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)

For secure user identification, you can enable identity verification which requires an HMAC signature. This prevents customers from impersonating other users and marks tickets with a verification status.

Key points:

The signature must be included in your widget configuration at ticket submission time
Without a valid signature, tickets will be marked as "Unverified"
Enable this feature in Integrations > Widget > Identity Verification

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