# Embed Chat Widget

Add your AI chatbot to any website with a floating chat bubble or iframe embed.


Add your Chipp AI chatbot to any website using either a floating chat bubble widget or an embedded iframe. Choose the option that best fits your site's design.

## Embed Options

| Option | Best For |
|--------|----------|
| **Chat Widget** | Floating bubble in corner, doesn't take page space |
| **Iframe** | Dedicated chat section embedded in your page |

## Option 1: Chat Widget (Floating Bubble)

The chat widget adds a floating chat bubble to the corner of your page. When clicked, it opens your chatbot in an overlay.

### Getting the Widget Code

<Steps>
  <Step title="1">
    <strong>Go to Share Settings</strong>

    Open your app and click **Share** in the navigation.
  </Step>

  <Step title="2">
    <strong>Find the Widget Card</strong>

    Look for the **Widget** card on the Share page.
  </Step>

  <Step title="3">
    <strong>Copy the Code</strong>

    Click the code snippet to copy it to your clipboard. The code looks like:

    ```html
    <!-- Chipp Chat Widget -->
    <script>
      window.CHIPP_APP_URL = "https://your-app.chipp.ai";
      window.CHIPP_APP_ID = 12345;
    </script>

    <link rel="stylesheet" href="https://storage.googleapis.com/.../bundle.css" />

    <script defer src="https://storage.googleapis.com/.../bundle.js"></script>
    ```
  </Step>

  <Step title="4">
    <strong>Add to Your Website</strong>

    Paste the code before the closing `</body>` tag on your website.
  </Step>
</Steps>

### Widget Features

- **Floating bubble**: Appears in the corner of the screen
- **Preview message**: Shows a teaser message to encourage interaction
- **Overlay chat**: Opens full chat interface when clicked
- **Responsive**: Works on desktop and mobile

## Option 2: Iframe Embed

The iframe embeds your chatbot directly into your page layout.

### Getting the Iframe Code

<Steps>
  <Step title="1">
    <strong>Go to Share Settings</strong>

    Open your app and click **Share** in the navigation.
  </Step>

  <Step title="2">
    <strong>Find the Iframe Card</strong>

    Look for the **Iframe** card on the Share page.
  </Step>

  <Step title="3">
    <strong>Copy the Code</strong>

    Click the code snippet to copy it:

    ```html
    <iframe src="https://your-app.chipp.ai" height="800px" width="100%" frameborder="0" title="Your App Name"></iframe>
    ```
  </Step>

  <Step title="4">
    <strong>Add to Your Website</strong>

    Paste the iframe code into your website's HTML where you want the chat to appear.
  </Step>
</Steps>

### Customizing the Iframe

**Adjust dimensions:**

```html
<iframe
  src="https://your-app.chipp.ai"
  height="600px"
  width="400px"
  frameborder="0"
  title="Chat"
></iframe>
```

**Responsive container:**

```html
<div style="width: 100%; height: 80vh; min-height: 400px;">
  <iframe
    src="https://your-app.chipp.ai"
    style="width: 100%; height: 100%; border: none;"
  ></iframe>
</div>
```

## Platform-Specific Instructions

### WordPress

**For Widget:**
1. Go to **Appearance** > **Theme Editor** (or use a plugin like "Insert Headers and Footers")
2. Add the widget code before `</body>` in your theme's footer

**For Iframe:**
1. Edit your page or post
2. Add a **Custom HTML** block
3. Paste the iframe code

### Webflow

1. Go to **Project Settings** > **Custom Code**
2. For widget: Paste in "Footer Code"
3. For iframe: Add an **Embed** element to your page

### Squarespace

**For Widget:**
1. Go to **Settings** > **Advanced** > **Code Injection**
2. Paste in the "Footer" section

**For Iframe:**
1. Add a **Code Block** to your page
2. Paste the iframe code

### Shopify

**For Widget:**
1. Go to **Online Store** > **Themes** > **Edit code**
2. Find `theme.liquid` and paste before `</body>`

**For Iframe:**
1. Edit the page where you want the chat
2. Add a **Custom Liquid** section
3. Paste the iframe code

## Authentication Considerations

<Callout type="warning">
If authentication is enabled for your app and you don't have a custom domain set up, the iframe embed won't work properly due to cross-domain cookie restrictions. You'll need to either:

- Set up a custom domain that's a subdomain of your website
- Disable authentication for your app

The chat widget has the same limitation when authentication is enabled.
</Callout>

You can configure these settings in:
- **Settings** page for custom domains
- **Access** page for authentication settings

## Troubleshooting

### Widget Not Appearing

1. **Check code placement**: Widget code should be before `</body>`
2. **Check for conflicts**: Other scripts may interfere - check browser console
3. **Check app status**: Ensure your app is active

### Iframe Not Loading

1. **Check the URL**: Make sure the iframe `src` matches your app's URL exactly
2. **Authentication**: If you have auth enabled, you need a custom domain
3. **CSP headers**: Your site's Content Security Policy may block iframes

### Styling Issues

1. **Z-index conflicts**: Widget may appear behind other elements
2. **Container overflow**: For iframe, make sure parent elements don't have `overflow: hidden`