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: 07/07/2022