Skip to content

Trip Planner Widget

The Trip Planner Widget is the full embeddable Traveln planning surface. Use it when you want users to start their journey inside your site before they move into the authenticated Traveln experience.

What this widget is best for

  • Marketing landing pages that should capture trip intent immediately
  • Logged-in partner dashboards that launch Traveln from a prompt
  • Embedded planning experiences where you want Traveln UI on-page instead of a simple CTA

Quick start

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

Widget Studio

Embed snippet

Attribute reference

Attribute Required Description
data-tenant Yes Tenant slug assigned by Traveln
data-token-url Yes Your backend endpoint that returns { "token": "..." }
data-locale No Locale, currently en or ar
data-direction No Explicit ltr or rtl; otherwise derived from locale
data-iframe-height No Initial iframe height before auto-resize
data-widget-submit No CTA button text override
data-widget-input No Prompt input placeholder override
theme-widget-submit-bg No CTA background hex color override
theme-widget-submit-text No CTA text hex color override

Suggested prompts

You can seed suggested prompts to help users start faster:

<script id="traveln-widget-prompts" type="application/json">
  ["Plan a long weekend in Istanbul", "Family trip to Riyadh", "Beach holiday with kids"]
</script>

Runtime flow

  1. The loader script reads tenant config from the Traveln CDN.
  2. The widget renders inside an iframe on your page.
  3. When the user submits a prompt, the loader requests a signed token from your backend.
  4. Traveln verifies the token on /sso-login/, creates the session, and redirects the user into /ai-trip-planner/.

Implementation notes

  • The widget is best when the page should feel interactive before redirect.
  • The embed auto-resizes after render, but a sensible initial data-iframe-height improves perceived stability.
  • Keep CTA text and placeholder short so the embedded layout stays balanced across mobile and desktop.