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

Widget Not Appearing

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

Widget Appears But Doesn't Work

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

Widget Loads Slowly

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.

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.