Skip to content

Client integration

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 (e.g. 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 (e.g. en, 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/#RRGGBB).
theme-widget-submit-text No Optional CTA button text color (#RGB/#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.