Dtravel SDK v2 - Property Search Widget DEMO

Dtravel SDK v2 - Property Search Widget

The Property Search Widget allows users to browse and filter all properties from a specific host.

Users can search by check-in/check-out dates and number of guests to find available properties.

This widget is perfect for hosts who want to showcase their entire portfolio and let guests find the perfect property for their needs.

Installation

Using CDN (Recommended)

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

Floating Widget (Default)

<script id="dtravel_search_jssdk" 
  src="https://sdk.dtravel.com/static/v2/dtravel-search.sdk.js?userId=YOUR_USER_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_search_jssdk" 
  src="https://sdk.dtravel.com/static/v2/dtravel-search.sdk.js?userId=YOUR_USER_ID&displayMode=embedded">
</script>

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

<script id="dtravel_search_jssdk" 
  src="https://sdk.dtravel.com/static/v2/dtravel-search.sdk.js?userId=YOUR_USER_ID&autoOpen=true">
</script>

Required Parameters

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

- userId : Your unique Dtravel user identifier (host ID)

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

SDK Functions

Once the SDK is loaded, the following functions are available globally (for floating mode):

window.openDtravelSearchWidget();

Opens the Dtravel property search widget.

window.closeDtravelSearchWidget();

Closes the Dtravel property search widget.

Note: These functions only work in floating mode. In embedded mode, the widget is always visible within its container.

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 above. It's always visible and part of the page flow.

Best for: Portfolio pages, property listing pages, dedicated search pages

Code Examples

Embedded Mode (Currently Loaded)

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

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

Floating Mode

<button onclick="window.openDtravelSearchWidget()">Search Properties</button>

<script id="dtravel_search_jssdk" 
  src="http://localhost:8080/static/v2/dtravel-search.sdk.js?userId=YOUR_USER_ID">
</script>

Floating Mode with Auto-Open

<script id="dtravel_search_jssdk" 
  src="http://localhost:8080/static/v2/dtravel-search.sdk.js?userId=YOUR_USER_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

5. No properties showing: Verify the userId (host ID) has properties listed on Dtravel

Error Messages

- "(!) dtravel-search: 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.1.0

- Display all host properties in a grid layout

v2.0.0

- Auto-open functionality added

- Embedded mode added

- Better browser compatibility