How to Embed a Chatbot on Webflow (2026 Guide)

Which Webflow plans allow custom code embedding?

Custom code in Webflow requires a paid Site plan — the free Starter plan locks the Custom Code tab entirely. If you open Project Settings on a free site, the Custom Code tab either does not appear or shows an upgrade prompt. The same restriction applies to the Embed element (HTML Embed component): placing it on the canvas on a free site produces a placeholder that does not render on publish.

The table below maps Webflow's current site plan tiers to custom code availability. Workspace plans (used for teams managing multiple client sites) also require a paid site plan attached to each individual site for custom code to work on that site.

If you are on the Starter plan and cannot upgrade, the only alternative is sharing a hosted chatbot link rather than embedding a script. Knobot provides a hosted share page at knobot.org/c/your-business that you can link to from any button or navigation item — no custom code required.

What are the two custom-code paths in Webflow?

Webflow gives you two distinct ways to add a script to your site, and choosing the wrong one leads to the chatbot appearing in the wrong place — or not at all. The right path depends on whether you want the widget on every page or only in a specific location in the layout.

For a standard chatbot floating widget, use Project Settings → Custom Code → Before </body> tag. The Embed element is useful when you want the chat trigger to appear inline in your page design rather than as a corner bubble.

How do you add a chatbot site-wide via Project Settings?

The Project Settings method is the fastest path and covers all pages in one step. It requires a paid site plan and takes effect only after you publish.

What is the critical Webflow publish-first gotcha?

The single most common mistake when embedding scripts in Webflow is expecting the code to appear in the Designer's preview or canvas view. Custom code only runs on the published site — Webflow's Designer canvas sandboxes external scripts so they cannot interfere with the editing environment. This is by design, not a bug.

The consequence: every time you add or change custom code, you must go through the full publish cycle before you can verify the result. If you paste a script, click Save in Project Settings, then open the preview and see nothing — the code is fine. Hit Publish, then open the live URL. If the widget still does not appear on the live URL, that is a real issue worth troubleshooting.

The same publish requirement applies if you use Page Settings custom code or the Embed element. In all three cases, the change is staged until you publish.

How do you embed a chatbot on a single Webflow page only?

Per-page embedding lets you scope the chatbot to a specific page — useful when you only want it on a contact or services page, or when testing before rolling it out site-wide.

How do you embed Knobot on Webflow specifically?

Knobot generates a single <script> tag — there is no plugin to install through a marketplace and no developer involvement required. Knobot's Premium plan ($79/month) includes 10,000 chat messages per month with no per-chat overage fees, and you can start with 100 free preview messages (no card required) plus a 14-day trial to verify everything works on your Webflow site before committing.

What should you do if the chatbot does not appear after publishing?

If you have published the site and the widget still does not appear on the live URL, the following causes account for the vast majority of cases.

How do you fix z-index conflicts between the chatbot and Webflow interactions?

Webflow interactions and sticky nav elements often run at high z-index values. If your chatbot bubble appears behind a sticky header, a full-screen overlay animation, or a cookie banner, you need to raise the widget's z-index above those elements.

Webflow lets you add custom CSS through Project Settings → Custom Code → Head Code (in a <style> block) or through the site's global CSS classes. Add a rule targeting the widget's root element:

[data-knobot-widget] {
  z-index: 99999 !important;
}

Knobot's widget wrapper uses the data-knobot-widget attribute as its root selector. For other chatbot providers, check their documentation for the correct selector — it is usually a class like .chat-widget-container or an ID like #chat-root.

Webflow's built-in interactions that run at full-screen (overlay animations, modal backdrops) set their z-index dynamically via inline styles. If you find that a specific Webflow interaction still covers the chat button, inspect the element in browser DevTools to see the exact z-index value being applied, then set your override one unit higher.

Does Webflow's SSL or CSP block third-party chatbot scripts?

Standard Webflow-hosted sites do not apply a restrictive Content Security Policy by default. CSP headers instruct the browser to block scripts, frames, or images from sources not listed in the policy. Because Webflow does not set a restrictive script-src directive on its standard hosting, scripts added through Project Settings or the Embed element load without any CSP modification.

The one scenario where CSP becomes relevant is if you are running Webflow behind a custom reverse proxy or a CDN layer (such as Cloudflare with a custom security ruleset) that adds its own response headers. In that case, you would need to add your chatbot vendor's CDN domain to the script-src and connect-src directives in your proxy or CDN configuration — not in Webflow itself.

For the majority of Webflow users on standard hosting, SSL and CSP are not factors. All reputable chatbot providers, including Knobot, serve widget scripts over HTTPS — Webflow's enforced HTTPS on all published domains will not block them.

What is Webflow's 10,000-character limit and does it affect chatbot embedding?

Webflow enforces a 10,000-character limit on each custom code field — both in Project Settings and on the Embed element. A typical chatbot script tag is a single line under 200 characters, so the limit has no practical impact on embedding a chat widget.

The limit becomes relevant only if you are pasting large inline scripts — for example, a fully inlined analytics library or a complex GTM configuration. If you hit the limit, the solution is to host the script externally (on your own CDN or the vendor's CDN) and reference it with a src attribute rather than pasting the script body inline. Chatbot providers uniformly use the external-hosted pattern (a src pointing to their CDN), so you will not encounter this limit when adding a chat widget.