Installing the Widget

Add the Support Station widget to your website or application with a simple code snippet. This guide covers installation for various platforms.

Getting the Embed Code

Go to Integrations > Widget
Configure your widget settings
Click Copy Code to copy the embed snippet

The code looks something like this:

<script>
  (function(w,d,s,o,f,js,fjs){
    w['SupportStation']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
  })(window,document,'script','ss','https://assets.supportstation.io/widget.js');
  ss('init', 'YOUR_WIDGET_ID');
</script>

Basic Installation

HTML Website

Add the script just before the closing </body> tag:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Support Station Widget -->
  <script>
    (function(w,d,s,o,f,js,fjs){
      w['SupportStation']=o;w[o]=w[o]||function(){
      (w[o].q=w[o].q||[]).push(arguments)};
      js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
      js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    })(window,document,'script','ss','https://assets.supportstation.io/widget.js');
    ss('init', 'YOUR_WIDGET_ID');
  </script>
</body>
</html>

Framework-Specific Installation

React

Create a component or add to your app layout:

// components/SupportWidget.jsx
import { useEffect } from 'react';

export function SupportWidget() {
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://assets.supportstation.io/widget.js';
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      window.ss('init', 'YOUR_WIDGET_ID');
    };

    return () => {
      // Cleanup if needed
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Add to your app:

// App.jsx
import { SupportWidget } from './components/SupportWidget';

function App() {
  return (
    <>
      {/* Your app content */}
      <SupportWidget />
    </>
  );
}

Next.js

Add to your layout or use a Script component:

// app/layout.jsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script id="support-station-widget" strategy="afterInteractive">
          {`
            (function(w,d,s,o,f,js,fjs){
              w['SupportStation']=o;w[o]=w[o]||function(){
              (w[o].q=w[o].q||[]).push(arguments)};
              js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
              js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
            })(window,document,'script','ss','https://assets.supportstation.io/widget.js');
            ss('init', 'YOUR_WIDGET_ID');
          `}
        </Script>
      </body>
    </html>
  );
}

Vue

Add to your main App.vue or create a component:

<!-- App.vue -->
<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://assets.supportstation.io/widget.js';
  script.async = true;
  document.body.appendChild(script);

  script.onload = () => {
    window.ss('init', 'YOUR_WIDGET_ID');
  };
});
</script>

WordPress

Add via theme or plugin:

Option 1: Theme Functions

Add to your theme's functions.php:

function add_support_station_widget() {
    ?>
    <script>
      (function(w,d,s,o,f,js,fjs){
        w['SupportStation']=o;w[o]=w[o]||function(){
        (w[o].q=w[o].q||[]).push(arguments)};
        js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
        js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
      })(window,document,'script','ss','https://assets.supportstation.io/widget.js');
      ss('init', 'YOUR_WIDGET_ID');
    </script>
    <?php
}
add_action('wp_footer', 'add_support_station_widget');

Option 2: Plugin

Use a "custom code" plugin to add the script to your footer.

Webflow

Go to Project Settings > Custom Code
Paste the widget code in the Footer Code section
Publish your site

Squarespace

Go to Settings > Advanced > Code Injection
Paste the widget code in the Footer section
Save changes

Shopify

Go to Online Store > Themes
Click Actions > Edit Code
Find theme.liquid
Paste the code before </body>
Save

Verifying Installation

After installing:

Visit your website
Look for the widget button (usually bottom-right)
Click to open and test
Submit a test message or ask the AI a question

Troubleshooting

Check the console:

Open browser developer tools (F12)
Look for errors in the Console tab
Common issues:
- Script blocked by ad blocker
- Invalid widget ID
- JavaScript error preventing load

Verify installation:

View page source
Search for "supportstation"
Confirm script is present

Check network requests:

Open developer tools > Network tab
Look for failed requests to supportstation.io
Check for CORS or firewall issues

Verify widget ID:

Compare your widget ID with the one in Support Station settings
Ensure no typos or extra characters

The widget loads asynchronously and shouldn't block your page. If it seems slow:

Check your overall page load time
Widget depends on network connection
AI responses require server communication

Advanced Installation Options

Passing User Data

Pre-fill user information if you know who's logged in by adding query parameters to your page URL:

https://yoursite.com?email=customer@example.com&name=John+Doe

The widget will automatically detect and use this information when a customer opens it.

Customizing Z-Index

By default, the widget uses the maximum z-index (2147483647). If this conflicts with other elements on your page, set a custom value:

window.SupportStation = {
  orgSlug: 'your-org-slug',
  zIndex: 9999
};

You can also change it at runtime:

SupportStationWidget.setZIndex(9999);

Identity Verification (HMAC)

Identity verification is optional. A valid HMAC signature marks a ticket as verified. Customers can still submit tickets without a signature, even when your organization has configured a signing key.

Unsigned submissions and activity updates match customers by email. They cannot change an existing customer's delivery address or external user ID. A submitted external ID is kept in customer metadata as unverifiedExternalUserId. Verified submissions and staff or authenticated API updates can still link an external user ID and update its email address.

Key points:

Include a valid signature at ticket submission time to get a "Verified" status
With a signing key configured, missing signatures are "Unverified" and invalid signatures are "Failed"
Enable this feature in Integrations > Widget > Identity Verification

For full implementation details including code examples, see the Embed API documentation.