Skip to main content

CELITECH iFrame Integration Guide

Overview

This guide provides step-by-step instructions for integrating CELITECH's new iFrame link iframe.celitech.com into your project. The iFrame requires authentication and supports customization through query parameters.

Authentication

To access the iFrame, you must provide a valid authentication token in the query string. Without a token, the iFrame UI will be blocked.

Fetching a Token

To obtain a token, call our API endpoint in your backend using your client credentials without any additional parameters:

POST /iframe/token

The endpoint will return a token which shall be used in the iframe link in your frontend.

Please refer to our API Reference for more details.

Token Expiry

The token is valid for 30 minutes after issuance.

Query Parameters

The iFrame link supports various optional query parameters for customization:

Authentication (required)

  • token: The authentication token obtained from /iframe/token.
    Example: token=<your-token>

Customization (optional)

  • color: A HEX color code (without the # sign) to customize the iFrame appearance.
    • Example: color=000000
  • referenceId: An identifier provided by the partner to link this purchase to their booking or transaction for analytics and debugging purposes.

Trip Details (optional)

  • destination: The name of the destination country.
    • Example: destination=France
  • iso: The ISO 3-letter country code.
    • Example: iso=FRA
    • Only provide either the destination name or its ISO code.
  • startDate: The trip start date in MM-dd-yyyy format.
    • Example: startDate=06-01-2025
  • endDate: The trip end date in MM-dd-yyyy format.
    • Example: endDate=06-12-2025
    • If startDate and endDate are omitted, the default trip duration when a destination is provided is 9 days.

Example Usage

A properly formatted iFrame URL might look like this:

https://iframe.celitech.com?token=your_token&color=ff5733&iso=FRA&startDate=06-01-2025&endDate=06-12-2025

Embedding the iFrame

To embed the CELITECH iFrame into your project, use the following example:

<iframe
src="https://iframe.celitech.com?token=your_token&color=ff5733&iso=FRA&startDate=01-06-2025&endDate=10-06-2025"
width="1000"
height="450"
style="border:none;"
/>

Implementation Notes

  • Ensure that the token is retrieved dynamically from /iframe/token before embedding the iFrame.
  • Always URL-encode query parameters where necessary.
  • If using a custom color, provide the HEX code without the # sign.