Installation Guide

Get your live chat running in minutes with our simple installation guide and security best practices.

1. Standard Installation

To install the live chat widget on your website, copy and paste the following code snippet just before the closing </body> tag on every page where you want the chat to appear.

Important: Please check the Website Scripts / Install to Website section in your Admin Dashboard for the most up-to-date code pre-configured for your account. 
<!-- Start IMsupporting Live Chat -->
<script type="text/javascript" data-cfasync="false">
    window.imsupportingPopover = window.imsupportingPopover || function() {
        (window.imsupportingPopover.q = window.imsupportingPopover.q || []).push(arguments);
    };

    (function() {
        var doc = document;
        var head = doc.getElementsByTagName("head")[0];
        var cacheBuster = Date.now(); 
        var baseUrl = "https://cw.imsupporting.com/popover_assets/";

        var link = doc.createElement("link");
        link.rel = "stylesheet";
        link.href = baseUrl + "css/chatwidget.css?v=" + cacheBuster;
        link.type = "text/css";
        link.id = "IMSChatWidgetCSS";
        head.appendChild(link);

        var script = doc.createElement('script');
        script.src = baseUrl + "js/chatwidget.js?v=" + cacheBuster;
        script.async = true;
        head.appendChild(script);
    })();

    imsupportingPopover({
        "IMSsiteid": "YOUR_SITE_ID",  // Replace with your Site ID
        "IMSurl": "https://cw.imsupporting.com",
        "text": "Live Chat",
        "widgetType": "popover" 
    });
</script>
<!-- End IMsupporting Live Chat -->

2. Server & Security Requirements (CSP)

If your website uses a Content Security Policy (CSP) header to secure your application, you must whitelist our domain to allow the chat widget to load and function correctly.

Critical Security Settings

Please update your server headers to allow the following:

  • CSP Whitelist: Allow *.imsupporting.com (including subdomains) for:
    • script-src (To load the JavaScript)
    • frame-src (To load the chat window Iframe)
    • connect-src (For API connectivity)
    • img-src (For Avatars and Icons)
    • worker-src (Must allow blob: for background connectivity workers)
  • Cookies / Storage: The widget requires localStorage access to maintain chat sessions between page loads.
  • Framing: Do not set X-Frame-Options: DENY. Use CSP frame-ancestors instead if restricting embedding.

Why do we need blob: in worker-src?

Modern browsers throttle background tabs to save battery. To ensure you never miss a chat message while browsing other tabs, we use a lightweight "Web Worker" that runs in the background. This worker is created dynamically from the main script, which requires blob: permission in your CSP to function.