Widget SDK

Drop-in Web Components that render inside a Shadow DOM - zero CSS conflicts, framework-agnostic, and ready in a single script tag. Works with React, Vue, Angular, or plain HTML.

Install

If you use a bundler (Vite, Next.js, Webpack), install via npm:

npm install @returningai/widget-sdk

Or skip the install and load the SDK from a CDN - see the attribute auth example below.

Embed with authentication

Every widget needs to identify the user so it can display their rewards, points, and tier status. Choose an approach based on whether you have a backend available:

<script
  src="https://unpkg.com/@returningai/widget-sdk/dist/rai-widget.iife.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-widget-type="store"
  data-container="returning-ai-widget-YOUR_WIDGET_ID"
  data-api-url="YOUR_API_URL"
  data-widget-url="YOUR_WIDGET_URL"
  data-email="user@example.com"
  data-userId="USR-9a3f2b"
  data-firstname="Jane"
  data-lastname="Doe"
  data-custom-tier="gold"
></script>

<rai-store-widget
  widget-id="YOUR_WIDGET_ID"
  auth-url="/api/widget-auth"
  api-url="YOUR_API_URL"
  widget-url="YOUR_WIDGET_URL"
></rai-store-widget>

Customize

Every widget accepts HTML attributes for common options:

• theme - "light" or "dark" (default: "light")
• width / height - any CSS length value

For the full attribute reference, see the Configuration page.

Guides