Create a more engaging and user-friendly checkout experience by strategically utilising the viewModeMap feature. Switch from embedded mode to pop-up mode at a specific point in the checkout process to draw attention to additional offers or request customer actions.
Enable Pop-up Mode
Update Data-Config
Add the below piece of code, replacing
checkoutPagewith the name of one of the supported checkout pages:"pickups","questions","upgrade"or"cross-sell".📒 NOTE
Only one of the pages can be specified in the code. Select the page, where the switch takes place and all subsequent pages will be displayed in pop-up mode.
"features": {
"viewModeMap": {
"pickups": "popup"
}
}"features": {
"viewModeMap": {
"questions": "popup"
}
}"features": {
"viewModeMap": {
"cross-sell": "popup"
}
}"features": {
"viewModeMap": {
"upgrade": "popup"
}
}
Add to Script or Button
Replace
checkoutPagewith the title of the checkout page (as above) to switch to pop-up mode starting from that page.<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "features":{"viewModeMap": {"checkoutPage": "popup"}}}'></script>
📒 NOTE
Simply adding the feature in the data-config enables the switch on all products in the checkout. If you wish to limit this feature to specific products, you can do so by specifying the product ID in the data-config attribute.
Switch Flow
The customer selects a product in the embedded mode of the web checkout. They select the number of tickets, date and time of their tour.
If the product contains a pickup page and the switch to pop-up mode was enabled from "pickups", this page is displayed in the pop-up mode. Every following page in the checkout flow continues in the same mode.
📒 NOTE
The last page, Checkout, is always displayed in pop-up mode, regardless of the other pages' settings.