How to integrate the React Booking Widget?

The booking widget is an alternative for the operators already providing a detailed description of their offers. With the booking widget, only the booking procedures made through your ticketshop will be processed. The presentation of your offers will be left entirely to you and your website. Its configuration is located in your Regiondo account:

Shop Configuration > Website Integration > React Booking Widget

Note

Click on Booking Widget (React.JS) to configure the new booking widget. If you do not see this option, please send an email to support@regiondo.com.

2. What are the advantages?

It uses the latest technology
It has faster loading times
The design is new and clean
There are various customization options that are not possible with the old widget, e. g. adaption of individual widgets instead of all at once, widget only for vouchers (without ticket sales with date) > CSS

Please define the following settings before you generate your code:

1. Select Product: Select your preferred language and the offer you want to set up the booking process as widget for. Fill in the desired width of the iFrame. You have the option between Auto, Fullscreen and a Specific width in pixels.

2. Your HTML Code: After you have made the settings, your personal HTML code will be generated automatically.

3. Preview: A preview of the booking widget is displayed.

On page load, the widget will be rendered inside of a DIV tag. SCRIPT tag can be placed

inside of a HEAD tag, together with a DIV tag or
before a closing BODY tag.

If multiple widget code snippets are implemented on the same page, each DIV tag will be processed only once.

Attention:

For security measures many content management systems (CMS) block SCRIPT tags inside content. Some systems have the possibility to change the restriction to allow SCRIPT tags inside content. When there is no possibility to remove this restriction, a SCRIPT tag can be added to the page with corresponding "custom script" field, if present, or by changing theme files directly.

Please note:

When the widget is integrated to the page dynamically, for example, inside modal popups or slide-out sidebar sections, it is required to have the SCRIPT tag of the widget initially loaded on the page, in order for PayPal to work correctly when the customer is returned to the website after a successful purchase or payment method cancellation.

Add widget on WordPress:

To add widgets on WordPress, Regiondo created a Booking Widget plugin. After the installation, code snippets can be added as built-in widgets or shortcodes. Read more here.

The widget functionality can be customized by adding additional attributes to the DIV tag.

Here is the list of essential widget attributes:

data-locale = "en_US"

Attribute indicates the selected product language locale.

data-provider = "RE000"

Attribute indicates unique provider code.

data-product = "T-RE000-000000"

Attribute indicates the selected product unique SKU code. It is possible to substitute the products SKU code dynamically, to easily implement many product widgets on your website.

data-url = "https://regiondo-demo.regiondo.com/"

Attribute indicates the selected product title. It is an informational attribute and can be omitted.

data-font = "Open Sans"

Attribute sets the base font for the widget. If set, the corresponding font file will be loaded from Google Fonts. If the website has the same font file loaded from Google already, it is recommended to disable font loading for widget. See data-disable-font on how to disable font loading.

Here is the list of most popular fonts from Google Fonts:

Open Sans
Roboto
Lato
Oswald
Source Sans Pro
Montserrat
PT Sans
Raleway
Lora
Noto Sans

The Widget will not load font files from Google Fonts, if the specified font matches one of the standard system fonts:

Arial

Verdana

Tahoma

Helvetica

Helvetica Neue

Times New Roman

Times

Courier New

Courier

Georgia

Geneva

Palatino

Palatino Linotype

Candara

Cambria

Calibri

Segoe UI

Garamond

Bookman

Book Antiqua

Lucida Sans Unicode

Lucida Grande

Consolas

Avant Garde

Comic Sans MS

Trebuchet MS

Arial Black

Impact

data-width = "400px"

Attribute sets the widgets maximum width. Default value is auto, which means that the widget will take all available width space. If it needs to limit the maximum widget width, the value can be set as fixed "400px" or percentage "50%". It can be omitted to let the widget react automatically.

data-layout = "fullscreen"

This attribute appears instead of data-width selected as "Fullscreen". If selected, the widget will be positioned as absolute, with width and height set as 100%, to cover all available space. This is useful if the widget has to be implemented inside of a lightbox or a slide-out sidebar.

data-gift-option = "true"

Attribute allows to override the settings of the product´s gift option in the dashboard. If set to "true", this attribute will force the widget to show Product and Gift tabs. If set to "false", the Gift option will be disabled and tabs will be hidden.

data-gift-option-highlighted = "true"

In addition to the data-gift-option, this attribute allows to override the settings to show Gift option as enabled by default. If set to "true", Gift option will be active. If set to "false" - Product tab will be active and Gift tab will be inactive.

data-gift-option-only = "true"

Attribute allows to show the widget with Gift option only. If set to "true", the widget Tabs will be hidden and only Gift option will be available.

This is useful for additional flexibility, when it is needed to disable appointments booking due to temporary difficulties or renovations.

data-date = "2020-12-31"

Attribute allows to set a preselected date for a booking, formatted as "YYYY-MM-DD:. If set, the specified date will be selected in calendar. The customer can still change the date. This is useful when the website has event lists or a calendar and the widget should open in lightbox for a specific date.

data-time = "20:20"

In addition to data-date, this attribute allows to set preselected time for a booking, formatted as "HH:MM". If set, the specified time of an appointment will be selected. The customer can still change preselected time.

data-maximum-months = "2"

Attribute allows to set maximum amount of months to be shown at a time in the calendar. The widget has adaptive width and depending on the available space, the customer can see up to 6 calendar months. This attribute is useful when it needs to limit amount of calendar months, for example when the width of a single calendar month is affected by custom CSS and only one month can fit in one row.

data-step = "cart"

Attribute sets the widget to open a specified step as initial step. With an empty value or when omitted the widget behaves normally. E.g. If set to "cart", the widget will load the shopping cart view.

This attribute can be used to show the widget on a separate shopping cart page of the website, for example where the customer can get by clicking on the shopping cart button in the header. Or when it is needed to add an additional step to the checkout experience.

Possible values are: "cart", "contact", "payment", and "shipping".

data-skip-cart = "true"

Attribute allows to change the default widget behavior to skip the shopping cart step. If set to "true", after product is added to cart, the customer proceeds directly to checkout.

data-disable-loading-animation = "true"

Attribute allows to disable the widget loading animation.

This is useful, if the website has its own loading animation.

data-disable-font = "true"

Attribute allows to disable the loading of font files from Google Fonts, specified in "data-font". If the website has the same custom font already, it is recommended to add this attribute set to "true", to avoid extra requests on page load.

data-font-size = "16px"

Attribute sets the base font size for the widget. This allows to change the widgets base font size easily, to better match the website typography. It can also be helpful if the website has an adaptive font size, based on the visitors screen width.

data-font-size-large = "20px"

Similar to "data-font-size", attribute sets the font size for titles, product names, buttons etc.

data-font-size-small = "14px"

Similar to "data-font-size", attribute sets the font size for notice text, input field labels, etc.

data-font-line-height = "1.4"

Attribute sets the base line-height of text lines.

data-padding = "0" or data-padding = "20px"

Attribute sets the horizontal borders for the left and right side of the elements inside the widget. This allows the removal of padding when a widget is implemented on a website with integrated borders.

data-disable-currency-dropdown="true"

Attribute allows to disable currency dropdown.

data-disable-language-dropdown="true"

Attribute allows to disable language dropdown.

data-disable-cart-button="true"

When the cart is not empty, it is possible to use the "Go to Cart"-button to check the cart content. This attribute allows to hide the button, in order to make the widget smaller in height when there is limited space for the widget on a page.

data-disable-reservation-timer="true"

This attribute is also helpful to reduce the widgets height, by hiding the reservation countdown on the shopping cart page.

data-disable-back-button="true"

Attribute allows to disable the "Back"-button on the shopping cart and checkout, which is helpful for widget implementations within small modal windows when there are additional "Close"-buttons available to start the product selection over.

data-disable-cart-coupon="true"

When coupons and vouchers are not in use or the coupon field should be hidden for specific products or for a short period of time, then this attribute can be helpful.

data-disable-invoice-form="true"

This attribute allows to hide the invoice form of "Contact" step on checkout, to make the checkout process less complex.

The new Booking Widget can be easily customized with CSS, as all widget content is rendered on the page without iFrames. To do so, it needs to add CSS rules to the website with a .css file and <link> tag or just with <style></style> tags allowed.

1. When it is possible to upload a .css file to the server, adding the .css file with <link> tag is recommended, as a .css file will be cached by the browser after the first page load. To link the "custom.css" file with all the CSS rules inside, you can include it in the <head> section of the web page:

<link rel="stylesheet" href="/css/custom.css">

2. If there is no chance to add a link tag to the head, it is possible to inject the .css file with JavaScript as follows:

<script>
(function(d) {
    var css = d.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('href', '/css/custom.css');
    d.getElementsByTagName('head')[0].appendChild(css);
}(document));
</script>

Otherwise, CSS rules can be placed inside <style> </style> tags and can be included anywhere in the page, like this:

<style>
.regiondo-booking-widget {
    border:2px solid #d0d0d0;
    border-radius:10px;
}
</style>

7. How can texts and translations be changed?

Specific CSS rules allow to change not only the html element colors or styles, but also its text content.

Here are examples on how to change text of different elements inside the booking widget.

7.1 Text of Product and Gift tab

This example also shows how to change text of a specific language locale:

Code:

<style>
.regiondo-widget .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Ticket';
}
.regiondo-widget .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Gift';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="product"]:after {
    content: 'Eintrittskarte';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-tabs__tab[data-tab="gift"]:after {
    content: 'Geschenk';
}
</style>

Result:

7.2 Text of intro line

In some cases, to overwrite a rule "!important" can be added. However, it is better to use more specific rules. By indicating one or more elements before the target element, the rule becomes more specific and gets a higher priority:

Note

If you use the same css classes as inside the widget css as you do in your website, it might be overwritten. In order to overwrite css rules with your own css rules, you can use "!important".

Code:

<style>
.regiondo-widget .regiondo-intro-text:after {
    content: 'Choose a date below to see available times:' !important;
}
</style>

Code:

<style>
.regiondo-widget .regiondo-content .regiondo-intro-text:after {
    content: 'Choose a date below to see available times:';
}
</style>

Result:

7.3 Text of Date/Time/Option step title

Some elements have specific classes based on the element state or user action, which can be used to change text, also after the user selected an option:

Code:

<style>
.regiondo-widget .regiondo-step-variation .regiondo-step__title:after {
    content: 'Select an Option';
}
.regiondo-widget .regiondo-step-date .regiondo-step__title:after {
    content: 'Select a Date';
}
.regiondo-widget .regiondo-step-time .regiondo-step__title:after {
    content: 'Select a Time';
}
.regiondo-widget .regiondo-step-variation.regiondo-step--selected .regiondo-step__title:after {
    content: 'Option:';
}
.regiondo-widget .regiondo-step-date.regiondo-step--selected .regiondo-step__title:after {
    content: 'Date:';
}
.regiondo-widget .regiondo-step-time.regiondo-step--selected .regiondo-step__title:after {
    content: 'Time:';
}
</style>

Result:

7.4 Text of time periods

On the time selection step, there are time period titles. Time slots are separated by time periods:

from 0 to 5 is "Night"
from 6 to 11 is "Morning"
from 12 to 17 is "Afternoon"
from 18 to 23 is "Evening"

These time period titles can be changed with CSS as follows:

Code:

<style>
.regiondo-widget .regiondo-times__period.regiondo-times--night:after {
    content: 'NIGHT:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--morning:after {
    content: 'MORNING:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--afternoon:after {
    content: 'AFTERNOON:';
}
.regiondo-widget .regiondo-times__period.regiondo-times--evening:after {
    content: 'EVENING:';
}
</style>

Result:

Alternatively, time period titles can be hidden. You may add "display: inline" to remove line breaks on the time groups:

Code:

<style>
.regiondo-widget .regiondo-times__period {
    display: none;
}
.regiondo-widget .regiondo-times__group {
    display: inline;
}
</style>

Result:

7.5 Text of "Add to Cart" and "Proceed to Checkout" buttons

Here is an example of how to change button text, including letter case:

Code:

<style>
.regiondo-widget .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'Add to Cart';
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-addtocart .regiondo-button-addtocart:after {
    content: 'In den Warenkorb';
}
.regiondo-widget .regiondo-button.regiondo-button-checkout:after {
    content: 'Proceed to Checkout';
    text-transform:uppercase;
}
.regiondo-booking-widget[data-locale="de_DE"] .regiondo-button.regiondo-button-checkout:after {
    content: 'Zur Kasse';
    text-transform:uppercase;
}
</style>

Result:

7.6 Text of "Continue Shopping" and "Redeem code" buttons

This example shows how to change text of secondary buttons as well as text on an empty shopping cart view. Elements have the same class names for different pages. To distinguish them we need to add more specificity to our rules:

Code:

.regiondo-widget .regiondo-checkout--cart .regiondo-button-back:after {
    content: 'Back';
}
.regiondo-widget .regiondo-checkout--cart .regiondo-button-coupon:after {
    content: 'Have a Coupon?';
}

.regiondo-widget .regiondo-empty-cart .regiondo-button-continue:after {
    content: '« Back to Product';
}
.regiondo-widget .regiondo-empty-cart-text:after {
    content: 'Shopping cart is empty.' !important;
}

Result:

7.7 Text of checkout progress step titles

Progress steps are shown on shopping cart and on checkout sections. Here is the list of all available checkout steps:

Cart
Add-On
Contact
Shipping
Payment

Steps "Add-On" and "Shipping" can be seen only when there is an Add-on (Merchandising) product added to the cart. If the total amount to pay is zero, then the payment step will be disabled.

This example shows how to change text of checkout progress steps:

Code:

<style>
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__cart:after {
    content: 'Cart';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__addons:after {
    content: 'Add-On';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__contact:after {
    content: 'Contact';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__shipping:after {
    content: 'Shipping';
}
.regiondo-widget .regiondo-checkout-progress .regiondo-progress__payment:after {
    content: 'Payment';
}

/* Disable Uppercase */
.regiondo-widget .regiondo-checkout-progress div:after {
    text-transform:none !important;
}

/* Remove Progress steps counter */
.regiondo-widget .regiondo-checkout-progress div::before {
    content:'' !important;
}
</style>

Alternatively, progress steps can be hidden as follows:

Code:

<style>
/* Hide Progress steps on Cart only */
.regiondo-widget .regiondo-checkout--cart .regiondo-checkout-progress {
    display:none;
}

/* Hide Progress steps completely */
.regiondo-widget .regiondo-checkout .regiondo-checkout-progress

1. What is a React Booking Widget?

2. What are the advantages?

3. What settings can I choose for the booking widget?

4. Where can the booking widget be placed on the website?

5. How to customize the widget functionality?

5.1 Default widget attributes:

5.2 Additional widget attributes:

6. How can the widget functionality be customized with CSS?

7. How can texts and translations be changed?

7.1 Text of Product and Gift tab

7.2 Text of intro line

7.3 Text of Date/Time/Option step title

7.4 Text of time periods

7.5 Text of "Add to Cart" and "Proceed to Checkout" buttons

7.6 Text of "Continue Shopping" and "Redeem code" buttons

7.7 Text of checkout progress step titles

1. What is a React Booking Widget?

2. What are the advantages?

3. What settings can I choose for the booking widget?

4. Where can the booking widget be placed on the website?

5. How to customize the widget functionality?

5.1 Default widget attributes:

5.2 Additional widget attributes:

6. How can the widget functionality be customized with CSS?

7. How can texts and translations be changed?

7.1 Text of Product and Gift tab

7.2 Text of intro line

7.3 Text of Date/Time/Option step title

7.4 Text of time periods

7.5 Text of "Add to Cart" and "Proceed to Checkout" buttons

7.6 Text of "Continue Shopping" and "Redeem code" buttons

7.7 Text of checkout progress step titles

Related articles