Widget Embedding

Add SupportFlow to your app for in-app support, KB search, and AI chat.

What ships today: the iframe embed below works right now — no package to install and nothing to host. A one-line script-tag loader (<script src="…/widget.js">) and a dedicated @supportflow/react package are on the roadmap; until they ship, use the iframe embed for any app and the component approach for React apps.

Iframe embed (any app)

Your support portal is hosted at https://your-app-slug.getsupportflow.com. The simplest integration is to embed it — inline on a help page, or as a floating panel toggled by your own button.

Inline embed

Inline support portalhtml

<iframe
  src="https://your-app-slug.getsupportflow.com"
  title="Support"
  style="width: 100%; height: 640px; border: 0; border-radius: 12px;"
></iframe>

Floating launcher

A self-contained button + panel. No external script — just this markup and a few lines of your own JavaScript.

Floating support launcherhtml

<!-- Add before closing </body> tag -->
<button id="sf-launcher" aria-label="Open support"
  style="position:fixed;bottom:24px;right:24px;z-index:9998;
         width:56px;height:56px;border-radius:9999px;border:0;
         background:#3b82f6;color:#fff;font-size:22px;cursor:pointer;">?</button>

<iframe id="sf-panel" title="Support"
  src="https://your-app-slug.getsupportflow.com"
  style="position:fixed;bottom:92px;right:24px;z-index:9999;display:none;
         width:380px;height:600px;max-width:calc(100vw - 32px);
         border:0;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);"></iframe>

<script>
  var btn = document.getElementById('sf-launcher');
  var panel = document.getElementById('sf-panel');
  btn.addEventListener('click', function () {
    panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  });
</script>

Passing the signed-in user

To pre-authenticate the user (so they see their own tickets), append a signed JWT as the token query parameter. See the JWT integration guide for how to mint it.

Authenticated embedjavascript

const src = 'https://your-app-slug.getsupportflow.com'
  + '?token=' + encodeURIComponent(userSupportToken)

document.getElementById('sf-panel').src = src

React / Next.js

A dedicated @supportflow/react package is coming. Until it ships, wrap the iframe in a small client component you control — this keeps SSR frameworks happy and lets you toggle the panel from your own UI.

components/SupportLauncher.tsxtsx

'use client'

import { useState } from 'react'

const PORTAL_URL = 'https://your-app-slug.getsupportflow.com'

export function SupportLauncher({ token }: { token?: string }) {
  const [open, setOpen] = useState(false)
  const src = token ? `${PORTAL_URL}?token=${encodeURIComponent(token)}` : PORTAL_URL

  return (
    <>
      <button
        onClick={() => setOpen((v) => !v)}
        aria-label="Open support"
        style={{ position: 'fixed', bottom: 24, right: 24, zIndex: 9998 }}
      >
        Need help?
      </button>

      {open && (
        <iframe
          title="Support"
          src={src}
          style={{
            position: 'fixed', bottom: 92, right: 24, zIndex: 9999,
            width: 380, height: 600, border: 0, borderRadius: 12,
          }}
        />
      )}
    </>
  )
}

Coming soon: script-tag loader

We're building a universal one-line loader that mounts the widget and exposes a small imperative API. It is not available yet — please use the iframe embed above in the meantime.

Planned (not live)html

<!-- Not available yet — tracked for a fast-follow release -->
<script src="https://app.getsupportflow.com/widget.js" async></script>
<script>
  SupportFlow.init({ appId: 'your-app-slug', token: 'jwt-token' })
</script>