Skip to content

Initialization

Initialize the widget in your app code after the SDK is available and your target container exists.

Configuration object

init() accepts:

  • Required
  • apiKey: string
  • container: string | HTMLElement
  • Optional
  • userId?: string
  • userName?: string
  • metadata?: Record<string, unknown>
  • width?: string
  • height?: string
  • onReady?: () => void
  • onError?: (error: Error) => void
  • environment?: "test" | "production"

Example

const widget = new window.SophiWebSDK.SophiWidget();

await widget.init({
  apiKey: "YOUR_SOPHI_API_KEY",
  container: "#sophi-widget-container",
  userId: "user-123",
  userName: "Jane",
  environment: "production",
  width: "100%",
  height: "600px",
  metadata: {
    channel: "web",
    locale: "en-US",
  },
  onReady: () => {
    console.log("Sophi widget ready");
  },
  onError: (error) => {
    console.error("Sophi widget init error", error);
  },
});
  1. Ensure cookie consent is granted (if required by your policy)
  2. Ensure SDK script is loaded (or npm bundle is ready)
  3. Ensure container is mounted in DOM
  4. Call await widget.init(...)
  5. Register event listeners (on(...))

Note

Keep apiKey in your app configuration layer. Never hardcode production secrets in publicly shared examples.