AiVA installation guide

How to integrate AiVA on your website.

Copy your AiVA embed code from Autobuild onboarding or Dashboard Settings, then paste it into your web builder or codebase. The exact snippet is unique to your assistant.

Start Free Trial Open Dashboard

Universal embed

Works with no-code builders, commerce platforms, and custom frontend frameworks.

<script id="aiva-chatbot-config">
  window.embeddedChatbotConfig = {
    assistant_slug: "YOUR_ASSISTANT_SLUG",
    api_domain: "https://api.aiva.aiintegrations.tech",
    frontend_domain: "https://aiva.aiintegrations.tech"
  };
</script>
<script
  id="aiva-chatbot-embed"
  src="https://aiva.aiintegrations.tech/embed.min.js"
  async
></script>

Get the code

Start with the snippet generated for your assistant.

AiVA generates a unique assistant slug and embed configuration for each business. Always copy the current code from your own account before installing it on a live website.

Autobuild onboarding

Complete the guided setup flow. The final install step gives you the exact embed code for the assistant you just created.

Dashboard settings

Open the AiVA dashboard, choose the assistant, go to Settings, and copy the embed code from the installation area.

Embed snippet

Use this shape, but replace the placeholder with your real AiVA code.

The dashboard version may include account-specific values. Treat this example as the pattern, not as a client-ready install.

The two required pieces

The first script sets your assistant configuration. The second script loads the AiVA widget. Keep the configuration above the external script so the assistant can read it when it starts.

<script id="aiva-chatbot-config">
  window.embeddedChatbotConfig = {
    assistant_slug: "YOUR_ASSISTANT_SLUG",
    api_domain: "https://api.aiva.aiintegrations.tech",
    frontend_domain: "https://aiva.aiintegrations.tech"
  };
</script>
<script
  id="aiva-chatbot-embed"
  src="https://aiva.aiintegrations.tech/embed.min.js"
  async
></script>

Web builders

Install AiVA on major website builders and commerce platforms.

Install AiVA globally so the assistant is available across the entire customer journey. Use the builder's site-wide footer, body-end, or global custom-code area whenever it is available.

Builder

WordPress

Source

Use a trusted header/footer or site-wide code method so AiVA loads across the whole website.

Copy the exact AiVA embed code from onboarding or Dashboard Settings.
Open your site-wide header/footer code tool, theme template, or approved custom-code plugin.
Paste the full snippet in the global footer/body-end area, save, then publish the site.

WordPress.com filters script tags on some plans. If the snippet disappears after saving, confirm the site has eligible hosting features or use a supported site-wide code tool.

Builder

Squarespace

Source

Settings > Developer Tools > Code Injection > Footer.

Open the Code Injection panel.
Paste the complete AiVA snippet into the Footer field.
Save, then test the published site in a private browser window.

The Footer field is the global placement because it injects code before the closing body tag on every supported page. Checkout pages do not support injected code.

Builder

Shopify

Source

Online Store > Themes > Edit code, usually in layout/theme.liquid before </body>.

Duplicate the live theme so you have a rollback path.
Open the theme code editor and find layout/theme.liquid.
Paste the AiVA snippet before the closing body tag, save, then preview and publish.

Theme edits can be removed by incompatible theme updates, so document the install location for future theme changes.

Builder

Wix

Source

Dashboard > Settings > Custom Code, placed in Body - end.

Make sure the site is published and connected to its domain.
Add a new custom code snippet and paste the full AiVA code.
Choose All pages, set placement to Body - end, and apply the snippet.

If visitors move between routes without a full reload, choose the Wix setting that runs the code on each page visit while still applying it globally.

Builder

Framer

Source

Project Settings > Custom Code, usually at the end of the body.

Open Project Settings and select Custom Code.
Add a script, give it a recognizable name like AiVA Embed, and paste the snippet.
Apply the script globally, save, and publish so AiVA runs across the full site.

For a chat assistant, run it on every page visit so the widget stays available as visitors move through the site.

Builder

Webflow

Source

Site settings > Custom code > Footer code.

Open Site settings and go to the Custom code tab.
Paste the full AiVA snippet in the Footer code field.
Save changes and publish the site so the script goes live.

Webflow recommends script tags near the end of the body for better page-load behavior.

Builder

BigCommerce

Source

Script Manager with a footer location and storefront or all-pages visibility.

Create a new storefront script in Script Manager.
Choose a footer location and all storefront pages where AiVA should load.
Paste the AiVA snippet, save, and allow the storefront cache to refresh.

For modern storefronts with client-side navigation, test navigation between pages after publishing.

Builder

Duda

Source

Settings > Header HTML > Body End HTML, or body-end.html in Dev Mode.

Open site settings and find Header HTML.
Paste the AiVA snippet in Body End HTML for a site-wide install.
Save, publish, and test outside the editor preview.

Duda recommends body-end placement when consent management needs to control when scripts run.

Builder

GoDaddy Websites + Marketing

Source

Use the most global custom HTML placement available, such as a footer-wide HTML section when the builder supports it.

Open the website editor and find the persistent footer or global area used across the site.
Add an HTML section there and paste the full AiVA snippet into Custom Code.
Preview, publish, and confirm AiVA appears from multiple public pages.

GoDaddy custom code is often section-based. If your editor cannot place custom HTML globally, use a developer-supported site-wide method for full-site coverage.

Builder

Square Online and Weebly-style embeds

Source

Use a global embed, footer, or site-wide custom HTML area when your builder plan supports one.

Open the website editor and find the global embed, footer, or persistent custom HTML area.
Paste the AiVA snippet from your dashboard.
Publish the site, then test multiple public pages because many builders do not run scripts inside the editor.

If the editor strips scripts or limits embed sections, use the platform's supported site-wide custom code option or ask support for the global install path.

Code-built websites

Add AiVA to common frontend stacks.

When you control the codebase, the safest default is to load AiVA once near the end of the document body or through the framework's official script loader.

Plain HTML

Paste the full AiVA snippet into the shared HTML template or layout so every page includes it before the closing body tag.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Your site</title>
</head>
<body>
  <main>
    <!-- Your page content -->
  </main>

  <!-- Paste your AiVA embed code before the closing body tag. -->
  <script id="aiva-chatbot-config">
    window.embeddedChatbotConfig = {
      assistant_slug: "YOUR_ASSISTANT_SLUG",
      api_domain: "https://api.aiva.aiintegrations.tech",
      frontend_domain: "https://aiva.aiintegrations.tech"
    };
  </script>
  <script
    id="aiva-chatbot-embed"
    src="https://aiva.aiintegrations.tech/embed.min.js"
    async
  ></script>
</body>
</html>

Plain JavaScript

Use this when you need to install AiVA from an existing JavaScript bundle after the document is ready.

function installAiVA() {
  window.embeddedChatbotConfig = {
    assistant_slug: "YOUR_ASSISTANT_SLUG",
    api_domain: "https://api.aiva.aiintegrations.tech",
    frontend_domain: "https://aiva.aiintegrations.tech",
  };

  const script = document.createElement("script");
  script.id = "aiva-chatbot-embed";
  script.src = "https://aiva.aiintegrations.tech/embed.min.js";
  script.async = true;
  document.body.appendChild(script);
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", installAiVA, { once: true });
} else {
  installAiVA();
}

React or Vite

In Vite-based React apps, index.html is the entry point. Paste the embed near the end of the body.

<body>
  <div id="root"></div>

  <!-- Paste your AiVA embed code here. -->
  <script id="aiva-chatbot-config">
    window.embeddedChatbotConfig = {
      assistant_slug: "YOUR_ASSISTANT_SLUG",
      api_domain: "https://api.aiva.aiintegrations.tech",
      frontend_domain: "https://aiva.aiintegrations.tech"
    };
  </script>
  <script
    id="aiva-chatbot-embed"
    src="https://aiva.aiintegrations.tech/embed.min.js"
    async
  ></script>

  <script type="module" src="/src/main.tsx"></script>
</body>

Next.js App Router

Use next/script in the root app layout for a site-wide install.

import Script from "next/script";

const aivaConfig = {
  assistant_slug: "YOUR_ASSISTANT_SLUG",
  api_domain: "https://api.aiva.aiintegrations.tech",
  frontend_domain: "https://aiva.aiintegrations.tech",
};

export function AiVAEmbed() {
  return (
    <>
      <Script id="aiva-chatbot-config" strategy="afterInteractive">
        {`window.embeddedChatbotConfig = ${JSON.stringify(aivaConfig)};`}
      </Script>
      <Script id="aiva-chatbot-embed" src="https://aiva.aiintegrations.tech/embed.min.js" strategy="afterInteractive" />
    </>
  );
}

SvelteKit

Use src/app.html for a site-wide install, keeping the SvelteKit body placeholder in place.

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>

  <!-- Paste your AiVA embed code here. -->
  <script id="aiva-chatbot-config">
    window.embeddedChatbotConfig = {
      assistant_slug: "YOUR_ASSISTANT_SLUG",
      api_domain: "https://api.aiva.aiintegrations.tech",
      frontend_domain: "https://aiva.aiintegrations.tech"
    };
  </script>
  <script
    id="aiva-chatbot-embed"
    src="https://aiva.aiintegrations.tech/embed.min.js"
    async
  ></script>
</body>

Troubleshooting

If the assistant does not appear, check the install path first.

Most install issues are caused by preview modes, stripped script tags, duplicate snippets, or a copied slug that does not belong to the assistant being tested.

Publish or deploy the site before testing. Many builders do not execute third-party scripts in editor preview.

Use the exact assistant_slug from your own AiVA embed code. Do not reuse another company's slug.

Install the snippet once globally. Duplicate snippets can create duplicate chat bubbles.

Prefer footer or body-end placement for builders that support it.

If a cookie banner, consent manager, or CSP is active, allow the AiVA domains used by the snippet.

Test desktop and mobile, then send a message to confirm the assistant opens and answers.

Next step

Install AiVA once, then improve the assistant from the dashboard.

After AiVA is live, use the dashboard to review conversations, adjust settings, update knowledge, and keep the assistant aligned with your business.

Start Free Trial Talk to Us