Docs/Quick Start/Deploy Your Widget

Deploy Your Widget

The chat widget is a floating chat bubble that appears on your website. Visitors click it to open a full chat window and talk to your agent. It requires adding a single HTML snippet to your site — no backend changes, no server-side code, and no framework-specific dependencies.

Before you deploy

•Make sure you have added at least some knowledge to your agent (files, URLs, or Q&A pairs) — an agent with no knowledge can only give generic responses.
•Test your agent using the built-in Preview chat before embedding it on a live site.
•Configure the widget appearance in Settings → Chat Interface (colour, avatar, welcome message) so it matches your brand.

Getting the embed code

Open Deploy → Chat Widget

In your agent's left sidebar, click Deploy, then select Chat Widget.

Copy the embed snippet

The snippet is pre-filled with your agent's ID. Click Copy Code.

Paste it into your website

Add the snippet just before the closing </body> tag on every page where you want the chat bubble to appear. It only needs to be added once if your site uses a shared layout file.

<!-- AIChatVault Widget -->
<script>
  window.AIChatVaultConfig = { agentId: "YOUR_AGENT_ID" };
</script>
<script src="https://aichatvault.com/widget.js" async defer></script>

ℹ️

Your agent ID is automatically included in the snippet shown on the Deploy page — you do not need to copy it separately. Never share your agent ID publicly in a context where it could be misused; secure it with domain restrictions (see below).

Platform-specific instructions

WordPress

There are two ways to add the widget to a WordPress site:

•Using a plugin — Install any "Header and Footer Scripts" plugin (e.g. Insert Headers and Footers). Paste the snippet into the Footer Scripts field and save.
•Editing the theme — In Appearance → Theme File Editor, open your theme's footer.php file and paste the snippet just before </body>. Note: theme edits are lost on theme updates unless you use a child theme.

Shopify

Go to Online Store → Themes → Edit code

In your Shopify Admin, navigate to Online Store → Themes. Click the three dots next to your active theme and select Edit code.

Open theme.liquid

In the Layout folder, click theme.liquid.

Paste before {'</body>'}

Find the closing </body> tag near the bottom of the file. Paste the snippet just before it, then click Save.

Wix

Open Settings → Custom Code

In your Wix dashboard go to Settings → Custom Code.

Click + Add Custom Code

Paste the snippet. Set Place Code to Body — end and Apply to All Pages.

Publish your site

The widget appears after you publish.

Webflow

Open Project Settings → Custom Code

In Webflow's Designer go to Project Settings and click the Custom Code tab.

Paste in the Footer Code box

Add the snippet to the Footer Code field and save, then republish your site.

Squarespace

Go to Settings → Advanced → Code Injection

In your Squarespace dashboard navigate to Settings → Advanced → Code Injection.

Paste in the Footer field

Add the snippet to the Footer injection area and save.

Any other platform

On any platform that allows custom HTML: paste the snippet in the global footer area of your site template. If your platform only allows one custom script tag, combine both script elements or contact your platform's support for custom code instructions.

Verifying the widget is live

Visit your website in a new incognito window

Using a private/incognito browser window ensures you are not seeing a cached version and are experiencing exactly what a visitor would see.

Look for the chat bubble

The floating chat bubble should appear in the bottom-right (or bottom-left) corner of the page within 2–3 seconds of the page loading.

Click it and send a test message

Send a question related to your knowledge base and confirm the agent responds correctly.

Check the browser console for errors

Open browser developer tools (F12) → Console. If the widget failed to load you will see an error message there. Common causes: wrong agent ID, domain not in allowlist, or an ad blocker blocking the script.

Widget appearance — all options

All visual settings are managed from Settings → Chat Interface in your agent, not in the embed code. This means you can change how the widget looks without touching your website code.

Setting	Where to find it	Notes
Primary colour	Chat Interface → Primary Colour	Used for the bubble, header bar, and send button. Enter any hex colour.
Widget position	Chat Interface → Position	Bottom-right or bottom-left.
Display name	Chat Interface → Display Name	Shown in the widget header. Defaults to your agent name.
Avatar / chat icon	Chat Interface → Avatar	Upload a square image (PNG or JPG, min 200×200px). Shown in the bubble and chat header.
Welcome message	Chat Interface → Welcome Message	The first message the agent sends when the chat is opened.
Suggested prompts	Chat Interface → Suggested Prompts	Up to 4 quick-reply buttons shown at the start of a chat. Use short action phrases like "Track order" or "Pricing".
Notification bubble	Chat Interface → Notification Bubble	A small card shown above the chat button to invite visitors to chat. Toggle on/off.
Notification message	Chat Interface → Notification Message	Text inside the notification bubble. Keep it short and inviting.

Restricting where the widget loads

By default, the widget loads on any domain where the embed code is present. To restrict this, add your domains to the Settings → Security → Allowed Domains list.

•Add each domain without protocol, e.g. yoursite.com (this covers both http and https).
•Subdomains must be listed separately: www.yoursite.com and shop.yoursite.com are different entries unless you use *.yoursite.com.
•Leave blank during development for easier testing. Lock it down before going live in production.

⚠️

If you do not restrict allowed domains, anyone who discovers your embed code can add your widget to their site and use your credits. Always restrict to your production domains before launch.

Hiding the widget on specific pages

If you want the widget to appear on some pages but not others, you can conditionally add the embed code using your platform's template logic — for example, only including the snippet on product pages and not on the checkout page.

Alternatively, you can use a small JavaScript addition to hide the widget on specific URL paths:

<script>
  window.AIChatVaultConfig = { agentId: "YOUR_AGENT_ID" };
  // Hide on checkout and account pages
  var hidePaths = ['/checkout', '/account', '/cart'];
  var currentPath = window.location.pathname;
  var shouldHide = hidePaths.some(function(p){ return currentPath.startsWith(p); });
  if (shouldHide) { window.AIChatVaultConfig.hidden = true; }
</script>
<script src="https://aichatvault.com/widget.js" async defer></script>

Other deployment options

The chat widget is just one way to deploy your agent. From the Deploy section you can also access:

•Help Page — A standalone full-page chatbot hosted at a unique AIChatVault URL. No embed needed — just share the link.
•Custom Domain — Serve the help page on your own domain (e.g. help.yoursite.com).
•Email — Auto-reply to incoming support emails.
•WhatsApp, Instagram, Messenger — Connect your social messaging accounts.
•Mobile App SDK — Embed the agent as a native chat bubble in iOS, Android, Flutter, or React Native apps.

Add Knowledge Sources

Best Practices

Was this page helpful?