Widget Types

Returning.AI provides seven widget types, each designed for a specific aspect of the loyalty experience. Every widget can be embedded using the SDK or the embed script.

Available Types

Store

Rewards marketplace where users spend loyalty currency on products, vouchers, and experiences.

store

SDK tag	`<rai-store-widget>`
Bundle URL	`https://prod-widgets.returning.ai/store-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/store-widget`

Channel

Community hub with missions, quests, social tasks, and engagement activities.

channel

SDK tag	`<rai-channel-widget>`
Bundle URL	`https://prod-widgets.returning.ai/channel-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/channel-widget`

Milestone

Progress tracker showing achievement stages and unlock rewards.

milestone

SDK tag	`<rai-milestone-widget>`
Bundle URL	`https://prod-widgets.returning.ai/milestone-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/milestone-widget`

Currency

Loyalty points display showing balance, transaction history, and earning opportunities.

currency-view

SDK tag	`<rai-currency-widget>`
Bundle URL	`https://prod-widgets.returning.ai/currency-view-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/currency-view-widget`

Referral

Referral program widget for invite links, referral rewards, and sharing.

referral-conditions

SDK tag	`<rai-referral-widget>`
Bundle URL	`https://prod-widgets.returning.ai/referral-conditions-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/referral-conditions-widget`

Custom

Flexible widget configured via the admin panel. Uses widget-id (base64 CustomWidget _id) instead of community-id to select the custom widget.

custom

SDK tag	`<rai-custom-widget>`
Bundle URL	`https://prod-widgets.returning.ai/custom-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/custom-widget`

Deprecated: The <rai-widget> tag is a deprecated alias for <rai-store-widget>. Use the specific widget tag instead.

Custom widgets use widget-id instead of community-id to select the custom widget configuration from the admin panel.

custom-widget.html

<rai-custom-widget
  widget-id="BASE64_ENCODED_WIDGET_ID"
  embed-token="TOKEN_FROM_YOUR_SERVER"
  bundle-url="https://prod-widgets.returning.ai/custom-widget/bundle/widget.js"
  theme="dark"
  width="100%"
  height="600px"
></rai-custom-widget>

Customization

Every widget type supports theming and customization. You can control the visual appearance using the theme attribute, locale via the locale attribute, and dimensions with width and height.

example.html

<!-- SDK: themed dark with custom dimensions -->
<rai-channel-widget
  community-id="YOUR_COMMUNITY_ID"
  theme="dark"
  width="100%"
  height="700px"
  locale="en"
  embed-token="TOKEN_FROM_YOUR_SERVER"
></rai-channel-widget>

<!-- Embed Script: set data-theme attribute -->
<script
  src="https://prod-widgets.returning.ai/widget-loader.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-widget-type="custom"
  data-container="returning-ai-widget-YOUR_WIDGET_ID"
  data-theme="dark"
  data-width="100%"
  data-height="700px"
  data-api-url="https://prod-widgets.returning.ai"
  data-widget-url="https://prod-widgets.returning.ai/custom-widget"
></script>

SDK tag	`<rai-social-widget>`
Bundle URL	`https://prod-widgets.returning.ai/social-widget/bundle/widget.js`
Iframe URL	`https://prod-widgets.returning.ai/social-widget`