Script Tag & Web Component

For hosts with no React app and no bundler — WordPress, Shopify, static HTML — load a single self-contained script and either drop in a custom element or call an imperative API.

Overview

@chatterfly/widget publishes a second build alongside the npm/ESM/CJS entry: a self-contained IIFE bundle with React and ReactDOM already included. Both this embed and the React import render the exact same ChatterflyWidget component — there is no separate implementation to keep in sync.

<chatterfly-widget> element

html

<script src="https://cdn.jsdelivr.net/npm/@chatterfly/widget/dist/embed.global.js"></script>
<chatterfly-widget
  workflow-id="wf_abc123"
  api-base="https://api.chatterfly.ai"
  mode="inline"
></chatterfly-widget>

Supported attributes:

Attribute	Maps to
workflow-id	workflowId
deployment-id	deploymentId
run-id	runId
participant-token	participantToken
api-base	apiBase (required)
mode	"inline" \| "floating"
position	"bottom-right" \| "bottom-left"
color-scheme	"light" \| "dark" \| "auto"
auto-focus-input	presence = true

Note: Attribute values are strings only. For callbacks, the theme object, or slot content, use the imperative API from a <script> block instead.

Imperative API

html

<script src="https://cdn.jsdelivr.net/npm/@chatterfly/widget/dist/embed.global.js"></script>
<div id="chat"></div>
<script>
  Chatterfly.mount(document.getElementById("chat"), {
    workflowId: "wf_abc123",
    apiBase: "https://api.chatterfly.ai",
    onCompleted: (output) => console.log("done", output),
  });

  // Later, to tear down:
  // Chatterfly.unmount(document.getElementById("chat"));
</script>

Styles

The stylesheet is injected automatically — the script derives its own <script src> URL and appends a <link rel="stylesheet"> for the sibling CSS file. No separate style.css import step is needed for this path.

Isolation notes

This embed intentionally does notuse Shadow DOM. It relies on the same scoped CSS Modules class names the React import path already uses for isolation — the widget's styles will not leak into your page, and your page's styles will not affect the widget.