How to build a website with ChatGPT Sites.

ChatGPT Sites builds a real website from a conversation. You describe it, ChatGPT builds it and shows a live preview, and when you're happy it puts it online. The hosting is included, so there's nothing else to sign up for.

• Open ChatGPT in your browser or the desktop app, and click Sites in the sidebar.
• Or go straight to chatgpt.com/sites.
• This is your Sites dashboard. Every website you build is listed here, and it's where you come back to change settings and check your visitors.

• Type into the normal chat box. Use the word website in your message, or type @Sites, and ChatGPT knows you want to build one.

The Sites dashboard, with the line "Turn your ideas into live websites" at the top. Nothing has been built yet.

The most important step, because the better your description, the better the result. Think of it like briefing a web designer. Have four things ready: who the site is for, the goal, the sections you need, and the style.

• Swap Olivia Grant for your own business, or use it as it is to follow along.
• Keep the line about placeholders. The photos come in Step 4.

Build a website for Olivia Grant, a real estate agent in North San Diego County, California.

About Olivia: she has 12 years of experience and helps families and first-time buyers find homes along the coast, in Carlsbad, Encinitas and Oceanside. She also helps homeowners sell. She's friendly, patient and explains every step in plain English.

Who it's for: families moving to the area, first-time buyers who feel overwhelmed, and local homeowners thinking about selling.

The goal: visitors get in touch, either to book a free 15-minute call or to request a free home valuation.

Sections:
1. An opening section with Olivia's name, a short headline and two buttons: "Book a Call" and "Free Home Valuation"
2. Services: one card for buyers, one card for sellers
3. Areas I cover: Carlsbad, Encinitas and Oceanside, with a short description of each
4. About Olivia
5. A contact form: name, email, message

Style: bright, calm and coastal. Lots of white space, a soft ocean blue as the main colour, and clean, modern fonts. It should feel trustworthy and professional, not flashy.

Use placeholders for images for now.

A few minutes later, a complete first version: a clean menu, the headline "Find your place. Feel at home.", two buttons, and an arched frame for the main photo with a badge for Olivia's twelve years of experience. Below that are cards for buyers and sellers, the three towns, a short about section and a contact form. The wording is good, but the design is pale and there are grey boxes where the photos go.

To make changes, describe them in the edit box under the preview. You don't need to know any design terms. Be specific: say what to change, how it should feel, and what to keep.

• This prompt keeps the text as it is. If your wording needs work too, add a line saying how you'd like it to sound.
• Change the colours to suit your own business.

This looks great, and the wording is exactly right, so keep all the text as it is.

Now let's make the design a little richer and more premium:
- Use an elegant serif font for the headlines, and keep the clean sans-serif for the body text.
- Make the ocean blue deeper and more noticeable, and use a warm sand colour as a second colour for some of the section backgrounds.
- Make the main buttons, like "Book a Call" and "Send Message", stand out more.
- Add a little more contrast to the body text so it's easier to read.

Keep the same layout, sections and image placeholders.

The page feels warmer and more premium. The headlines have a classic serif look, the seller card and the towns section sit on a soft sand colour, the buttons are a deep ocean blue, and the contact section is a rich blue panel.

ChatGPT can create realistic photos for the site, so you don't need to go looking for stock images. Describe one photo for each placeholder, and ask for the same light and colour tone so the page feels like one design.

• Change the photo subjects to match your own sections.
• Building for a real client? Use their real headshot and real photos of their work. People want to see the person they'll be working with. AI photos are great for getting the design right, and you can swap them any time.

Now replace the image placeholders with realistic photos. Generate them to match the style of the site: bright, natural light, warm and calm.

- Opening section (the arched frame): a tall photo of a modern white coastal home with large windows and a small front garden, in soft late-afternoon light.
- Carlsbad: a quiet, tree-lined residential street with family homes.
- Encinitas: a sunny beach path above the ocean with flowers along the edge.
- Oceanside: a relaxed beachfront at golden hour with a wooden pier in the distance.
- About section: a friendly, professional headshot of a woman in her late thirties, smart-casual clothes, natural smile, soft outdoor background.

All photos should look like real photography, with the same colour tone. No text, no logos, no watermarks.

Every grey box has a photo: a white Californian home with palm trees in the arched frame, a tree-lined street for Carlsbad, a flower-lined ocean path for Encinitas, a golden sunset with the pier for Oceanside, and a friendly headshot in the about section.

Until now the form only looks right. When someone fills it in, the message disappears. ChatGPT Sites has a built-in database, a safe place where the website stores information, like a spreadsheet that fills itself in.

• Change the dropdown options and the thank-you message to suit your business.
• The Enquiries page is protected with Sign in with ChatGPT, so only you can open it.

Now make the contact form fully functional.

1. Update the form fields to: name, email, phone (optional), "What can I help you with?" as a dropdown with Buying, Selling and Home Valuation, and a message box. Name, email and the dropdown are required.

2. When someone submits the form, save the enquiry to the site's database with the date and time, and show a friendly thank-you message: "Thanks! Olivia will get back to you within one business day."

3. Create a private "Enquiries" page where I can see every enquiry in a simple list, newest first, with all the details. Protect this page with Sign in with ChatGPT so only I can open it, and don't link to it anywhere on the public site.

Add basic spam protection and check that the email address is valid before the form sends.

The form has an optional phone field and a dropdown for buying, selling or a home valuation. There's a new Enquiries page at /enquiries with a lock and a Sign in with ChatGPT button. In the preview, the sign-in is only a demo. The real check with your ChatGPT account happens once the site is live.

Two things matter most before anything goes live: the form and the phone. Most people will find the site on their phone, so it has to work there first.

• Name: Jamie Test
• Email: an inbox of your own
• What can I help you with? Buying
• Message: Hi Olivia, we're looking for a three-bedroom home in Carlsbad, ideally near a good school. Could we book a call next week?
• Click send, then open /enquiries, sign in, and check the enquiry is there. You can also see it under the Database tab on your site's page in the Sites dashboard.

• Look at the site on a phone-sized screen and scroll all the way down.
• Check that the text is easy to read, the images fit, the menu opens, and the buttons are big enough to tap with a thumb.
• If something is off, describe it in the edit box, like "on mobile, the buttons at the top are too small", or use the prompt below.

Check the whole site on a phone-sized screen and fix anything that doesn't work well on mobile. Text should be easy to read, images should fit the screen, the menu should open and close properly, and all buttons should be large enough to tap with a thumb. Stack side-by-side elements on small screens. Don't change the desktop layout.

A thank-you message after you send the form, and the enquiry saved on the Enquiries page with the name, email, phone and message. On a phone, everything stacks into one column and the menu tucks away behind an icon.

ChatGPT has already given the site its own web address, but it starts off private, so only you can see it. There are no prompts in this step.

• Go to your Sites dashboard, click the three dots next to your site, then Settings.
• Under URL, click Change if you want a different address. Keep it short and easy to read. It ends in chatgpt.site.
• Under Sharing, click Manage, change who has access from Just me to Anyone on the Internet, and click Publish.

• Open /enquiries in a private browser window, where you're not signed in. It should ask you to sign in and show nothing else.

Sharing now says "Visible to everyone", and the site opens for anyone at its chatgpt.site address.

Your own domain looks more professional and is easier to remember. ChatGPT Sites doesn't sell domains, so you need to own one already. Any domain company works, like Namecheap, GoDaddy or Cloudflare, usually for around ten to fifteen dollars a year.

• On the same Settings page, click Add custom domain.
• Type your domain, for example www.yourdomain.com, and click Add domain.

• ChatGPT shows three records: one CNAME and two TXT. DNS is like the internet's address book. These records point your domain to your new website.
• Log in to the company where you bought your domain, open the DNS settings, and copy in each record exactly as shown. Use the Copy buttons so nothing gets mistyped.
• Not sure how? Click the ask ChatGPT link in the same window and it will walk you through it.
• When you're done, click I have added the records at my provider.

The status says "Pending DNS changes". It can take up to 24 hours, but it's often much quicker. Click the refresh icon to check. Once it's connected, the site is live on your own domain.

ChatGPT Sites has simple analytics built in, so you don't need to install anything to see whether people are visiting.

• Go to your Sites dashboard, click the three dots next to your site, then Analytics. It's also a tab on your site's page.
• You'll see unique visitors, page views and a chart of your traffic over time. Change the date range to look at the last week or month.
• New sites need a few visits before there's anything to show.

Add Google Analytics 4 to every page of the site using this measurement ID: [YOUR G-XXXXXXXXXX ID]. Add it without slowing down the page.

Your visitor numbers and a traffic chart. With Google Analytics added, you can also see where visitors come from, inside your Google Analytics account.

Five things that make a real difference to what comes back.

• Give it the goal. "Visitors book a call" gets you buttons and a next step in every section. A list of pages doesn't.
• Say what to keep. ChatGPT will happily rewrite everything. If a part is already right, tell it to leave it alone.
• Describe feelings and examples, not design terms. "Warmer and more premium, with an elegant serif for headlines" is enough.
• Ask for one photo per placeholder, in the same light. That's what makes AI photos look like one shoot instead of five.
• Test the form yourself. A contact form that quietly loses messages is worse than no form.

The same steps work for almost any business: a dentist, a personal trainer, a local restaurant or your own personal website. Fill in this template, use it in place of the Step 2 prompt, then follow the rest of the steps.

Build a website for [BUSINESS NAME], a [WHAT IT IS] in [LOCATION].

About it: [3 specific facts about the business and what makes it different].

Who it's for: [who visits and what they're looking for].

The goal: visitors [book a call / request a quote / buy / sign up].

Sections:
1. An opening section with the name, a short headline and [one or two buttons]
2. [Section]
3. [Section]
4. About [NAME]
5. A contact form: name, email, message

Style: [the feeling, e.g. bright and friendly / calm and premium]. [Main colour] as the main colour, and [font style]. It should feel [trustworthy / fun / luxurious].

Use placeholders for images for now.

• Step 3: your own colours, and what you want to keep.
• Step 4: one photo description for each of your sections.
• Step 5: your own dropdown options and thank-you message.