Astro AI Chatbot

An Astro AI chatbot from Nivon answers your visitors using your own pages, docs and files. Copy the HTML code from your Nivon dashboard, place it in your base layout and deploy. The chat widget then appears on every page that uses that layout.

How do I add Nivon to an Astro site?

Before you begin

• Access to your Astro project's code and to wherever you deploy it.
• A Nivon agent that's set up and ready to answer questions.

Step 1: Copy the HTML code from Nivon

Log in to the Nivon dashboard, open your agent and go to the Integration tab. Under Add the code manually, select HTML and copy the code. It already includes your published key and chatbot ID.

Step 2: Add the script to your base layout

Open the layout your pages share, usually src/layouts/Layout.astro. Paste the Nivon script just before the closing </body> tag and add is:inline so Astro outputs the tag exactly as written. It should look like this, with your own values from the Integration tab:

---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <slot name="head" />
  </head>
  <body>
    <slot />
    <script
      is:inline
      src="https://assets.nivon.ai/agent/widget.min.js"
      data-publish-key="YOUR_PUBLISH_KEY"
      data-chatbot-id="YOUR_CHATBOT_ID"
      defer
    ></script>
  </body>
</html>

If your project has more than one layout, add the script to each layout that should show the chatbot, or put it in a small component and include that component in each layout.

Step 3: Build and deploy

Run astro dev to check it locally, then build and deploy the way you normally do. If you've set allowed domains in Nivon, localhost won't be on the list, so test on your deployed site or add your preview domain first.

Step 4: Test the chatbot

Open your site, open the chat widget and send a test message. Check that the right agent replies, then click through a couple of pages to make sure the widget stays put.

What can you use an Astro chatbot for?

• Documentation sites, including Starlight: help readers find the right page or answer questions straight from your docs.
• Product and marketing sites: answer pricing, feature and onboarding questions without adding a backend.
• Content-heavy blogs: point readers to the right article when search isn't enough.

What if the widget doesn't show up on Astro?

It's missing on every page

• Check that the pages you're viewing actually use the layout you edited.
• View the page source and confirm the script tag is in the built HTML.
• Check that you pasted the complete script from the Integration tab and deployed the new build.
• If you've added allowed domains in Nivon, add your production domain too, plus any preview domain you test on.

It disappears after clicking a link

This can happen if your site uses Astro's ClientRouter for view transitions, because Astro doesn't run the same script twice by default. Add data-astro-rerun to the script tag, then check that only one chat widget shows up as you move between pages.

The wrong chatbot appears

Compare the chatbot ID in the code with the agent you meant to install, then copy the code again from that agent's Integration tab.

Good to know

• The script loads with defer, so it doesn't block your pages from rendering.
• Model, tone, appearance and knowledge are managed in Nivon, so changing them doesn't mean a new deploy.
• If you regenerate your published key in Nivon, update the script in your layout and redeploy.
• When no allowed domain is listed, the widget loads on any site. Once you add one, add every domain your Astro site runs on.
• Installing somewhere else? See Installation Guides for HTML, React, Next.js, WordPress, Google Tag Manager and website builders.