Universal Embed

Add Call Agent AI Voice & Chat to any website in minutes (Shopify, Wix, Webflow, Squarespace + custom builds).

Overview

This guide shows how to install the Call Agent AI Chat & Voice Widget on any website using a universal embed snippet.

Use this page if you are:

• Not using the WordPress plugin

• Adding the widget to Shopify/Wix/Webflow/Squarespace

• Installing on custom websites (HTML, React, Vue, Angular)

✅ Before you start: Make sure your domain is added to Allowed CORS Origins in your Call Agent AI dashboard, or the widget won’t load.

---

Quick Start

Add this snippet right before the closing </body> tag:

<!-- Call Agent AI Widget -->
<link rel="stylesheet" href="https://admin.callagentai.com/widget/ai-call-widget.css">
<script src="https://admin.callagentai.com/widget/ai-call-widget.js"></script>

<div id="ai-call-widget"
  data-api-token="YOUR_API_TOKEN"
  data-assistant-id="YOUR_ASSISTANT_ID"
  data-position="bottom-right"
  data-feature-mode="both">
</div>

Replace these values

• YOUR_API_TOKEN → from Account Settings

• YOUR_ASSISTANT_ID → from your Assistant settings

---

Configuration Options

Attribute	Options	What it controls
data-api-token	Your token	Authenticates your widget
data-assistant-id	Your assistant ID	Which assistant to load
data-position	bottom-right, bottom-left, top-right, top-left	Floating widget location
data-feature-mode	both, chat_only, call_only	Chat + voice, chat only, or voice only

---

Platform Install Guides

Shopify

1. Shopify Admin → Online Store → Themes

2. Click Actions → Edit code

3. Open theme.liquid

4. Paste the embed snippet before </body>

5. Click Save

---

Wix

1. Wix Dashboard → Settings

2. Custom Code (Advanced)

3. + Add Custom Code

4. Paste the embed snippet

5. Placement: Body - end

6. Apply to: All pages

7. Click Apply

---

Squarespace

1. Squarespace → Settings → Advanced → Code Injection

2. Paste the embed snippet in Footer

3. Click Save

Note: Squarespace Code Injection requires Business or Commerce plans.

---

Webflow

Site-wide (recommended)

1. Webflow → Project Settings → Custom Code

2. Paste in Footer Code

3. Save

4. Publish

Page-only

1. Open Page → Page Settings

2. Paste into Before </body>

3. Publish

---

WordPress (Without Plugin)

Add to Theme Footer

1. WP Admin → Appearance → Theme Editor

2. Open footer.php

3. Paste before </body>

4. Update

Safer option (recommended)

Use a “headers & footers” plugin and paste the snippet into the Footer field.

---

BigCommerce

1. Admin → Storefront → Script Manager

2. Create a Script

3. Location: Footer

4. Pages: All pages

5. Paste the embed snippet

6. Save

---

GoDaddy Website Builder

1. Website editor → Settings

2. Site-wide code

3. Paste snippet in Footer

4. Publish

---

Weebly

1. Weebly → Settings → SEO

2. Paste snippet into Footer Code

3. Save and publish

---

Magento / Adobe Commerce

1. Admin → Content → Design → Configuration

2. Select Store View → Edit

3. Footer → Miscellaneous HTML

4. Paste embed snippet

5. Save and clear cache

---

Custom HTML / Static Website

Paste the embed snippet before </body> in your HTML file.

---

React / Next.js

Create a component:

import { useEffect } from "react";

export default function CallAgentWidget({ apiToken, assistantId, position="bottom-right", featureMode="both" }) {
  useEffect(() => {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://admin.callagentai.com/widget/ai-call-widget.css";
    document.head.appendChild(link);

    const script = document.createElement("script");
    script.src = "https://admin.callagentai.com/widget/ai-call-widget.js";
    document.body.appendChild(script);

    return () => {
      document.head.removeChild(link);
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div
      id="ai-call-widget"
      data-api-token={apiToken}
      data-assistant-id={assistantId}
      data-position={position}
      data-feature-mode={featureMode}
    />
  );
}

---

Vue / Nuxt

<template>
  <div
    id="ai-call-widget"
    :data-api-token="apiToken"
    :data-assistant-id="assistantId"
    :data-position="position"
    :data-feature-mode="featureMode"
  />
</template>

<script>
export default {
  props: {
    apiToken: { type: String, required: true },
    assistantId: { type: String, required: true },
    position: { type: String, default: "bottom-right" },
    featureMode: { type: String, default: "both" }
  },
  mounted() {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://admin.callagentai.com/widget/ai-call-widget.css";
    document.head.appendChild(link);

    const script = document.createElement("script");
    script.src = "https://admin.callagentai.com/widget/ai-call-widget.js";
    document.body.appendChild(script);
  }
};
</script>

---

Angular

import { Component, Input, AfterViewInit } from "@angular/core";

@Component({
  selector: "app-call-agent-widget",
  template: `
    <div
      id="ai-call-widget"
      [attr.data-api-token]="apiToken"
      [attr.data-assistant-id]="assistantId"
      [attr.data-position]="position"
      [attr.data-feature-mode]="featureMode">
    </div>
  `
})
export class CallAgentWidgetComponent implements AfterViewInit {
  @Input() apiToken!: string;
  @Input() assistantId!: string;
  @Input() position: string = "bottom-right";
  @Input() featureMode: string = "both";

  ngAfterViewInit() {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "https://admin.callagentai.com/widget/ai-call-widget.css";
    document.head.appendChild(link);

    const script = document.createElement("script");
    script.src = "https://admin.callagentai.com/widget/ai-call-widget.js";
    document.body.appendChild(script);
  }
}

---

Advanced: JavaScript Initialization

If you prefer to initialize programmatically:

<link rel="stylesheet" href="https://admin.callagentai.com/widget/ai-call-widget.css">
<script src="https://admin.callagentai.com/widget/ai-call-widget.js"></script>

<script>
  window.addEventListener("load", function () {
    AiCallWidget.init({
      apiToken: "YOUR_API_TOKEN",
      assistantId: "YOUR_ASSISTANT_ID",
      position: "bottom-right",
      featureMode: "both"
    });
  });
</script>

Methods

AiCallWidget.toggleWidget();
AiCallWidget.startChat();
AiCallWidget.startCall();
AiCallWidget.cleanup();

---

Troubleshooting

Widget Not Appearing

• Confirm the snippet is placed before </body>

• Verify API Token and Assistant ID

• Confirm your domain is listed in Allowed CORS Origins

• Check DevTools Console (F12) for errors

Voice Not Working

• HTTPS required for microphone access

• Allow mic permissions in the browser

• Use a modern browser (Chrome/Edge recommended)

Styling Conflicts

If your theme overrides styling, try:

#ai-call-widget,
#ai-call-widget * {
  box-sizing: border-box !important;
}