Skip to content

Add an AI chatbot to your Gatsby site.

Gatsby's onRenderBody API in gatsby-ssr runs for every page during the HTML build, and setPostBodyComponents adds elements after the page body. Add the ChatBento script there and it's in every page Gatsby builds.

Start freeFree plan, 50 messages a month. No card required.

Install on Gatsby in 5 steps

Where it goes: gatsby-ssr.js → onRenderBody → setPostBodyComponents

  1. 1

    In ChatBento, open your chatbot, go to Install and copy your bot ID (the data-bot-id value in the snippet).

  2. 2

    Open gatsby-ssr.js (or gatsby-ssr.tsx) in your project root. Create it if it doesn't exist.

  3. 3

    Add the onRenderBody export below with your bot ID.

  4. 4

    Rebuild and deploy (gatsby build).

  5. 5

    Open your live site in a new tab and click the chat bubble in the corner to test it.

gatsby-ssr.js

const React = require("react");

exports.onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script key="chatbento" src="https://chatbento.com/widget.js" data-bot-id="YOUR_BOT_ID" async />,
  ]);
};

Steps follow Gatsby’s own documentation, checked October 23, 2026.

Gatsby Script instead

Gatsby 4.15 and later also has a <Script> component, which can go in wrapPageElement in both gatsby-ssr and gatsby-browser. The gatsby-ssr route above is simpler for a single site-wide tag.

Already have gatsby-ssr?

Add setPostBodyComponents to your existing onRenderBody rather than exporting it twice.

Content Security Policy

If you set a Content-Security-Policy, allow https://chatbento.com in script-src and connect-src.

What the chatbot does on your Gatsby site

Answers from your content

Trained on your pages, docs and Q&As. It says so when it doesn't know, instead of guessing.

Hands off to you

When a visitor needs a person, it collects their email and sends you the conversation.

Free to start

A free plan with 50 AI messages a month. Paid plans from $8/month: 80% less than Chatbase.

Comparing tools? See ChatBento vs Chatbase and pricing.

Gatsby questions. Answered.

Does it stay open when visitors click Gatsby links?

Yes. Gatsby swaps page content inside its own root element, and the widget sits outside it, so it stays in place between pages.

Will it hurt my Lighthouse score?

The script is async, about 6 KB compressed, and renders the chat window only when opened, so it doesn't block your page.

Can it learn from my Gatsby content?

Yes. Enter your site's address in ChatBento and it reads your built pages, including Markdown and CMS-sourced content.

How much does ChatBento cost?

ChatBento has a free plan with 50 AI messages a month, free forever. Paid plans are Hobby at $8/month, Standard at $30/month and Pro at $100/month. New accounts start with a 14-day trial, no card required.

Other platforms

All 31 guides

Add AI support to your Gatsby site. Live in minutes.

Start free trialSee pricing

14-day free trial. No card required.