Presentation

# 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`

```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`

```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`

```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.