For Developers/Docs

Widget installation

The PulseSupport widget is a single snippet of HTML. Once it's on your site, the chat launcher appears automatically — no build step, no framework dependency. This page covers every common platform.

Find your token: Your unique widget token is in Dashboard → Settings → Widget. Replace YOUR_WIDGET_TOKEN in every example below with that value.

The snippet

Paste this just before the closing </body> tag on every page where you want the widget to appear. All platform guides below tell you exactly where that is.

<!-- PulseSupport Widget -->
<script>
  window.PulseSupportSettings = {
    token: "YOUR_WIDGET_TOKEN",
    color: "#0F4C81",
    position: "right",
    launcherTitle: "Chat with us",
  };
</script>
<script src="https://pulsesupport.co.za/widget.js" async defer></script>

Configuration options

All settings live in the window.PulseSupportSettings object and must be set before the widget.js script tag.

KeyTypeRequiredDescription
tokenstringYesYour unique widget token from the dashboard.
colorstringNoHex colour for the launcher button. Defaults to #0F4C81.
position"right" | "left"NoWhich corner the launcher sits in. Defaults to "right".
launcherTitlestringNoTooltip text shown next to the launcher button.

WordPress

The safest approach is the free Insert Headers and Footers plugin — it survives theme updates, unlike editing footer.php directly.

  1. In your WordPress admin go to Plugins → Add New and install Insert Headers and Footers.
  2. Go to Settings → Insert Headers and Footers.
  3. Paste the snippet into the Scripts in Footer box.
  4. Click Save.

If you prefer to edit the theme directly, open Appearance → Theme File Editor, find footer.php, and paste the snippet just above </body>. Be aware that this edit will be overwritten next time the theme updates.

Next.js

Next.js has a built-in Script component that handles loading strategy for you. The cleanest place to add a global script is your root layout.

  1. Open app/layout.tsx (App Router) or pages/_document.tsx (Pages Router).
  2. Add the widget using the Next.js Script component with strategy="afterInteractive":
// app/layout.tsx  (App Router)
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* PulseSupport Widget */}
        <Script id="pulsesupport-settings" strategy="afterInteractive">
          {`window.PulseSupportSettings = {
            token: "YOUR_WIDGET_TOKEN",
            color: "#0F4C81",
            position: "right",
            launcherTitle: "Chat with us",
          };`}
        </Script>
        <Script
          src="https://pulsesupport.co.za/widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}
Why two Script tags? The settings object must be defined before widget.js runs. Splitting them into two tags with the same strategy guarantees they execute in order. Using strategy="afterInteractive" loads the widget after the page is interactive so it never blocks your core content from rendering.

For the Pages Router, add both Script tags inside the <body> of pages/_document.tsx using Next.js's Html, Head, Main, and NextScript components, just before the closing </body>.

Shopify

Before you start: Duplicate your active theme before editing any code — Shopify does not version-control theme file changes.
  1. From your Shopify admin go to Online Store → Themes.
  2. Click Actions → Edit code next to your active theme.
  3. Open Layout → theme.liquid.
  4. Find the closing </body> tag (use Ctrl+F / Cmd+F to search).
  5. Paste the snippet directly above it and click Save.

Wix

Custom code in Wix requires a paid plan (Core and above).

  1. Go to your Wix dashboard and click Settings → Custom Code.
  2. Click + Add Custom Code.
  3. Paste the snippet, set placement to Body — end, apply to All Pages.
  4. Click Apply then publish your site.

Squarespace

Code Injection is available on Business plans and above.

  1. In your Squarespace dashboard go to Website Tools → Code Injection.
  2. Paste the snippet into the Footer box.
  3. Click Save.

Webflow

Custom code only goes live after publishing — you won't see it in the Designer preview.

  1. In the Webflow Designer click the W logo → Project Settings.
  2. Go to the Custom Code tab.
  3. Paste the snippet into the Footer Code box.
  4. Click Save Changes, then publish.

Framer

Custom code requires a paid Framer plan.

  1. Open your project and click the gear icon (Site Settings).
  2. Under the General tab scroll to Custom Code.
  3. Paste the snippet into the End of <body> tag field.
  4. Save and republish.

Plain HTML

  1. Open your HTML file in a code editor.
  2. Find the closing </body> tag near the bottom of the file.
  3. Paste the snippet directly above it.
  4. Save and re-upload the file to your host via FTP or cPanel File Manager.

If your site has multiple pages, paste the snippet into each one — or into a shared layout or template file if your setup uses one.

Google Tag Manager

GTM is the best option when you don't have direct access to the site's code, regardless of what platform it runs on.

  1. In GTM click New Tag and name it PulseSupport Widget.
  2. Set tag type to Custom HTML and paste the full snippet.
  3. Under Triggering select All Pages.
  4. Click Save, then Submit to publish the container.

Verifying the install

After installing, open your site in a browser and check:

  • The chat launcher button appears in the corner you configured.
  • In your browser's DevTools console (F12), run window.PulseSupportSettings — it should return your settings object, not undefined.
  • In the Network tab, filter by widget — you should see a successful request to pulsesupport.co.za/widget.js with a 200 status.

Troubleshooting

SymptomLikely causeFix
Widget doesn't appear at allSnippet not saved, or saved to the wrong placeCheck the snippet is present in your page's HTML source (Ctrl+U / Cmd+U)
PulseSupportSettings is undefinedSettings script running after widget.jsMake sure the settings <script> block comes before the widget.js tag
Widget appears on some pages but not othersSnippet only added to one template or pageAdd the snippet to every template/layout, or use GTM with an All Pages trigger
Console error: 401 UnauthorizedInvalid or missing tokenDouble-check your token in Dashboard → Settings → Widget
Widget blocked by Content Security PolicyYour site's CSP doesn't allow external scriptsAdd https://pulsesupport.co.za to your CSP script-src and connect-src directives

Next steps