Builder.io Plugin
Add the Asyntai AI chatbot to your Builder.io pages
Overview
Builder.io is a visual headless CMS and page builder. The Asyntai AI Chatbot plugin does two things inside the Builder.io editor:
- Add the chatbot to a page with one click. Publish the page and the chat bubble is on your site.
- Send page text to your knowledge base, so the assistant answers from what you wrote in Builder.io, even before the page is live.
The assistant answers your visitors in more than 80 languages, day and night.
Requirements
- A Builder.io space. Plugins work on every Builder.io plan
- A site that renders Builder.io content with a Builder.io SDK (React, Next.js, Vue, Svelte, Qwik and others)
- An Asyntai account. The Free plan is enough for the chatbot. Sending pages to the knowledge base uses the Asyntai API, which needs a paid plan
Installation
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_.
Install the Plugin
In Builder.io, open Settings, then Plugins, and add the plugin by its npm name:
@asyntai/builder-plugin-ai-chatbotBuilder.io reloads and opens the plugin settings.
Enter Your Settings
Paste your widget ID and click Save Asyntai settings. To send pages to the knowledge base, also paste your API key from API Settings.
Add the Chatbot to a Page
Open a page or section entry, click the … menu and choose Add Asyntai AI Chatbot here. Publish it. The chat bubble is in the corner of your site.
Add the chatbot to a section that every page shares, for example a header or footer section, to show it on your whole site. The widget loads only once, also when visitors move between pages without a full reload.
Settings
| Setting | Required | What it does |
|---|---|---|
| Asyntai widget ID | Yes | Which chatbot to show, for example asyntai_1a2b3c4d5e6f |
| Asyntai API key | No | Turns on Add to Asyntai knowledge base. The key stays in your Builder.io settings and is never put on your site |
| Asyntai website ID | No | Only for accounts with more than one website. Empty means your main website |
Menu Actions
| Action | Where | What it does |
|---|---|---|
| Add Asyntai AI Chatbot here | … menu of a page or section | Adds a small Custom Code block that loads the chat widget. Publish to make it live |
| Remove Asyntai AI Chatbot | … menu of a page or section | Takes the block out again. Publish to apply |
| Add to Asyntai knowledge base | … menu of a page or section | Reads the text of the entry and adds it to your knowledge base |
| Add to Asyntai knowledge base | Content list, with entries selected | Does the same for every selected entry |
Run Add to Asyntai knowledge base again after you change a page. The plugin replaces the earlier copy of that page, so you get no duplicates. Each page shows in your knowledge base with its title, its URL path and (Builder.io).
How It Works
The chatbot block is a standard Builder.io Custom Code block, so it works with every Builder.io SDK and needs no code change in your site. You can see it in the Layers panel.
For the knowledge base, the plugin reads the text, headings, buttons and lists of the entry, including nested columns. It skips images, links and code.
Removing It
Use Remove Asyntai AI Chatbot on each page or section and publish. To remove the plugin, delete it in Settings, then Plugins.
Plans & Pricing
The plugin is free. View pricing.
Need Help?
If you have any questions or run into issues, contact us at [email protected].