Show your website with your own front-end

A website from Berchtold comes in three ways:

1. Hosted by Berchtold. You build it in Berchtold, and Berchtold shows it to visitors. Read Build your website in Berchtold.
2. Custom content delivery. You build it in Berchtold, and your developer's code (the front-end) shows it to visitors. This article covers this way.
3. Self-Hosted Headless. You keep your own website, such as WordPress. Berchtold adds home search, forms and tracking to it. Read Show home search on your own website.

With your own front-end, your team still writes pages, posts and menus in the Berchtold editor. The front-end reads the published content from Berchtold's content API and shows the pages in its own design.

Set it up

The settings are in the Hosting and delivery card on your website's Overview.

1. Under Hosting, choose Custom content delivery.
2. Enter the Front-end address, like https://www.yourwebsite.com. Select Save. Berchtold shows where visitors will go. Select Use my front-end to switch.
3. Under Content API keys, select Create key. Enter a Key name, and choose Server key. Copy the key: Berchtold shows it only once. Give it to your developer in a safe way, not by email.
4. Give your developer the developer guide.
5. Under Preview and publishing, enter the Preview address your developer gives you. Preview in the editor then opens your draft on the front-end.
6. Enter the Publish notice address your developer gives you, and select Save. Copy the Signing secret that shows: Berchtold shows it only once. Each time you publish, Berchtold tells the front-end which pages to update. New signing secret makes another one.

Only the website's owner or a workspace admin can change these settings. Other people can see them.

What changes

• Berchtold's addresses send visitors to your front-end. For example, yourname.berchtoldhosted.com/about opens www.yourwebsite.com/about. Search engines see one copy of your website.
• Your domain points to your front-end, not to Berchtold. The company that hosts your front-end shows your website on your domain. If a domain is connected through Berchtold, remove it first. The Domains and email links card then shows only the address your emails use.
• The Make the website public button is gone. Your developer decides when the front-end goes live.
• The Sites list shows an Own front-end badge and four setup steps. Choose the front-end and create a key. Then add the tracking script and set the publish notice.

Pages that emails link to

Market reports, listing alerts and sign-in emails link to pages on your front-end. In the Hosting and delivery card, under Pages that emails link to, enter three addresses and select Save:

• Market page, with {market} where the market's web address goes, like /markets/{market}. Your front-end shows no MLS listings, so listing cards in emails open this page too.
• Visitor account page, like /my-account. Sign-in links open it with #t= and a one-time code after it.
• Contact page, like /contact. The market report's home value link opens it.

Berchtold opens each page once to check that it loads. It follows up to 3 redirects on your front-end's own website. Each page shows Answers, Not found or another result. Select Check pages after your developer changes them. Market reports and listing alerts for this website wait until every page is set and answers. The website's setup checks say which pages are missing.

What the front-end adds itself

• Visit tracking. Your developer adds the tracking script from Sites, on the Installation tab. Berchtold tracks the front-end's domain for you.
• Forms. Each form section gives your developer the form's address to show on the page.
• Home search. MLS listings never come through the content API. In each listings section, your developer adds home search, with search, listings, sign-in and saved homes. First set up home search for the website in Sites, with its search page on your front-end.

Keys

• A server key stays on your developer's server. Use it for most front-ends.
• A browser key works only on the websites you name, like https://www.yourwebsite.com. Use it when a page asks for content in the visitor's browser, such as a post search.
• To stop a key, select Revoke next to it. It stops working at once. Make a new key before you revoke the old one, so the front-end keeps working.

Publish notices

The Hosting and delivery card shows the last notice and whether it arrived. If 3 notices in a row fail, the website's owner and the workspace admins get a notification. Fix the address, then select Send again.

A scheduled post is published at its time without a notice. Your developer can rebuild the front-end once a day to show it.

Try a query

In the Hosting and delivery card, open Try a query to see what the content API sends back. It shows only published content.

Go back to Berchtold

In the Hosting and delivery card, choose Hosted by Berchtold and select Save. Then select Use Berchtold. Berchtold shows the website again at its own addresses. Your keys stay, but they stop working until you choose Custom content delivery again.

With Claude or ChatGPT

Your AI app can do the same work through the MCP. For example: "Check the front-end settings of my website. Switch it to our own front-end at https://www.yourwebsite.com, and show me the change before you save it. Then make a server key named Production and give it to me once."