Docs/Developer Guide/Widget Embed Code

Widget Embed Code

The chat widget is a lightweight JavaScript snippet that loads your agent as a floating bubble on any webpage. It initialises asynchronously and does not block page rendering.

Getting your embed code

Go to your agent → Deploy → Widget. The embed code is pre-filled with your agent slug and domain. Copy it and paste it before the closing </body> tag on any page.

Widget embed (recommended)

The widget embed loads as a floating chat bubble. Replace your-agent-slug with your agent's slug from the Deploy page.

<script>
  window.aiChatConfig = {
    chatbotId: "your-agent-slug",
  }
</script>
<script
  src="https://aichatvault.com/widget.js"
  chatbotId="your-agent-slug"
  domain="https://aichatvault.com"
  defer>
</script>

ℹ️

The chatbotId value is your agent's slug (the URL-friendly identifier), not a numeric ID. Find it on the Deploy page or in the agent's URL.

Iframe embed

Embed the full chat interface inline using an iframe. This is useful for dedicated support pages. Advanced widget features (visitor identity, JS API) are not available in iframe mode.

<iframe
  src="https://aichatvault.com/chatbot-iframe/your-agent-slug"
  width="100%"
  style="height: 100%; min-height: 700px"
  frameborder="0">
</iframe>

Public share link

Each agent also has a standalone chat page you can share directly with users — no embed required:

https://aichatvault.com/chat/your-agent-slug

JavaScript API

Once the widget script has loaded, use window.aiChatVault to control the widget programmatically:

// Open the chat window
window.aiChatVault.open();

// Close the chat window
window.aiChatVault.close();

// Remove the widget from the page entirely
window.aiChatVault.destroy();

// Get the widget version
window.aiChatVault.version; // e.g. "2.3.0"

Deployment checklist

•Paste the script before the closing </body> tag — not in <head>.
•Use the defer attribute (already included) to avoid blocking page load.
•On single-page apps (React, Vue, Next.js), load the script once globally (e.g. in _app or index.html) rather than per-component.
•The widget respects the widget_position setting (left or right) configured in Agent Settings → Chat Interface.
•The widget_theme setting (light/dark) is inherited from Agent Settings.

API Keys

REST API Integration

Was this page helpful?