InsiteChat Widget Integration Guide

Quick Start

Adding InsiteChat to your website is as simple as copying and pasting a single line of code. Our widget is lightweight, responsive, and customizable to match your website's look and feel.

Step 1: Configure Your Widget

Visit the Widget Generator page to customize the appearance of your widget and generate the installation code.

Step 2: Add the Script to Your Website

Copy the generated script tag and paste it into your website's HTML, just before the closing</body> tag:

<script 
  src="https://InsiteChat/widget-loader.js"
  data-domain="yourdomain.com"
  data-position="right"
  data-color="#4f46e5"
  data-label="Chat with InsiteChat"
  data-welcome="Hello! I'm InsiteChat. How can I help you today?">
</script>

Configuration Options

You can customize your widget using the following data attributes:

Installation in Different Platforms

WordPress

You can add the widget code to your WordPress site in a few ways:

1. Using a Header & Footer plugin: Install a plugin like "Insert Headers and Footers" and add the widget script to the footer section.
2. Editing your theme's footer.php: Add the widget script just before the closing </body> tag in your theme's footer.php file.

Shopify

To add the widget to your Shopify store:

1. Go to your Shopify admin panel
2. Navigate to Online Store > Themes
3. Click "Actions" on your current theme and select "Edit code"
4. Find and open the "theme.liquid" file
5. Add the widget script just before the closing </body> tag
6. Save the changes

Wix

To add the widget to your Wix site:

1. Go to your Wix dashboard
2. Click on "Settings" in the left sidebar
3. Select "Custom Code"
4. Click "Add Custom Code"
5. Give it a name like "InsiteChat Widget"
6. Paste the widget script
7. Select "Load code on each new page" and "Body - end"
8. Click "Apply"

React Applications

For React applications, you can use our React component:

// Install the package
npm install @insitechat/widget

// Import in your React component
import InsiteChatWidget from '@insitechat/widget';

// Use in your component
function YourComponent() {
  return (
    <div>
      {/* Your app content */}
      <InsiteChatWidget
        domain="yourdomain.com"
        position="right"
        primaryColor="#4f46e5"
        widgetLabel="Chat with InsiteChat"
        welcomeMessage="Hello! I'm InsiteChat. How can I help you today?"
      />
    </div>
  );
}

Customizing the Widget

Beyond the basic configuration options, you can further customize the widget appearance through our dashboard. Log in to your account, select your website, and update the widget settings from there.

Troubleshooting

Widget Doesn't Appear

If the widget doesn't appear on your website, check the following:

• Make sure the script is loaded correctly (check browser console for errors)
• Verify that your domain is properly set up in our system
• Check if your website has a Content Security Policy (CSP) that blocks external scripts

Widget Styling Issues

If the widget doesn't look right on your site:

• Your website might have CSS that conflicts with the widget. Try adjusting the z-index in your widget configuration
• For mobile display issues, make sure your website has a proper viewport meta tag

Need Help?

If you need assistance integrating the InsiteChat widget, please contact our support team at [email protected].