Theming

Start with the appearance configured for the widget, then override only the host-page values your product needs.

Theme

Omit theme to use the widget's configured default. Set light or dark when the host page must force a theme.

index.html

<rai-custom-widget
  widget-id="YOUR_WIDGET_ID"
  bundle-url="https://prod-widgets.returning.ai/custom-widget/bundle/milestones/widget.js"
  embed-token="TOKEN_FROM_YOUR_SERVER"
  theme="dark"
  language="fr-FR"
  width="100%"
  height="auto"
></rai-custom-widget>

Width and height

Use width="100%" for responsive layouts. Use height="auto" with custom bundles so the host page owns vertical scrolling.

rewards.html

<section class="rewards-page">
  <rai-custom-widget
    widget-id="YOUR_WIDGET_ID"
    bundle-url="YOUR_BUNDLE_URL"
    embed-token="TOKEN_FROM_YOUR_SERVER"
    width="100%"
    height="auto"
  ></rai-custom-widget>
</section>

Prevent layout overflow

Place the element inside a container that can shrink, and set min-width: 0 when it sits inside a flex or grid layout.

Language

Set a supported language tag such as fr-FR. The SDK normalizes regional tags. The older locale attribute remains a compatibility alias.

Host-page CSS

Custom bundles render in the page DOM, so broad site selectors can affect widget content. Scope your application CSS and avoid element-wide rules such as button { ... } around the widget.

rewards.css

.rewards-page rai-custom-widget {
  display: block;
  width: 100%;
  min-width: 0;
}

.rewards-page .rai-widget-root {
  font-family: inherit;
}

Configured widget design

Colors, spacing, screens, and behavior inside each experience come from its supplied bundle and Returning.AI configuration. Ask Returning.AI to change the configured experience rather than replacing bundle styles from the host page.