Chat Widget — Astro
Add the FutureBase AI chat widget to an Astro site using a script tag in your layout.
Add the FutureBase chat widget to your Astro site by including a script tag in your base layout.
Setup
Get your website ID
Find your website ID in the FutureBase dashboard under Settings.
Add the script to your layout
Open your base layout file (typically src/layouts/Layout.astro) and add the script tag to the <head>:
---
const { title } = Astro.props;
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
<script
src="https://embed.futurebase.io/script/YOUR_WEBSITE_ID"
is:inline
defer
></script>
</head>
<body>
<slot />
</body>
</html>Verify the widget
Run astro dev and check that the chat bubble appears in the corner of your page.
Replace YOUR_WEBSITE_ID with your actual website ID from the FutureBase dashboard.
Why is:inline?
By default, Astro processes and bundles <script> tags. The is:inline attribute tells Astro to leave the script tag as-is in the final HTML output, which is necessary because the chat widget script is loaded from an external URL and should not be bundled.
Optional configuration
You can add data attributes to customize behavior. See the HTML / Script Tag guide for the full list of available attributes.