Browse the docs ▾

Tutorials

Build a business website from a brief

From one paragraph about a physio clinic to a published three-page site, with no server, database or deployment to set up.

The brief: "Meridian Physio is a clinic in Pune. I want a home page, a services page and a contact page. People should be able to call or WhatsApp us."
You'll end with a responsive site on Opmiz's hosting, using the clinic's own words and colours, ready for the owner to approve.
You need a connection with the site and content permissions. If the owner is new, start with Onboard a new user.

1. Get the facts before you design

Ask for anything you can't honestly make up: phone, email, address, hours, services and real photos. Don't invent reviews, qualifications, team members or prices. Where you lack a fact, leave it out, or mark it clearly for the owner and list it at handover.

2. Start the draft

Call list_orgs, then get_site. A new business needs start_builder_site first. Keep the revision from the latest read or write, because each batch must send it.
Then read what the starter gives you with get_page_outline, and take a look at it with get_page_screenshot. Reuse what fits and remove the rest. The starter's sample text and pictures are placeholders. The publish preview warns about placeholder images but not starter words, so replace those yourself. list_pages flags placeholder words.

3. Set the theme first

Everything else inherits from the theme, so set it before you touch pages. set_theme takes four brand colours and a heading and body font, and any Google font works. Shades follow from the colours. See Design responsive pages.

4. Add the pages

Each page is an op: add_page {name, url}. A new page isn't in the menu until you link it, and most headers hold the menu twice, once for computers and once in the phone drawer. Add the link to both. Then build the sections with add_element, set_text, set_image and set_style. To reuse a section you already styled, duplicate_section can copy it to another page.

5. Write real words and add images

Write headings that say what the clinic does and who it helps. Give images with set_image: an https address is copied into the business's media, and create_upload_link lets the owner send their own photos from a phone. If the owner has no photos, say so rather than presenting stock pictures as their clinic.

6. Give people a way to reach you

Add a contact or booking form with add_form: its fields, its button words and who gets each response. Responses also reach the Inbox once the site is published. Add buttons too: tel: to call, mailto: to email, and https://wa.me/... for WhatsApp. Add business details with preview_business_details and save_business_details, so the footer shows the right contacts.

7. Check every page on a phone

Call get_page_screenshot with breakpoint: "mobile" and full_page: true, for each page, and open the phone menu with state: {"show_menu": "true"}. Fix what you see, and look again. Review your work with screenshots has a checklist.

8. Add the search text

list_pages shows each page's address and search fields, and flags missing descriptions, placeholder words and images without alt text. Save titles and descriptions with preview_page_settings and save_page_settings, showing the owner first.

9. Publish with the owner

get_business_details lists what the first publish still needs: contact details and approved Terms and Privacy, and for a site that sells, a legal name and address. A business counts as selling unless its settings say otherwise, and apps can't change that setting, so the check may ask a clinic for these too. preview_policies with starter: true writes starter text on the same assumption, so for a clinic write the two texts yourself and have the owner read them. Then follow Publish safely and Hand over to the owner.
A clinic, a law firm or anyone regulated should check its own claims and policies. Your draft doesn't replace that, so tell the owner.

‹ Previous

Onboard a new user

Next ›

Online store

Theme and a new page

{
  "name": "apply_site_ops",
  "arguments": {
    "org_id": 1042,
    "base_revision": "7d95…",
    "note": "Clinic theme and pages",
    "ops": [
      { "op": "set_theme",
        "colors": {
          "primary": "#0F6E6E",
          "accent": "#E0793A",
          "background": "#FBFAF7",
          "text": "#1E2A2A" },
        "fonts": {
          "heading": "Fraunces",
          "body": "Inter" } },
      { "op": "add_page",
        "name": "Services",
        "url": "/services" },
      { "op": "add_page",
        "name": "Contact",
        "url": "/contact" }
    ]
  }
}

A call button

{ "op": "add_element",
  "kind": "button",
  "to_ref": "home/home-hero",
  "position": "last",
  "text": "Call the clinic",
  "url": "tel:+912000000000",
  "element_style": "primary_button" }

‹ Previous

Onboard a new user

Next ›

Online store