Articles on: Walkthroughs

Old Checkout: Ventrata Widget (no longer supported)

NEW CHECKOUT AVAILABLE!



In our effort to provide continued support at the highest level, we encourage our clients to switch to the new and improved web checkout. We will be gradually phasing out the old version, which is the focus of the article below. Please refer to our Implementation Guide and find all relevant documentation in the New Web Checkout section of our Knowledge Base. Should you have any questions, please reach out to your Customer Success Specialist or Ventrata Technical Support.



What is Ventrata Widget



Ventrata widget is used by your clients for booking via web checkout.



It's part of each product page on ventrata web checkout, but it can be also integrated into external websites.

All you need to do to enable it is to copy paste the unique string of HTML code, which you can find in Web Checkout - > Checkouts section.



Note the tabs Button Layout and Embedded Layout.

According to which one you choose you get either the button which pops up the widget when you click on it or the opened widget right away.
Both ways will get you the same thing at the end allowing you to Add product to the Cart so it's more like cometic choice of yours. You can see the preview below the code itself.

This widget can be customized by couple of HTML tags so it better suits your needs. You can use it to add buttons or embeds on your web without having to API to ventrata (which we can support) or using our CMS (content management system) in case you have your own web.

Let's say you have a wordpress with very high ranking SEO, you add the widgets, maybe you have a page that links to somewhere on a forum like a landing page. You can have the promotion pre-selected, so that you only see that code if you come to that page. It can be used also for data-referrer If you have a reseller that has his own website you can give him these embeds or buttons where they can sell your produts and earning their commission with their clients not leaving their page.

Examples of Use



As mentioned above you can get the basic widget with your products available on web by simply copy-pasting the HTML code from particular web checkout you have set up. It will be something like this:

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw"></script>

The outcome may be adjusted by adding specific Tags into it.

Product


If you add data-product="46bc02f6-73c9-4b01-93a4-9f8c16337a7c" to the end of that before you start the closing </script> tag, it will preselect the particular prodict directly instead of default widget with all the products to choose from as shown at the begining of this article.

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-product="46bc02f6-73c9-4b01-93a4-9f8c16337a7c"></script>



(that number in data-product="###" tag represents ID of chosen product, which you get from the dashboard on that product page)



- See a live example here

Option


You get even product option preselected by adding data-option="229dd3b3-29ff-40ea-9bf0-6ce3c8bb3b29" in the same way.

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-product="44c797ef-4197-49d2-94c0-824e0aa70ecf" data-option="229dd3b3-29ff-40ea-9bf0-6ce3c8bb3b29"></script>



- See a live example here

Language


You may use also data-locale="es" to set the language.

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-product="44c797ef-4197-49d2-94c0-824e0aa70ecf" data-option="229dd3b3-29ff-40ea-9bf0-6ce3c8bb3b29" data-locale="es"></script>



(Note that you always need to set the correct tag for desired outcome - in this case data-locale="es" for Spanish; this language is pulled from the product and needs to be enabled for the supplier)

- See a live example here

Reseller


Another option is to add a reseller via the reseller web referrer by adding data-referrer="ventrata.com" to the code.

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-product="44c797ef-4197-49d2-94c0-824e0aa70ecf" data-referrer="ventrata.com"></script>

This is not visible on the widget at the first sight, but it works like mentioned above.

- See a live example here

Promotion


There's also option to preselect promotion by using data-promotion="TEST123" tag.

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-product="44c797ef-4197-49d2-94c0-824e0aa70ecf" data-promotion="TEST123"></script>



(Again keep in mind that you need to set appropriate value, that TEST123 is just for ilustration purposses)

- See a live example here

Destination


You can use also data-destination="414b25b4-d289-4d35-a30f-e4cece711b2e" to preselect one (if you have any).

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-destination="414b25b4-d289-4d35-a30f-e4cece711b2e"></script>

- See a live example here

Checkin


Or data-landing=“checkin” which will bring up the checkin.

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-landing="checkin"></script>



- See a live example here

Gift


It's possible to bring up the tab for purchasing gift cards with data-landing="gift".

<script src="https://checkout.ventrata.com/checkout/widget/js?locale=en&prefix=checkout" data-layout="embed" data-color="#F7F7F7" data-token="Q6D1l3HVDNEz5Uka6E2EVw" data-landing="gift"></script>



- See a live example here

Updated on: 03/06/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!