How to Embed a Chatbot on Ghost (2026 Guide)

Step-by-step instructions to add a chatbot to Ghost via Code Injection — site-wide or per-post, Ghost(Pro) and self-hosted, plus how to fix Portal icon conflicts.

Does Ghost allow custom code injection on all plans?

Ghost's Code Injection feature is available on every Ghost(Pro) plan — Starter, Creator, Team, and Business — with no plan gating. Self-hosted Ghost also includes Code Injection in every version since Ghost 1.0. This is a meaningful difference from some competing platforms that lock custom code behind higher-tier subscriptions.

The table below compares the two deployment scenarios. The embed procedure is identical in both cases — the only difference is where you log in to access Ghost Admin.

Ghost deployment types and Code Injection availability (2026)
DeploymentCode InjectionPlan requirementCache behavior
Ghost(Pro) — hostedYesAll plans (Starter and above)Ghost CDN; purge from Ghost Admin
Self-hosted GhostYesNone — included in Ghost coreDepends on your web server / Nginx config

If you manage your own Ghost installation, the Code Injection panel lives in the same place — Ghost Admin → Settings → Code Injection — regardless of whether you are running Ghost on a VPS, in Docker, or on a platform like Railway or Render.

How do you add a chatbot site-wide via Ghost Code Injection?

Site-wide Code Injection is the right choice for most businesses — it loads the chatbot on every page of your Ghost site automatically, including your homepage, about page, individual posts, and any tag or author archive pages.

  1. 1

    Log into Ghost Admin

    Navigate to your Ghost Admin URL — typically yoursite.com/ghost or, for Ghost(Pro), accessed via ghost.org/dashboard. Enter your credentials to reach the admin interface.

  2. 2

    Open Settings

    Click Settings in the left-hand navigation sidebar. On newer versions of Ghost Admin, Settings is accessible via the gear icon near the bottom of the sidebar.

  3. 3

    Navigate to Code Injection

    Inside Settings, find and click Code Injection. You will see two text areas labeled Site Header and Site Footer. Both inject code into every page on your site, but they insert it at different points in the HTML document.

  4. 4

    Paste your script into Site Footer

    Paste your chatbot's full <script> tag into the Site Footer text area. Footer placement is correct for widget scripts — the DOM is fully parsed by the time the script runs, which prevents initialization errors. Site Header is best reserved for scripts that must load before page content (e.g., font preloads, critical analytics).

  5. 5

    Click Save

    Click the Save button in the top-right corner of the Code Injection page. Ghost applies the change immediately. There is no separate "publish" step — your live site begins loading the script on the next page request.

  6. 6

    Verify on the live published URL

    Open your Ghost site in a regular browser tab — not the Ghost editor preview pane, which does not execute injected scripts. The chatbot bubble should appear in the corner of the page. If it does not, open the browser developer console and check for script errors.

How do you embed a chatbot on a single Ghost post or page?

Per-post Code Injection lets you load a chatbot only on specific content — for example, a services page, a pricing post, or a high-intent landing page. Each Ghost post and page has its own injection fields in the post settings sidebar.

  1. 1

    Open the post or page in the Ghost editor

    From Ghost Admin, navigate to Posts or Pages and click the item you want to target.

  2. 2

    Open the post settings sidebar

    In the post editor, click the settings gear icon in the top-right corner. This opens the post settings panel on the right side of the screen.

  3. 3

    Scroll to Code Injection in the sidebar

    Scroll down within the post settings sidebar until you see the Code Injection section, which contains Header and Footer input fields specific to this post.

  4. 4

    Paste your script into the Footer field

    Add your chatbot <script> tag to the Footer field. The script will only execute on this specific post or page — not site-wide.

  5. 5

    Update or publish the post

    Click Update (for an already-published post) or Publish to make the change live. The chatbot widget will now appear only on this post.

Should you edit default.hbs instead of using Code Injection?

Editing default.hbs directly in your Ghost theme is a technical alternative to Code Injection, but it is not the recommended approach for chatbot embedding. The core problem is persistence: theme files are overwritten when you update or switch themes. Ghost's own documentation recommends Code Injection for third-party integrations precisely because it persists independently of theme updates.

Reserve default.hbs edits for changes that genuinely require template control — custom Handlebars helpers, structural HTML changes, or logic that cannot be expressed as a plain script or style tag. Chatbot embedding does not require any of that.

How do you embed Knobot on Ghost specifically?

Knobot generates a single <script> tag from its dashboard — there is no Ghost plugin to install, no npm package, and no developer involvement required. Knobot's Premium plan ($79/month) includes 10,000 chat messages per month with no per-conversation overage charges. New accounts get 100 free preview messages and a 14-day trial before any billing begins.

  1. 1

    Create your Knobot account and build the knowledge base

    Sign up at knobot.org. After you create your business profile and enter your website URL, Knobot uses RAG (Retrieval-Augmented Generation with Voyage embeddings and Gemini Flash 2.5) to scrape your site and build the initial knowledge base automatically. No manual FAQ entry required to get started.

  2. 2

    Customize the widget in the Knobot dashboard

    Set the widget's primary color, welcome message, and lead-capture fields (name, email, phone number) to match your Ghost site's branding. All changes propagate to the live widget automatically — you do not need to re-paste the script tag when you make dashboard changes.

  3. 3

    Add your Ghost domain under Widget → Install

    In the Knobot dashboard, navigate to Widget → Install and add your exact published Ghost domain (both the apex domain and the www subdomain if applicable). This domain allowlist ensures the widget loads correctly and prevents the embed key from being used on unauthorized sites.

  4. 4

    Copy the embed snippet

    From the same Widget → Install screen, copy the embed script tag. It follows this format: <script src="https://www.knobot.org/widget.js" data-key="YOUR_KEY" async></script> — replace YOUR_KEY with the key shown in your dashboard.

  5. 5

    Paste into Ghost Admin → Settings → Code Injection → Site Footer

    Follow the site-wide steps above. Paste the snippet into the Site Footer field and click Save.

  6. 6

    Test lead capture on the live site

    Open your live Ghost site in a browser tab (not the Ghost editor preview), trigger the chatbot, and submit a test message including your contact details. Confirm the conversation and lead appear in the Knobot dashboard under Conversations.

How do you fix the Ghost Portal icon overlap with the chat widget?

Ghost's built-in membership Portal feature renders a floating icon in the bottom-right corner of the page — the same default position used by most chat widgets, including Knobot. When both elements occupy the bottom-right corner, one will cover the other depending on their z-index values and exact positioning.

There are two practical fixes:

The z-index approach is a fallback if positioning does not resolve the overlap. The Ghost Portal icon uses a high z-index internally. Adding [data-knobot-widget] { z-index: 99999 !important; } to a <style> block in your Site Header Code Injection ensures the chat widget renders above the Portal button when they do overlap visually.

What happens to the chatbot after Ghost clears or invalidates its cache?

Ghost(Pro) serves pages through a CDN and caches rendered HTML aggressively to reduce server load. When you make a change in Ghost Admin — including updating Code Injection — Ghost automatically purges the cache for affected pages. Your chatbot script change should appear on the live site within a minute or two of saving.

If you are running self-hosted Ghost behind Nginx, Cloudflare, or another caching layer, you may need to manually purge the cache after updating Code Injection. The script tag itself lives in Ghost's database, so the change is permanent — what needs purging is the CDN's cached copy of the rendered HTML. For Cloudflare users, this means purging via the Cloudflare dashboard or using the "Development Mode" toggle temporarily to bypass cache while testing.

The chatbot script itself — served from https://www.knobot.org/widget.js — is fetched fresh on each page load. CDN caching of your Ghost HTML does not cache the widget JavaScript itself.

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

Ghost enforces HTTPS on all pages for both Ghost(Pro) and self-hosted installations running with SSL configured. Your chatbot vendor must serve all assets — the widget script, API calls, and any iframes — over HTTPS. Browsers block mixed content (HTTP resources on an HTTPS page) at the browser level, not the Ghost level. All Knobot assets are served over HTTPS.

Content Security Policy headers instruct the browser to block scripts or frames from sources not explicitly listed in the policy. Ghost does not apply a restrictive CSP by default on standard hosted sites — scripts injected via Code Injection run without any CSP modification required. If you have added custom CSP headers at the Nginx, Cloudflare, or hosting-provider level on a self-hosted Ghost installation, you will need to add https://www.knobot.org to the script-src directive in your CSP configuration for the chatbot to load.

For the vast majority of Ghost users — Ghost(Pro) subscribers and standard self-hosted installs without custom security headers — SSL and CSP are not factors. Paste the script tag, save, and it runs.

What should you do if the chatbot widget does not appear on your Ghost site?

If you have saved the script in Code Injection but the chat bubble does not appear on your live site, work through these causes in order:

Frequently asked questions

Does Ghost Code Injection work on all Ghost(Pro) plans?

Yes. Unlike some website builders that gate custom code behind premium tiers, Ghost(Pro) includes Code Injection on all plans — Starter, Creator, Team, and Business. Self-hosted Ghost also has Code Injection available regardless of the Ghost version, as long as you are running Ghost 1.0 or later. There is no plan barrier to embedding a chatbot on Ghost.

Should I use the Site Header or Site Footer field for a chatbot script?

Use the Site Footer field. Chatbot widget scripts are designed to initialize after the page has parsed, and placing them in the footer ensures the DOM is ready before the script runs. Header placement is best reserved for scripts that must block rendering — analytics scripts that require a head position, for example. Footer injection keeps your page load fast and avoids any race condition with the widget container.

Will the chatbot appear in Ghost's editor preview?

No. The Ghost admin editor preview does not execute third-party scripts injected via Code Injection. This is expected behavior, not a bug. Always open your published site URL in a regular browser tab to verify the widget appears correctly. If you want a quick test without publishing, Ghost's "Preview in browser" link (separate from the editor preview pane) does render the full page including injected scripts.

How do I stop the chatbot from overlapping the Ghost Portal membership button?

The Ghost Portal icon sits at the bottom-right of the page by default, which is also where most chat widgets appear. To resolve the conflict, either configure your chatbot's position in its dashboard (if the vendor supports bottom-left placement) or override the widget z-index and offset using a CSS snippet in Settings → Code Injection → Site Header: add a <style> block targeting the data-knobot-widget attribute and adjust the bottom or right offset to shift the widget away from the Portal button.

Why does my chatbot appear on the live site but disappear after clearing Ghost's cache?

Ghost and many CDN configurations in front of Ghost(Pro) cache pages aggressively. A cache purge forces a fresh render, which will include the injected script. If the chatbot appears to disappear after a purge, it likely reappears on the next request once the CDN re-warms. If it persistently fails after caching, confirm the script tag is still present in Settings → Code Injection — occasionally browser-based editors can strip or truncate content if the tab times out during editing.

Can I embed a chatbot on a single Ghost post or page instead of site-wide?

Yes. Each Ghost post and page has its own Code Injection panel accessible from the post settings sidebar. Open the post editor, click the settings gear icon in the top-right, scroll down to find the Code Injection section, and paste your script into the Footer field. The widget will only load on that specific post or page.

Is editing default.hbs a better approach than Code Injection for embedding a chatbot?

No. Editing default.hbs directly in your Ghost theme achieves the same technical result but is overwritten whenever you update or switch themes. Code Injection persists across theme updates and is the approach Ghost itself recommends for third-party integrations. Reserve theme-level edits for changes that require deeper template control — chatbot embedding does not qualify.

Sources