How to Add an AI Chatbot to Webflow (Plus Framer, Carrd and Ghost)

Webflow, Framer, Carrd and Ghost all let you add an AI chatbot without a plugin: you paste one script tag into the place each builder reserves for site-wide code. The tag is identical on all four. What changes is where that setting lives, which plan unlocks it, and whether the code runs before you publish.

The guide is written for founders, designers and marketers who want an AI support agent on a builder site: a chat widget that answers visitors from your own content and hands the conversation to a person when it cannot help. Webflow gets the deepest section because it has the most rules. Framer, Carrd and Ghost follow, then allowed domains, training and troubleshooting, which apply to all four. For a SaaS marketing site, the SaaS setup guide covers what the agent should handle once it is live.

Every menu path, plan rule and price below was read on the builder's own help center and pricing page on 19 October 2026, in US dollars. The snippet belongs to PepoChat, our AI support agent, and works on its free plan; any widget that installs with a script tag goes in the same place. On WordPress, the PepoChat plugin is simpler than pasting code.

Where does the chatbot code go on Webflow, Framer, Carrd and Ghost?

On all four builders, the chatbot script belongs in the site-wide custom code setting, at the end of the page body, on a plan that allows custom code.

Last verified 19 October 2026 on each builder's help center and pricing page; prices are per site, in US dollars.

The same snippet goes into every field. Copy it from Widget Setup in the PepoChat dashboard, where your Organization ID, the 32-character code that ties the widget to your workspace, is already filled in:

<script src="https://widget.pepochat.com/widget.js" data-organization-id="YOUR_ORGANIZATION_ID"></script>

Add data-position="bottom-left" inside the tag to move the launcher to the left corner; the default is bottom right. The install docs list every attribute, and the website builders page covers Wix, Squarespace and Shopify.

How do I add an AI chatbot to Webflow?

Paste the script into Site settings → Custom code → Footer code, click Save changes, and publish the site. Webflow's help center states that custom code does not go live until the site is published, so a skipped publish is the first thing to check when the launcher does not appear.

What you need before you start

Webflow gates custom code by plan. According to its custom code help article, updated 2 September 2026, Site managers and Designers can add site-wide or page-level code when the site has an active Site plan, or when the workspace is on a Core, Growth, Agency or Freelancer plan. Webflow's pricing page leaves custom code out of the free Starter Site plan, and the Code Embed element follows the same plan rule, so it is no free workaround.

You also need your PepoChat Organization ID; if you have no workspace yet, create one free and import your site first.

Steps to add the chatbot in Webflow

1. In PepoChat, open Widget Setup, choose HTML and copy the snippet.
2. In Webflow, open the site's Site settings from the dashboard or the Designer.
3. Click the Custom code tab.
4. Paste the snippet into Footer code and leave Head code as it is.
5. Click Save changes.
6. Click Publish, tick your webflow.io staging subdomain (and your custom domain when you are ready to go live), then click Publish to selected domains.
7. Open the published address in a private window, click the launcher, and ask a question your pages answer.

Webflow inserts Footer code just before the closing </body> tag on every page of the site, and each custom code field holds up to 50,000 characters.

Should the script go in Head code or Footer code?

Footer code is the right field. Webflow's guidance is that scripts placed just before </body> let the page load its content before the JavaScript runs, and it suggests async or defer for any external script added to the head. The PepoChat loader waits for the page's content before drawing the launcher, so a copy in Head code would still work, but it gains nothing there.

The loader's cost is small either way: widget.js is 7,911 bytes on disk and 3,248 gzipped (measured 19 October 2026). After your page has finished loading, the loader fetches the chat frame in browser idle time so the first click opens instantly, and a visitor session starts only when someone opens the window. For the leanest page load, add data-preload="false" to the tag and the frame loads on the first click instead. The script tag guide covers the loader in more detail.

How do I show the chatbot on some Webflow pages only?

Use page-level custom code instead of Site settings. Open the page's Page settings in the Designer, paste the snippet into the Before </body> tag field under Custom code, save, and publish. Webflow adds page code after any site-wide code, so pick one place, not both: the PepoChat loader ignores a second copy and logs "already initialized", but the duplicate is still downloaded.

Does the chatbot appear on the Webflow Ecommerce checkout?

Yes. Webflow applies Footer code to the entire site, and the Webflow Ecommerce checkout is a page of that site at /checkout. Webflow's help article adds a note for stores: scripts you add are outside Webflow's control and may affect your own PCI compliance obligations, which only you can assess.

Leaving the chat there is reasonable, since payment and shipping questions come up at checkout. To keep third-party scripts off the payment step instead, paste this variant into Footer code: the JavaScript snippet from PepoChat's install docs, wrapped in a check that skips paths starting with /checkout.

<script>
  if (!window.location.pathname.startsWith("/checkout")) {
    var s = document.createElement("script");
    s.src = "https://widget.pepochat.com/widget.js";
    s.async = true;
    s.setAttribute("data-organization-id", "YOUR_ORGANIZATION_ID");
    document.body.appendChild(s);
  }
</script>

Why does the chat say "not allowed" in Webflow's preview?

Webflow also runs custom code in the Designer's preview and comment modes, which run inside Webflow's editor rather than on your site's address, so with a PepoChat allowed-domains list set, the chat there shows the not-allowed message. Test on the published webflow.io address instead, or keep the launcher out of preview with the two HTML comments Webflow supports:

<!-- EXCLUDE FROM PREVIEW: START -->
<script src="https://widget.pepochat.com/widget.js" data-organization-id="YOUR_ORGANIZATION_ID"></script>
<!-- EXCLUDE FROM PREVIEW: END -->

How do I add an AI chatbot to Framer?

Framer takes the same snippet under Project Settings → Custom Code: add a script at the end of the body, let it run once, and publish. Framer's custom code help article, updated 15 September 2026, names chat and support widgets among the things custom code is meant for.

Steps to add the chatbot in Framer

1. Open your project and go to Project Settings. Some Framer help pages still call it Site Settings.
2. Select the Custom Code tab in the left sidebar.
3. Click Add Script, or the plus icon if the project already has scripts, and give it a name such as "PepoChat".
4. Set the placement to the end of the body tag and paste the snippet.
5. Leave all pages selected, or pick only the pages that should show the chatbot.
6. Under how often the code should run, choose Once.
7. Click Publish, or Update on a site that is already live, and open the published address.

Once suits a chat loader, which only needs to start one time per visit; Run on every page visit adds nothing, because a second run of the PepoChat loader finds the first copy and draws no second launcher. Framer never loads custom code in the canvas preview, so test on the published site.

Which Framer plan do you need for custom code?

Framer's pricing page and custom code article, both read on 19 October 2026, list no plan requirement for custom code. The free plan publishes to a framer.app address with a "Made in Framer" badge. Basic, at $10 a month billed yearly, adds a custom domain and removes the badge after you republish; Pro, at $30 a month, adds staging. Framer also offers free subdomains such as framer.website, which matters for the allowed-domains list below.

How do I add an AI chatbot to a Carrd site?

Carrd has no separate site-wide code box, so the chatbot goes in an Embed element set to Hidden at Body End, which writes the code once for the whole site. Carrd's embedding custom code docs mark the Embed element as requiring Pro Standard or higher.

Steps to add the chatbot in Carrd

1. Open the site in the Carrd builder and click Add Element, then Embed.
2. Set Type to Code and paste the snippet into Code.
3. Optionally set Label to "PepoChat" so you can find the element later.
4. Set Style to Hidden and choose Body End.
5. Publish the site and open the published address.

A Carrd embed outputs nothing inside the builder, so the launcher only appears on the published site. Because a Hidden embed is published outside the normal element flow, Carrd notes you can move it somewhere convenient, such as the very end of the site.

Embed element or site-wide code on Carrd?

On Carrd, the Embed element is the site-wide code. Inline inserts code exactly where the element sits in the layout, while Hidden writes it to the head, the top of the body or the end of the body. Hidden at Body End matches where PepoChat's install docs place the tag and covers the whole site, because Carrd's sections divide one page into named regions that simulate separate pages.

Carrd's plans page lists three Pro tiers, billed yearly: Pro Lite at $9 for 3 sites, without embeds or custom domains; Pro Standard at $19 for 10 sites, with custom domains, forms, widgets and embeds; and Pro Plus at $49 for 25 sites, adding developer features. Free sites publish to a .carrd.co address. Carrd pages are often one-page landing sites, and the lead generation guide shows how the chat can ask for an email there instead of a form wall.

How do I add an AI chatbot to Ghost?

Ghost has a built-in Code injection setting: go to Settings → Advanced → Code injection, click Open, paste the snippet into Site footer, and save. Ghost's code injection help says Site footer code is placed before the closing </body> tag on every page of the site.

Steps to add the chatbot in Ghost

1. In Ghost Admin, open Settings.
2. Scroll to Advanced, find Code injection and click Open.
3. Paste the snippet into Site footer, not Site header.
4. Click Save.
5. Open the site in a private window and click the launcher.

To show the chat on a single post or page only, use that post's own code injection in the editor's post settings instead of the site-wide setting.

Ghost(Pro) Starter, Publisher or self-hosted?

Code injection works on every Ghost(Pro) plan, Starter included. Ghost's pricing page, read on 19 October 2026, lists what Starter leaves out (marketplace and custom themes, paid tiers, custom integrations, the Admin API and webhooks), and code injection is not among them. Starter costs $15 a month billed yearly or $18 billed monthly; Publisher costs $29 a month billed yearly, both for up to 1,000 members. Self-hosted Ghost has the same setting with no plan restriction; editing the theme just before {{ghost_foot}} also works but is lost when you switch themes.

What about members-only posts and the Portal button?

Ghost's Site footer code runs on members-only posts too, but PepoChat's crawler reads pages as an anonymous visitor's first request sees them, so it learns only the public part of a members-only post. PepoChat has no connection to Ghost's member status: upload paid content as a document only if you are happy for the agent to quote it to anyone.

Ghost's Portal button, the floating button that opens the signup and account screens, is fixed to the bottom-right corner, and Ghost's open-source Portal code gives it a stacking order of 3,999,998 against the PepoChat launcher's 999,999, so it sits on top where the two overlap. Add data-position="bottom-left" to the snippet, or switch off Show Portal button under Settings → Membership → Signup portal → Customize.

How do I allow both the staging domain and the live domain?

Add each hostname you use to PepoChat's allowed-domains list: the full staging address, such as your-site.webflow.io, and your own domain, such as example.com. Subdomains are included automatically, so the example.com entry also covers www.example.com.

The allowed-domains list, under Widget Customization → Allowed Domains, names the sites where your widget may start a conversation. Your Organization ID is visible in your page source, so without the list anyone could paste your snippet on another site and spend your AI replies. The list takes up to 20 entries, strips the scheme and path when you save, and applies to new conversations immediately.

Matching works on the hostname: an entry allows that exact host and any subdomain of it. An entry of example.com allows blog.example.com but not badexample.com, while an entry of www.example.com allows only that host.

Matching rules checked against PepoChat's allowed-domains docs and product code on 19 October 2026.

On a domain that is not on the list, the launcher still appears, but opening it shows "This website is not allowed to use this chat widget." Nothing is sent to the agent and no AI reply is spent. The allowed-domains docs cover the edge cases, such as the hosted chat page.

How does the chatbot learn what is on a builder site?

Import the published site into PepoChat's knowledge base, the private collection of pages, files and snippets the agent searches before every reply. A knowledge source is one item counted against your plan's source limit, and a whole-site crawl or sitemap import counts as a single source however many pages it brings in.

Each website import takes up to 200 pages. A crawl follows same-site links up to 3 levels deep; both kinds of import honor robots.txt, accept include and exclude path filters, and keep only each page's main content, dropping menus, headers and footers. Pages are re-fetched weekly and only changed pages are re-indexed, so a price you edit in Webflow reaches the agent within a week, or at once with Sync website pages.

All four builders publish a sitemap at /sitemap.xml. Webflow's, generated when Auto-generate sitemap is on under Site settings → SEO, lists CMS Collection pages, so a sitemap import is the easiest way to bring in a blog or a help section. Ghost's is an index, so importing /sitemap-pages.xml and /sitemap-posts.xml keeps author and tag archives out. For a Webflow CMS past 200 items, filter the first import to the pages customers ask about, then import the same site again with another filter: PepoChat groups the second import with the first, so the site still counts as one source.

The crawler reads the published HTML and runs no scripts. Framer's help warns that accordion answers revealed by a click may not be indexed unless the collapsed state keeps them in the page, and the same fix helps PepoChat. A Carrd site is one page, so a single-URL import of its address captures every section. For anything the crawler misses, add a Q&A pair, which does not count as a knowledge source. The website and PDF training guide goes deeper.

Why is the chatbot not showing on my site?

Most missing launchers on these builders come down to four causes: the site was not republished, the plan does not run custom code, the domain is not on the allowed list, or something else owns the bottom-right corner.

Builder behavior verified 19 October 2026 against each builder's help pages.

PepoChat's launcher is a 60-pixel button placed 20 pixels from the bottom and the side, drawn above almost everything else on the page. Anything fixed to the same corner with a higher stacking order covers it: Ghost's Portal button does, and so can a cookie banner. Webflow puts its "Made in Webflow" badge in the bottom-right corner of sites that have not paid to remove it, which includes many webflow.io staging sites. Moving the launcher to the left corner fixes all of these.

Beyond those, PepoChat's troubleshooting docs cover the rest. A wrong Organization ID shows "Organization not valid" when the chat opens, and an ad blocker in your own browser can block the chat frame, so always test in a private window.

What to do next

• Import your site and fix the first wrong answers with Q&A pairs, using the training guide as your checklist.
• Before you announce the chat, work through the AI chatbot launch checklist.
• Create a free PepoChat workspace: every feature is on the free plan, with 200 AI replies a month and 5 knowledge sources.