Chat Widget

Embed the Paysio support chat on any website.

The Paysio chat widget lets your visitors start conversations with your team (or AI agent) right from your website. You reply from the Paysio inbox. The widget runs entirely in the browser and only needs your workspace ID — no API key is exposed.

How it works

Drop the snippet below into the <head> or before </body> on every page where you want the widget.
The script mounts a small floating bubble in the corner. Clicking it opens the chat panel.
Visitor messages land in your Paysio inbox in real time. Your replies stream back to the widget over WebSockets.
Appearance, position, office hours, AI agent, and disabled pages are configured in Settings → Support Chats — no code changes needed.

Install

Add the snippet

Open Settings → Support Chats and scroll to Install on your website. Copy the snippet (the workspace ID is filled in for you) and paste it on every page where the widget should appear — or use the template below and replace YOUR_WORKSPACE_ID with the UUID shown there.

HTML

<script>
  window.PaysioChat = { workspaceId: "YOUR_WORKSPACE_ID" };
</script>
<script src="https://paysio.com/chat.js" async></script>

The workspace ID is a UUID like a1b2c3d4-... — not the slug in the URL. The widget picks up your configured colors, position, logo, and team avatars automatically.

Set your options

Set these on window.PaysioChat before chat.js loads.

workspaceIdstringrequired: Your Paysio workspace ID.
hideLauncherboolean: Hide the floating bubble. The widget only opens when you call PaysioChat.open().
customerIdstring: Link the visitor to a Paysio customer ID so chat history follows them across domains.

You can also pass options as data-* attributes on the script tag — useful for static sites or CMS templates:

HTML

<script
  src="https://paysio.com/chat.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  data-hide-launcher="true"
  async
></script>

Programmatic API

After chat.js loads, window.PaysioChat exposes these methods. Use them to wire up your own buttons (e.g. a “Contact support” CTA in your nav, or a help link in your checkout).

PaysioChat.open(): Open the chat panel.
PaysioChat.close(): Close the chat panel.
PaysioChat.toggle(): Toggle open / close.
PaysioChat.isOpen(): Returns true if the panel is currently open.
PaysioChat.on(event, fn): Listen for "ready", "open", or "close".

Custom “Contact support” button

Hide the floating bubble with hideLauncher: true and trigger the chat from your own UI. The widget panel still uses your configured colors and styling — it's the launcher you control.

HTML

<button id="contact-support">Contact support</button>

<script>
  window.PaysioChat = {
    workspaceId: "YOUR_WORKSPACE_ID",
    hideLauncher: true,   // hide the floating bubble
  };
</script>
<script src="https://paysio.com/chat.js" async></script>

<script>
  document.getElementById("contact-support").addEventListener("click", () => {
    PaysioChat.open();
  });
</script>

React / SPA usage

In a single-page app, load the script once on mount. The widget persists across client-side route changes.

SupportChat.jsx

JavaScript

import { useEffect } from 'react';

export function SupportChat() {
  useEffect(() => {
    window.PaysioChat = { workspaceId: 'YOUR_WORKSPACE_ID', hideLauncher: true };
    const s = document.createElement('script');
    s.src = 'https://paysio.com/chat.js';
    s.async = true;
    document.body.appendChild(s);
    return () => { s.remove(); };
  }, []);

  return (
    <button onClick={() => window.PaysioChat?.open()}>
      Contact support
    </button>
  );
}

Listen for events

Track when visitors open or close the chat — useful for analytics or to dim other UI while the chat is in focus.

JavaScript

PaysioChat.on("ready", () => console.log("Chat is ready"));
PaysioChat.on("open",  () => console.log("Chat opened"));
PaysioChat.on("close", () => console.log("Chat closed"));

Linking conversations across domains

If the visitor is signed into your app and you already have their Paysio customerId, pass it through and their chat history follows them between your storefront, customer portal, and any other site running the widget.

JavaScript

window.PaysioChat = {
  workspaceId: "YOUR_WORKSPACE_ID",
  customerId: "cus_abc123",   // optional — links chat history to a Paysio customer
};

Notes and limits

The widget only needs a workspace ID. No API key is exposed on the client.
The iframe is rendered with z-index: 2147483647 so it sits above your content. If you have higher-priority overlays, raise their z-index above #paysio-chat-iframe.
The widget auto-hides on pages disabled in Settings → Support Chats → Hidden on pages.
All chat traffic is served over HTTPS through paysio.com.
Methods called before chat.js finishes loading are safe — the panel opens as soon as the iframe is ready.