Embedding the Universal Chat Widget

You can embed a conversational AI widget directly on your website (such as a customer portal, Webflow landing page, or WordPress blog) to allow users to interact with your workspace agents.

---

Embed Snippet

To initialize the widget, place the following script tag and configuration script before the closing </body> tag of your site:

<!-- Host container for inline mode (optional) -->
<div id="septra-chat-container"></div>

<!-- Initialize script -->
<script src="https://septra.ai/widget/septra-chat-widget.iife.js"></script>
<script>
  window.addEventListener('DOMContentLoaded', () => {
    if (window.SeptraChat) {
      window.SeptraChat.mount({
        agentId: "YOUR_AGENT_ID",
        apiUrl: "https://api.septra.ai/production",
        mode: "inline", // Options: 'inline' or 'popup'
        target: "#septra-chat-container", // Container selector for inline mode
        title: "Assistant",
        subtitle: "Powered by AI",
        welcomeMessage: "Hello! How can I help you today?",
        theme: {
          primaryColor: "#f06a28" // Customize to match your brand color
        }
      });
    }
  });
</script>

---

Configuration Properties

The mount() function accepts an configuration object with the following properties:

| Property | Type | Required | Description |

|---|---|---|---|

| agentId | string | Yes | The unique identifier of your deployed workspace agent. |

| apiUrl | string | Yes | The base gateway URL for executing queries. |

| mode | 'inline' \| 'popup' | No | Render style. inline places the widget inside a target container. popup adds a floating chat bubble to the bottom right. |

| target | string | No | CSS selector for the host container (required for inline mode). |

| title | string | No | Title displayed in the chat header (default: "Assistant"). |

| subtitle | string | No | Subtitle displayed in the chat header. |

| welcomeMessage | string | No | The initial message shown to visitors when opening the chat. |

| theme.primaryColor | string | No | Hex color code used for headers, buttons, and user message bubbles. |

---

CSS Encapsulation (Shadow DOM)

To prevent your site's styles from bleeding into the widget, the widget is built as a Web Component utilizing Shadow DOM.

This isolates all widget styling, ensuring that:

• Global CSS rules on your website (e.g. from Bootstrap, Tailwind, or WordPress themes) do not break the chat layout.
• Custom font-families and reset rules on your site do not overflow inside the conversation bubbles.
• If you want to apply custom CSS overrides, you must pass them via the initialization config or target host classes explicitly.