How to Add an AI Chatbot to Astro
Astro ships zero JavaScript by default, making it perfect for content sites. Tuqlas adds just one lightweight script — your chatbot loads without bloating your bundle.
01
Create a chatbot on Tuqlas
Sign up at tuqlas.com, create a chatbot, and copy your embed key.
02
Add the script to your layout
In your Astro layout file, add the Tuqlas script tag before the closing </body> tag — just like plain HTML.
03
Build and deploy
The chat widget appears on every page that uses this layout. Works with Astro's static and SSR modes.
src/layouts/Layout.astro
---
// Layout.astro
---
<html>
<head>
<slot name="head" />
</head>
<body>
<slot />
<script
src="https://tuqlas.com/chatbot.js"
data-key="tq_live_xxxxxxxxxxxx"
defer
></script>
</body>
</html>💡 Tip
Since Astro outputs static HTML by default, the Tuqlas script is the only JS that loads for the chatbot — keeping your site fast.
Ready to add a chatbot to Astro?
Create your chatbot and get your embed key in under a minute.