Adding a Chatbot to Framer and Ghost Sites

On Framer, a chatbot goes in Project Settings > Custom Code: add a script, paste the chatbot's script tag, place it at the end of the body on all pages, and publish. On Ghost, it goes in Code Injection in Ghost Admin's settings: paste the script tag into the Site Footer box and save. Both take a couple of minutes. The details that trip people up are the platform domains, Ghost's Portal button and what the assistant can learn from each kind of site.

Both platforms are covered here because they share a pattern: a polished hosted site, no plugin store for chat, and one settings box where third-party code lives.

Framer: where custom code lives

Framer's help center lists "chat and support widgets" among the things custom code is for. At the time of writing (October 2026), the steps are:

1. Open Project Settings and select the Custom Code tab in the left sidebar.
2. Click Add Script (or the + icon if you already have scripts).
3. Give it a clear name, such as "Chat widget".
4. Paste your chatbot's script tag. It's one line with your bot ID in a data-bot-id attribute. See find your bot ID if you need it.
5. Choose where the code is placed. Framer offers the start or end of the head and body. Pick the end of the body, so your page loads before the chat script runs.
6. Leave it on all pages, or select specific pages if you only want chat on some.
7. Choose how often it runs. Pick Once. Framer describes Once as adding and running the code a single time, and Run on every page visit as running it each time someone visits a page.
8. Publish the site.

If you pick Run on every page visit by mistake, you won't get two chat buttons. SpideyChat's widget mounts once per bot and ignores a second copy on the same page. After publishing, click between a few pages on the live site to confirm the button is there throughout.

Test on the published site. Framer's help center says publishing gives your site a framer.app address automatically, and you can connect a custom domain. Sites on Pro and above can also have a staging environment. Test where real visitors will see the chat, not only in the editor.

Ghost: where custom code lives

Ghost calls its box Code Injection. Ghost's tutorial says Site Header code is injected into the head and Site Footer code goes before the closing body tag. It recommends the footer for JavaScript so it loads properly.

1. In Ghost Admin, open Settings and find Code Injection (recent versions list it under Advanced).
2. Paste the chatbot's script tag into Site Footer.
3. Save.

Ghost also has Code Injection on individual posts, in the editor's sidebar. Ghost says it works the same way but only on that post's page. Use it if you want chat on, say, a single "Work with me" page and nowhere else.

Plans. Ghost's pricing comparison, at the time of writing, doesn't list Code Injection as a difference between Ghost(Pro) plans. What the Starter plan excludes are custom themes and API-based custom integrations, such as webhooks and the Admin API. A pasted script tag is neither of those.

Portal's button. Ghost's membership screens, called Portal, can show their own floating button. If it shares a corner with the chat button, the two compete for the same thumb. Ghost's help center describes a Show Portal button setting under Settings, Membership, Signup portal, Customize, in the Look and feel section. Portal screens still open from Portal links in your navigation if you hide the floating button.

The domain detail on both platforms

Framer gives every published site a framer.app address. Ghost(Pro) sites have a ghost.io address behind the custom domain. You'll probably load your site on the platform address at least once while building it.

A SpideyChat chatbot registers the first website it loads on. If that's the platform address, your own domain is a second website. On the Free plan, which covers 1 website per chatbot, the widget would then remove itself on your real domain and write a warning in the browser console. Before launch, open License & websites on your chatbot's page, add your domain and remove the platform address if you don't need it. Starter covers 3 websites and Pro 10. Our guide to chatbot licenses and website limits explains how sites are counted.

Training the assistant on each kind of site

The assistant answers from what it learns, and the two platforms produce different kinds of sites.

Framer sites are usually marketing sites: services, pricing, about, contact. Framer's help center says it generates a sitemap for every published site at /sitemap.xml, and SpideyChat's crawler reads that first, up to 150 pages per run on Starter and above.

Ghost sites are usually publications. Ghost generates a sitemap index at /sitemap.xml that points to separate sitemaps for pages, posts, tags and authors. Two things follow:

• Ghost posts live at short root-level addresses, without /blog/ in the path. SpideyChat's filter that skips blog posts by default goes by the address, so on Ghost it won't recognise your posts as posts. A crawl learns your posts along with your pages, up to the 150-page cap. Tag and author archives are skipped.
• Portal's sign-up and plan screens are drawn by a script after the page loads. The crawler reads the HTML each page sends, so tier prices and cancellation terms that only appear inside Portal may not be learned. Put them on a normal page, such as "Membership", or add them as Q&A pairs.

For the questions readers actually ask ("how do I change my email?", "how do I cancel?", "is there a student rate?"), a short help page beats hoping the right post gets crawled. Our guide to which pages a chatbot should learn from helps you choose.

If the chat doesn't appear

Open the published site in a private window, then the browser console, and filter for "SpideyChat". The widget writes a line for a missing bot ID or a website that isn't on the license. Our troubleshooting checklist covers the remaining causes, such as caches and security policies.

Next step

Paste the script into Framer's Custom Code or Ghost's Site Footer, publish, and check the license list before you point your domain at it. The integrations page lists every install route, and you can test the assistant against your site before you install anything.