Customization¶

Localization (language and direction)¶

The widget supports multiple languages and automatically handles text direction (LTR/RTL).

Set data-locale on the widget script:

<script
  src="https://cdn.traveln.ai/widget/v1/traveln-widget.js"
  data-tenant="partnerdemo"
  data-token-url="/api/traveln/sso/"
  data-locale="ar"
></script>

Supported locales:

• en (default, LTR)
• ar (RTL)

Theme overrides (safe, client-side)¶

The loader supports a small set of safe overrides via script attributes:

• data-widget-submit (CTA text)
• data-widget-input (input placeholder)
• theme-widget-submit-bg (CTA background color)
• theme-widget-submit-text (CTA text color)

Container styling¶

The widget renders inside an iframe, but you can style your container with standard CSS:

#traveln-widget {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}