Astro Integration

Add the Asyntai AI chat assistant to your Astro site

Overview

Astro is a website framework. The Asyntai integration is an npm package. Add it to your Astro configuration, build the site, and the chat bubble is on every page.

The assistant answers your visitors from your own content, in more than 80 languages, day and night.

Requirements

Astro 4, 5, 6 or 7
Node 18 or later
An Asyntai account. The Free plan is enough to try the widget

Installation

Follow these steps to add Asyntai to your Astro site:

Get Your Widget ID

Sign in to Asyntai and open the Install page. The widget ID is the value of data-asyntai-id in the snippet shown there. It starts with asyntai_.

Add the Package

Run this command in your project folder:

npx astro add astro-ai-chatbot

You can also run npm install astro-ai-chatbot and add the integration by hand.

Set the Widget ID

Open astro.config.mjs and put your widget ID in the integration:

import { defineConfig } from 'astro/config';
import asyntai from 'astro-ai-chatbot';

export default defineConfig({
  integrations: [asyntai({ widgetId: 'asyntai_1a2b3c4d5e6f' })],
});

Build the Site

Run npm run build and publish. Open your site and the chat bubble is in the corner of every page.

Options

Option	Type	Default	What it does
`widgetId`	string	required	Your Asyntai widget ID
`enableInDevelopment`	boolean	`true`	Set it to `false` to keep the widget off the site during `astro dev`
`scriptUrl`	string	the Asyntai CDN	Advanced. Load the widget from another URL

A missing or malformed widgetId stops the build with a message that says how to fix it.

How It Works

The integration adds the Asyntai loader to every page your site builds. The loader waits for the page's load event, so your own content always renders first.

It works with every Astro output mode: static, server and hybrid. TypeScript types ship with the package, so astro.config.ts works with no extra setup.

Answering From Your Content

Asyntai reads your published pages. Add your site URL in the dashboard, and the assistant answers from the same pages the widget sits on. You can also add documents, and question and answer pairs.

Tip: Set enableInDevelopment: false while you work on the site. The widget then shows up only on the built site.

Removing It

Delete the integration from astro.config.mjs and build again. The chat bubble is gone.

Plans & Pricing

The package is free. View pricing.

Need Help?

If you have any questions or run into issues, contact us at [email protected].

Τεκμηρίωση