Add an AI chatbot to your Astro site.
Astro layouts are the page shell (<html>, <head> and <body>) your pages share. Add the ChatBento script to the layout once, marked is:inline so Astro leaves the external script alone, and every page using that layout gets the chatbot.
Install on Astro in 5 steps
Where it goes: Your layout (e.g. src/layouts/Layout.astro), before </body>
- 1
In ChatBento, open your chatbot, go to Install and copy your bot ID (the data-bot-id value in the snippet).
- 2
Open the layout your pages share, for example src/layouts/Layout.astro.
- 3
Paste the script just before </body>, with is:inline and your bot ID.
- 4
Build and deploy.
- 5
Open your live site in a new tab and click the chat bubble in the corner to test it.
src/layouts/Layout.astro
<html lang="en">
<head>
<!-- … -->
</head>
<body>
<slot />
<script is:inline src="https://chatbento.com/widget.js" data-bot-id="YOUR_BOT_ID" async></script>
</body>
</html>Steps follow Astro’s own documentation, checked October 23, 2026.
Why is:inline
Astro's docs say to use is:inline for scripts loaded from outside your project. It tells Astro not to process or bundle the tag.
View transitions (ClientRouter)
With Astro's <ClientRouter />, the whole <body> is replaced on each navigation, which removes the chat bubble after the first page change. ChatBento doesn't support ClientRouter yet; sites without it aren't affected.
Several layouts
If some pages use a different layout, add the script there too, or move it into a shared component both layouts include.
What the chatbot does on your Astro 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.
Astro questions. Answered.
Does it work with on-demand rendering?
Yes. The tag is part of your layout's HTML whether a page is prerendered or rendered on demand, and the widget runs in the browser.
Does it slow down my Astro site?
Astro ships no JavaScript by default, and this adds one async script of about 6 KB compressed that doesn't block rendering.
Can it learn from my Astro pages?
Yes. Enter your site's address in ChatBento and it reads your published pages through your links and sitemap.
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.
Add AI support to your Astro site. Live in minutes.
14-day free trial. No card required.