Framework Guides

The Widget SDK uses standard Web Components that work in any modern framework. Import the package once and use the custom element tags directly in your templates. Below are guides for the most popular frameworks - Svelte, Solid, and other frameworks that support custom elements work the same way.

React

React 19+ renders custom elements natively. JSX type definitions are included with the SDK so you get full autocompletion and type-checking out of the box. Simply import the package at your app's entry point (or in the component that uses the widget) and use the tag directly.

import '@returningai/widget-sdk'

export function ChannelEmbed({ email }: { email: string }) {
  return (
    <rai-channel-widget
      widget-id="YOUR_WIDGET_ID"
      widget-type="channel"
      theme="dark"
      data-email={email}
      api-url="YOUR_API_URL"
      widget-url="YOUR_WIDGET_URL"
    />
  )
}

Vue

Vue treats unknown tags as custom elements automatically when they contain a hyphen. Import the SDK in your component's <script setup> block and bind attributes with the standard : prefix.

<script setup>
import '@returningai/widget-sdk'
</script>

<template>
  <rai-channel-widget
    widget-id="YOUR_WIDGET_ID"
    theme="dark"
    :data-email="user.email"
    api-url="YOUR_API_URL"
    widget-url="YOUR_WIDGET_URL"
  />
</template>

Angular

Angular requires you to opt into custom elements by adding CUSTOM_ELEMENTS_SCHEMA to your module (or standalone component) configuration. Import the SDK in your module file so the elements are registered before Angular bootstraps the template.

import '@returningai/widget-sdk'
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })

Then use the widget tag in your template. Use [attr.data-email] for dynamic attribute binding:

<rai-channel-widget
  widget-id="YOUR_WIDGET_ID"
  theme="dark"
  [attr.data-email]="user.email"
  api-url="YOUR_API_URL"
  widget-url="YOUR_WIDGET_URL"
></rai-channel-widget>