Embedding Your Chatbot

Step-by-step instructions for embedding your chatbot into various platforms and frameworks.

Overview

Our chatbot can be embedded into any website or web application using a simple JavaScript snippet. The widget is lightweight, responsive, and works across all modern browsers.

Basic HTML Websites

For static HTML websites, add the script tag before the closing </head> tag.

HTML Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    
    <!-- Add this before closing </head> -->
    <script async 
        data-chatbot='your-chatbot-id' 
        src='https://your-widget-url.com'>
    </script>
</head>
<body>
    <!-- Your website content -->
</body>
</html>

Replace 'your-chatbot-id' with your actual chatbot ID

React & Next.js

For React and Next.js applications, add the script to your main layout or _document.js file.

Next.js _document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script 
            async 
            data-chatbot='your-chatbot-id' 
            src='https://your-widget-url.com' 
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

React App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

// Add this to your public/index.html
// <script async data-chatbot='your-chatbot-id' src='https://your-widget-url.com'></script>

export default App;

WordPress

For WordPress sites, add the script to your theme's header.php file or use a plugin.

Method 1: Theme Header

Go to Appearance → Theme Editor
Select "header.php" from the file list
Find the </head> tag
Add the script before the closing tag
Click "Update File"

<!-- Add this in header.php before </head> -->
<script async data-chatbot='your-chatbot-id' src='https://your-widget-url.com'></script>

Method 2: Plugin (Recommended)

Use a plugin like "Insert Headers and Footers" for easier management.

Install "Insert Headers and Footers" plugin
Go to Settings → Insert Headers and Footers
Paste the script in the "Scripts in Header" section
Save changes

Advanced Configuration

Custom Positioning

You can customize the chatbot position using CSS variables.

<style>
:root {
  --chatbot-position: bottom-right; /* or bottom-left */
  --chatbot-z-index: 9999;
}
</style>
<script async data-chatbot='your-chatbot-id' src='https://your-widget-url.com'></script>

Conditional Loading

Load the chatbot only on specific pages or under certain conditions.

<script>
// Only load on specific pages
if (window.location.pathname === '/contact' || window.location.pathname === '/careers') {
  const script = document.createElement('script');
  script.async = true;
  script.src = 'https://your-widget-url.com';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  document.head.appendChild(script);
}
</script>

Testing Your Implementation

1. Check Console for Errors

Open your browser's developer tools and check the console for any JavaScript errors.

2. Verify Script Loading

Look for the chatbot script in the Network tab of developer tools to ensure it's loading properly.

3. Test Functionality

Click the chatbot button and test the form submission to ensure everything works correctly.

Troubleshooting

Chatbot not appearing

• Verify the script is placed before </head>
• Check that your chatbot ID is correct
• Ensure the script URL is accessible
• Clear your browser cache

Styling conflicts

• Check for CSS conflicts with your theme
• Ensure the chatbot script loads after your CSS
• Use CSS specificity to override styles if needed

Performance issues

• The script is lightweight and shouldn't affect performance
• Consider lazy loading for better performance
• Check for JavaScript errors in console

Platform-Specific Notes

Shopify

Add the script to your theme.liquid file in the <head> section.

Theme Editor

Squarespace

Use the Code Injection feature in Settings → Advanced.

Code Injection

Wix

Add the script using the HTML Embed element in the Wix Editor.

HTML Embed

Webflow

Add the script to the Page Settings → Custom Code section.

Custom Code