For web developers
Integration reference
Look up snippet parameters, defaults and confirmation events.
Reviewed
Shareable guide · no sign-in required ↗For the person installing or extending the website integration. Use Widget settings to copy your personalized snippet. The reference below covers every loader attribute and the opening button.
Snippet parameter reference #
| Attribute | What it does |
|---|---|
src | Loads the official widget. Keep https://www.tourdash.app/widget.js. |
data-company | Required public widget key, starting with wc_. Copy it from Widget settings. A company name or numeric ID will not work. |
data-target | ID of the HTML container, such as tourdash-booking. If missing or not found, the loader creates a container after the script. Integration events are emitted on this container. |
data-mode | inline places the widget inside the page; popup opens a centered overlay; assistant opens a floating corner panel. The loader defaults to inline when omitted. The snippet generator initially selects assistant. |
data-locale | Interface language, saved tour-content translations and date/number formatting. Interface text is supported in English (en), Spanish (es), French (fr), Italian (it), German (de), Portuguese (pt), Dutch (nl) and Polish (pl). If omitted, uses the page’s HTML lang, then the saved widget default. Other interface languages fall back to English. Does not translate your tour content. |
data-language | Spoken language of the tours and departures offered, such as en, es or fr. Hides the language selector and only offers matching departures. Omit it to let travelers choose among available languages. Does not translate the interface. |
data-languages | Comma-separated departure-language codes, such as es,fr. Restricts the tour catalog, calendar and departure list to those languages; travelers can choose within that set. Takes priority over data-language. Omit both attributes to allow all departure languages. An invalid nonempty list matches none. Independent of data-locale. |
data-success-url | Optional confirmation destination, for example /en/thank-you/. Navigates the host page once the booking is confirmed and any optional questions are saved or skipped. Works in all three modes. Use a relative path or an HTTP(S) URL with the same protocol, domain and port as the host page; maximum 2048 characters, without credentials. Blank, omitted or invalid keeps the widget confirmation. Set it separately for each page; changing data-locale does not choose a destination. |
data-privacy-url | Optional link for the words “privacy policy” in the booking form’s acceptance line, for example https://example.com/en/privacy/. Opens in a new tab so the booking is not interrupted. Must be an https URL without credentials; maximum 2048 characters. It may point at another website. Blank, omitted or invalid keeps the acceptance line without a link. Set it separately for each page, so each language links its own policy; changing data-locale does not choose one. |
data-show-launcher | Assistant mode only. true shows the built-in floating booking button; false lets you use your own button. Defaults to false in the loader, while the snippet generator initially enables it. Has no effect in popup or inline mode. |
data-product | Public tour identifier that opens a specific tour’s date selection. Copy it from the tour’s Online booking → Copy tour booking code. Omit it to offer multiple tours. Do not use the visible tour name or a numeric database ID. |
data-option | Optional stable booking-option code, such as default if that is the option’s actual code. Use with data-product to restrict options. This is not a numeric ID or display name; use data-language to restrict spoken languages. |
data-date | Optional initial date in YYYY-MM-DD format. With a preselected tour, starts at departure selection for that date. Does not create availability or guarantee places. Omit it to let the traveler choose a date. |
data-theme | Keep auto, as in the generated snippet. Appearance comes from the colors and styles saved in Widget settings. Setting dark does not currently activate a dark theme. |
data-version | Keep 1, the supported integration contract version. Defaults to 1 if omitted; do not increase it when updating your website. |
data-tour | Compatibility alias for data-product. Use data-product for new installations; it takes priority when both are present. |
data-tourdash-open | Put this on your button or link, not on the script, to open popup or assistant mode. The loader connects the first matching element. Place it before the widget script. Inline mode is already visible in its container. |
defer | HTML script attribute that waits for the page markup before running the loader. Keep it in the snippet and do not add async. |
Confirmation events #
No extra JavaScript is needed for data-success-url. tourdash:booking-complete remains the event for a confirmed booking, before
optional questions. tourdash:booking-flow-complete fires once those questions are
saved or skipped, or immediately after confirmation if there are none.
Both events fire on the data-target container and do not bubble to document or window. The flow-complete event contains only bookingReference. Remove any old redirect listener on tourdash:booking-complete when using the snippet option, so optional questions
are not skipped. If you implement your own navigation, use the flow-complete event and leave data-success-url empty.