Customization¶

Localization (language and direction)¶

Both web embeds support multiple languages and automatically handle text direction (LTR/RTL).

Set data-locale on the script tag:

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

Trip Planner Widget customization¶

The trip planner widget supports a small set of safe client-side overrides:

• 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);
}

SSO Button Widget customization¶

The SSO button loader accepts explicit target and styling attributes on the script tag:

• data-button-type
• data-button-text
• data-button-width
• data-button-height
• data-button-padding
• data-button-margin
• data-button-bg
• data-button-text-color
• data-button-border-radius
• data-button-border

Supported targets¶

If you omit data-button-text, Traveln uses a localized default label based on the selected button type.

Example:

<script
  src="https://cdn.traveln.ai/widget/v1/traveln-button.js"
  data-tenant="partnerdemo"
  data-button-type="accommodation_search"
  data-button-text="Search stays"
  data-button-width="240px"
  data-button-padding="12px 20px"
  data-button-bg="#FD8559"
  data-button-text-color="#FFFFFF"
  data-button-border-radius="999px"
  data-button-border="1px solid #FD8559"
  data-button-margin="0 auto"
></script>

Safe formatting rules¶

The button loader validates style values before applying them:

• Colors must be hex colors such as #FD8559 or #FFF.
• Width accepts safe CSS length values such as px, rem, em, vh, vw, and %.
• Height, padding, margin, and border radius accept safe CSS box-model values.
• Border accepts none or a simple CSS border such as 1px solid #FD8559.

If a value is invalid, the loader ignores it and falls back to the default.

Tenant theme fallback¶

If you do not pass explicit overrides, Traveln uses tenant theme values from the CDN config where available. This is especially useful when you want consistent styling across the full widget and the SSO button.