SSO Button Widget¶

The SSO Button Widget is a lightweight embeddable CTA. It silently authenticates the user through Traveln SSO and redirects them to a specific Traveln destination after click.

Landing pages that need one clear CTA
Header or nav integrations
Account dashboards with quick links into Traveln
Partner pages that should send users directly to planner, trips, or accommodation search

Quick start¶

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

Embed snippet

Supported button targets¶

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

If data-button-type is omitted or invalid, the loader falls back to trip_planner.

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-button-type`	No	Redirect target for the button
`data-button-text`	No	Optional label override
`data-button-width`	No	Optional fixed width
`data-button-height`	No	Optional fixed height
`data-button-padding`	No	Optional padding
`data-button-margin`	No	Optional outer margin
`data-button-bg`	No	Optional background hex color
`data-button-text-color`	No	Optional text hex color
`data-button-border-radius`	No	Optional border radius
`data-button-border`	No	Optional border such as `1px solid #FD8559`

Redirect lifecycle¶

The loader script reads tenant config from the Traveln CDN.
The button renders inside a small iframe on your page.
When the user clicks, the loader requests a signed token from your backend.
Traveln verifies the token on /sso-login/, creates the session, and redirects the user to the destination selected by data-button-type.

Styling guidance¶

The button loader validates style values before applying them:

Use hex colors such as #FD8559 and #FFFFFF.
Use safe CSS lengths such as px, rem, em, vh, vw, and % where relevant.
Use a simple border such as 1px solid #FD8559 or none.
Increase width when using longer labels like accommodation search.

Troubleshooting¶

`Traveln button: invalid partner value`¶

The loader could not read tenant config or resolve partner_host. Check:

Your tenant slug is correct
Your frontend origin is allowed to fetch /widget/v1/<tenant>/config.json
Your tenant has valid partner routing configured on the Traveln side

Button click does nothing or redirects to the wrong page¶

Check:

data-button-type is one of the supported values
Your backend token endpoint returns { "token": "..." }
The user is reaching the correct CDN host and app host for the target environment