Embed Chat Widget

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

Go to Share Settings

Find the Widget Card

Copy the Code

<!-- 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>

Add to Your Website

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

Go to Share Settings

Find the Iframe Card

Copy the Code

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

Add to Your Website

Customizing the Iframe

Adjust dimensions:

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

Responsive container:

<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

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