You can configure the checkout to display in one of two ways:
Static Analysis
This method is used when a visible HTML element, such as a button, anchor or a div element, is clicked. The following methods are used for each mode:
Pop-up Mode: Use the
ventrata-checkoutattribute on the HTML element.
Embedded Mode: Use the
ventrata-embedded-widgetattribute on the HTML.
📘 EXAMPLE
Adding the code below will display the checkout with the specified product and English as the predefined language.
<button
type="button"
data-config='{"productID":"lwdvpS7Z8jmrxZ9TvRVMQ9KrEHPuCwtTT2bS", "lang":"en", "referrer": "hilton.com"}'
ventrata-checkout
>
Book Now
</button>
Dynamic Execution
Ventrata checkout is fully compatible with any JavaScript-based integration. Theoretically, you do not need any visible HTML element as a trigger. Instead, you can react to events, such as if a 3rd party application fires an event you are looking for. Alternatively, automatically show a pop-up when the user scrolls to a specific area on your page.
It provides the same flow and supports the same parameters as static analysis. Only the format is different. The below is a direct comparison to the static analysis example above:
window.Ventrata({
"productID":"lwdvpS7Z8jmrxZ9TvRVMQ9KrEHPuCwtTT2bS",
"lang":"en",
"referrer": "hilton.com"
})