Iframe Widget Types

Embed any Returning.AI widget type as an iframe. Each type has its own URL pattern and recommended sizing.

URL Pattern

All widget types follow the same URL pattern:

https://prod-widgets.returning.ai/{type}/{widget_id}

Replace {type} with one of: store, channel, milestone, social, currency, or minigames.

All widget types support both attribute authentication and token authentication. See the Auth - Attribute and Auth - Token guides for details.

Store

Rewards marketplace where users browse and redeem loyalty currency for products, vouchers, and experiences.

Recommended height: 700px

Best at 700px+ height to show product cards without excessive scrolling.

store-widget.html

<iframe
  src="https://prod-widgets.returning.ai/store/YOUR_WIDGET_ID"
  allow="clipboard-write"
  id="returningAiStoreWidget"
  frameborder="0"
  style="width: 100%; height: 700px; border: none;"
></iframe>

Channel

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

Recommended height: 600px

The default 600px height works well for most layouts.

channel-widget.html

<iframe
  src="https://prod-widgets.returning.ai/channel/YOUR_WIDGET_ID"
  allow="clipboard-write"
  id="returningAiChannelWidget"
  frameborder="0"
  style="width: 100%; height: 600px; border: none;"
></iframe>

Milestone

Progress tracker showing achievement stages and unlock rewards.

Recommended height: 500px

Can be shorter (500px) since milestones are typically a vertical timeline.

milestone-widget.html

<iframe
  src="https://prod-widgets.returning.ai/milestone/YOUR_WIDGET_ID"
  allow="clipboard-write"
  id="returningAiMilestoneWidget"
  frameborder="0"
  style="width: 100%; height: 500px; border: none;"
></iframe>

Social media task board where users complete platform-specific engagement tasks.

Recommended height: 600px

600px is ideal for displaying a list of social tasks.

social-widget.html

<iframe
  src="https://prod-widgets.returning.ai/social/YOUR_WIDGET_ID"
  allow="clipboard-write"
  id="returningAiSocialWidget"
  frameborder="0"
  style="width: 100%; height: 600px; border: none;"
></iframe>

Currency

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

Recommended height: 400px

Compact widget - 400px is usually sufficient. Works well in sidebars.

currency-widget.html

<iframe
  src="https://prod-widgets.returning.ai/currency/YOUR_WIDGET_ID"
  allow="clipboard-write"
  id="returningAiCurrencyWidget"
  frameborder="0"
  style="width: 100%; height: 400px; border: none;"
></iframe>

Mini Games

Interactive games like spin-the-wheel and scratch cards for engagement.

Recommended height: 600px

Needs enough height for the game UI. 600px recommended minimum.

minigames-widget.html

<iframe
  src="https://prod-widgets.returning.ai/minigames/YOUR_WIDGET_ID"
  allow="clipboard-write"
  id="returningAiMinigamesWidget"
  frameborder="0"
  style="width: 100%; height: 600px; border: none;"
></iframe>

Sizing Summary

Widget	Recommended Height	Notes
Store	700px	Best at 700px+ height to show product cards without excessive scrolling.
Channel	600px	The default 600px height works well for most layouts.
Milestone	500px	Can be shorter (500px) since milestones are typically a vertical timeline.
Social	600px	600px is ideal for displaying a list of social tasks.
Currency	400px	Compact widget - 400px is usually sufficient. Works well in sidebars.
Mini Games	600px	Needs enough height for the game UI. 600px recommended minimum.

All widgets should use width: 100% and be placed inside a container that controls the max width. The widget content is responsive and will adapt to the available space.