Skip to content

Client integration

Traveln exposes two client-side web loaders:

  • Trip Planner Widget for embedded prompt capture and planner launch
  • SSO Button Widget for a single redirect CTA

Both loaders are configured with data- attributes on the script tag.

Trip Planner Widget

Basic embed

<div id="traveln-widget">
  <script
    src="https://cdn.traveln.ai/widget/v1/traveln-widget.js"
    data-tenant="your-tenant-slug"
    data-token-url="/api/traveln/sso/"
    data-locale="en"
  ></script>
</div>

Configuration attributes

Control the widget's behavior using data- attributes on the script tag.

Attribute Required Description
data-tenant Yes Your tenant slug (for example partnerdemo).
data-token-url Yes URL to your backend token endpoint. Relative URLs are resolved against the current origin. Default: /api/traveln/sso/.
data-locale No Language code such as en or ar. Default: en.
data-direction No ltr or rtl. Overrides locale-based direction.
data-iframe-height No Initial iframe height (200-2000). Default: 380.
data-widget-submit No Optional CTA button text override.
data-widget-input No Optional input placeholder override.
theme-widget-submit-bg No Optional CTA button background color (#RGB or #RRGGBB).
theme-widget-submit-text No Optional CTA button text color (#RGB or #RRGGBB).

Suggested prompts

You can pass suggested prompts by placing JSON in a script tag with id traveln-widget-prompts:

<script id="traveln-widget-prompts" type="application/json">
  ["Plan a weekend in Dubai", "Family-friendly summer trip", "Romantic 3-day getaway"]
</script>

Dynamic loading (SPA)

const script = document.createElement("script")
script.src = "https://cdn.traveln.ai/widget/v1/traveln-widget.js"
script.setAttribute("data-tenant", "your-tenant-slug")
script.setAttribute("data-token-url", "/api/traveln/sso/")
script.setAttribute("data-locale", "en")
document.body.appendChild(script)

Load on demand

Prefer loading the widget only on pages where it's needed.

Reference page: Trip Planner Widget

SSO Button Widget

Basic embed

Use the dedicated SSO button loader when you need a single CTA instead of the full planner widget:

<script
  src="https://cdn.traveln.ai/widget/v1/traveln-button.js"
  data-tenant="your-tenant-slug"
  data-token-url="/api/traveln/sso/"
  data-locale="en"
  data-button-type="accommodation_search"
></script>

Button configuration attributes

Attribute Required Description
data-tenant Yes Your tenant slug.
data-token-url No URL to your backend token endpoint. Default: /api/traveln/sso/.
data-locale No Language code. Default: en.
data-direction No ltr or rtl. Overrides locale-based direction.
data-button-type No trip_planner, trips, or accommodation_search. Default: trip_planner.
data-button-text No Optional button label override.
data-button-width No Optional button width.
data-button-height No Optional button height.
data-button-padding No Optional button padding.
data-button-margin No Optional outer embed margin.
data-button-bg No Optional button background color (#RGB or #RRGGBB).
data-button-text-color No Optional button text color (#RGB or #RRGGBB).
data-button-border-radius No Optional button border radius.
data-button-border No Optional button border, for example 1px solid #FD8559.

Supported button targets

data-button-type Destination after SSO Default label
trip_planner /ai-trip-planner/ "Generate a trip"
trips /trips/ "My Trips"
accommodation_search /accommodation-search/ "Accommodation Search"

Reference page: SSO Button Widget