Web integration overview¶

Integrate the Traveln AI Trip Planner directly into your website using our secure, embedded widget.

What you embed¶

• A container element in your page
• A bootloader script from the CDN host
• A server-side token endpoint

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

Architecture¶

The Traveln widget uses a Client + Server integration to keep sensitive keys server-side:

1. Client-side: you embed a lightweight JavaScript loader and a container div.
2. Token exchange: the loader calls your backend endpoint (data-token-url) to request a signed SSO token.
3. Server-side: your backend validates the user session and creates a signed token using your SSO HMAC secret.
4. Initialization: the widget redirects the user to the partner Traveln host, which verifies the token and creates the session.

Prerequisites¶

• Tenant slug: your organization identifier (e.g. partnerdemo).
• SSO HMAC secret: used to sign SSO tokens (HMAC-SHA256).
• HTTPS: required for secure token exchange.

Next steps¶

• Client-side setup
• Server-side token generation