# Universal Embed

### **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:

```html
<!-- 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:

```jsx
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**

```vue
<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**

```ts
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:

```html
<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

```js
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:

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://callagentai.gitbook.io/docs/account-setup/voice-and-chatbot-web-agent/universal-embed.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.