Dtravel SDK v2 - Booking Widget DEMO

Dtravel SDK v2 - Booking Widget

The Dtravel SDK v2 is a powerful tool for integrating Dtravel's services into your application.

It provides an easy way to embed a booking widget directly into your website or app.

This documentation provides all the necessary information to get started with the SDK, including installation instructions, available functions, and troubleshooting tips.

Installation

Using CDN (Recommended)

To include the Dtravel SDK in your project, add the following script tag to your HTML file:

Floating Widget (Default)

<script id="dtravel_jssdk" 
  src="https://sdk.dtravel.com/static/dtravel.sdk.js?userId=YOUR_USER_ID&propertyId=YOUR_PROPERTY_ID">
</script>

Embedded Widget

To embed the widget inline within your page, add a container element and set displayMode=embedded:

<div id="dtravel-widget-container"></div>

<script id="dtravel_jssdk" 
  src="https://sdk.dtravel.com/static/dtravel.sdk.js?userId=YOUR_USER_ID&propertyId=YOUR_PROPERTY_ID&displayMode=embedded">
</script>

Optional: Auto-open on page load (floating mode only)

<script id="dtravel_jssdk" 
  src="https://sdk.dtravel.com/static/dtravel.sdk.js?userId=YOUR_USER_ID&propertyId=YOUR_PROPERTY_ID&autoOpen=true">
</script>

Required Parameters

URL Parameters: The SDK accepts the following parameters via URL query string:

- userId : Your unique Dtravel user identifier

- propertyId : The property ID for the accommodation

- displayMode : (Optional) Set to 'embedded' to display the widget inline within a container element. Defaults to 'floating' which displays as a fixed overlay. When using embedded mode, ensure you have a <div id="dtravel-widget-container"></div> element on your page.

- autoOpen : (Optional) Set to 'true' to automatically open the widget when the page loads (floating mode only)

Widget Elements

The SDK creates the following DOM elements:

- #dtravel-widget : Main widget container

- #dtravel_sdkwidget_wrapper : Widget wrapper element

- #dtravel_sdkwidget_resume : Resume/minimize button

Demo

📌 Embedded Mode (Currently Active)

The widget is embedded inline in the page . It's always visible and part of the page flow.

Best for: Property pages, dedicated booking pages, integrated experiences

Code Examples

Embedded Mode (Currently Loaded)

<div id="dtravel-widget-container"></div>

<script id="dtravel_jssdk" 
  src="http://localhost:8080/static/v2/dtravel.sdk.js?userId=YOUR_USER_ID&propertyId=YOUR_PROPERTY_ID&displayMode=embedded">
</script>

Floating Mode

<button onclick="window.openDtravelWidget()">Book Now</button>

<script id="dtravel_jssdk" 
  src="http://localhost:8080/static/v2/dtravel.sdk.js?userId=YOUR_USER_ID&propertyId=YOUR_PROPERTY_ID">
</script>

Floating Mode with Auto-Open

<script id="dtravel_jssdk" 
  src="http://localhost:8080/static/v2/dtravel.sdk.js?userId=YOUR_USER_ID&propertyId=YOUR_PROPERTY_ID&autoOpen=true">
</script>

Troubleshooting

Common Issues

1. Widget not appearing: Ensure userId parameter is provided

2. Embedded widget not showing: Make sure you have a <div id="dtravel-widget-container"></div> element on your page when using displayMode=embedded

3. CORS errors: Make sure you're serving from the correct domain

4. Functions not available: Check that the SDK script has loaded completely

Error Messages

- "(!) dtravel: userId is required.": The userId parameter is missing from the script URL

Support

For technical support or questions:

- Contact the development team at [email protected]

Changelog

v2.0.0

- Auto-open functionality added

- Embedded mode added

- Better browser compatibility