The advantages of the Widgets
Key benefits:
- New React technology: improved performance and increased findability in Google
- Mobile-first approach
- Modern and contemporary design
Further advantages:
- Improved conversion rate through a better user experience
- Optimized tracking options
- Increased Google Lighthouse Score
- Integrated product rating in Google search
- Modern widget navigation
- Enhanced filtering and sorting functionality
- React JS instead of iFrame technology
Catalog Widget
What can the Catalog Widget do?
The Catalog Widget offers you a modernly designed overview of your offers. The customer is shown the offer title, a picture, the price and a small description. With the "Book here" button, the customer is forwarded to the product view.
On the one hand, it is possible to filter the offers by location, date and category, such as tours or outdoor sports. On the other hand, the offers can also be sorted by lowest and highest price, different languages and other.
Product Widget
What can the Product Widget do?
The product widget is able to display photos of your products and offers as well as their product description. In addition, it is possible for a customer to buy the offer directly via the integrated booking widget. To ensure that the product widget also fits visually into your website, you can also adapt colours and styles with CSS.
How to add the Widgets
Step 1
If you would like to use the Widgets please go to Dashboard > Configure Shop > Website Integration.
Step 2
Then click on Widget Editor to go to the integration settings.
Step 3
Add the desired Widget by using the + New Widget button.
Note
The article How to use the Widget Editor explains more detailed information. Take a look and add your first Widget.
Customize your Widgets with CSS
All important HTML elements in the widget have specific class names, starting with “regiondo-“. This allows easy customization via CSS. The class names are listed below. The widget uses styling isolation technique (Shadow DOM), therefore all the styles for the widget have to be put inside a specific tag: <template id="product-catalog-widget-styles"></template> . Make sure that the id property of the template tag matches the styles-template-id property of the Widget tag.
Note
The article How to adjust your Widget Editor code shows you examples for each customization possibility in a more detailed way.
export const classes = {
details: {
prefix: 'Re-p',
root: 'regiondo-product-details',
drawer: {
root: 'regiondo-drawer',
header: 'regiondo-drawer-header',
content: 'regiondo-drawer-content',
},
collapsible: {
root: 'regiondo-collapsible',
header: 'regiondo-collapsible-header',
content: {
root: 'regiondo-collapsible-content',
closed: 'regiondo-collapsible-content-closed',
open: 'regiondo-collapsible-content-open',
},
},
backLink: 'regiondo-back-link',
content: {
root: 'regiondo-content',
main: 'regiondo-content-main',
side: 'regiondo-content-side',
},
reviews: {
root: 'regiondo-reviews',
header: 'regiondo-reviews-header',
preview: 'regiondo-reviews-preview',
summary: 'regiondo-reviews-summary',
loadButtonContainer: 'regiondo-reviews-load-button-container',
list: 'regiondo-reviews-list',
carousel: 'regiondo-reviews-carousel',
review: {
root: 'regiondo-review',
header: 'regiondo-review-header',
body: 'regiondo-review-body',
caption: 'regiondo-review-caption',
replies: 'regiondo-review-replies',
},
rating: 'regiondo-reviews-rating',
ratingCategory: 'regiondo-reviews-rating-category',
},
crossSelling: {
root: 'regiondo-cross-selling',
header: 'regiondo-cross-selling-header',
list: 'regiondo-cross-selling-list',
item: 'regiondo-cross-selling-product',
},
booking: {
root: 'regiondo-booking-container',
header: 'regiondo-booking-header',
price: 'regiondo-booking-price',
priceLabel: 'regiondo-booking-price-label',
priceValue: 'regiondo-booking-price-value',
mobileButton: 'regiondo-booking-mobile-button',
drawer: 'regiondo-booking-drawer',
},
tripadvisor: 'regiondo-tripadvisor',
shortDescription: 'regiondo-product-short-description',
highlights: 'regiondo-product-highlights',
description: 'regiondo-product-description',
information: {
root: 'regiondo-product-information',
product: {
root: 'regiondo-product-information-item',
icon: 'regiondo-product-information-item-icon',
header: 'regiondo-product-information-item-header',
body: 'regiondo-product-information-item-body',
},
covid19: 'regiondo-product-information-item-covid19',
services: 'regiondo-product-information-item-services',
notIncluded: 'regiondo-product-information-item-not-included',
duration: 'regiondo-product-information-item-duration',
equipment: 'regiondo-product-information-item-equipment',
participants: 'regiondo-product-information-item-participants',
languages: 'regiondo-product-information-item-languages',
openingHours: 'regiondo-product-information-item-opening-hours',
importantInfo: 'regiondo-product-information-item-important-info',
attachments: 'regiondo-product-information-item-attachments',
},
location: {
root: 'regiondo-product-location',
description: 'regiondo-product-location-description',
details: {
root: 'regiondo-product-location-details',
address: 'regiondo-product-location-address',
operator: 'regiondo-product-location-operator',
name: 'regiondo-product-location-name',
},
additional: {
root: 'regiondo-product-location-additional',
parking: 'regiondo-product-location-parking',
publicTransport: 'regiondo-product-location-public-transport',
},
map: {
image: 'regiondo-product-location-map-image',
interactive: 'regiondo-product-location-map-interactive',
},
},
header: 'regiondo-product-header',
headerLabels: 'regiondo-product-header-labels',
tags: 'regiondo-product-tags',
labels: {
rating: 'regiondo-product-label-rating',
covid19: 'regiondo-product-label-covid19',
duration: 'regiondo-product-label-duration',
location: 'regiondo-product-label-location',
soldOut: 'regiondo-product-label-sold-out',
saleEnded: 'regiondo-product-label-sold-sale-ended',
new: 'regiondo-product-label-new',
bestseller: 'regiondo-product-label-bestseller',
},
gallery: {
root: 'regiondo-product-gallery',
thumbnails: {
root: 'regiondo-product-thumbnails',
previousButton: 'regiondo-product-thumbnails-previous',
nextButton: 'regiondo-product-thumbnails-next',
pages: 'regiondo-product-thumbnails-pages',
page: 'regiondo-product-thumbnails-page',
thumbnail: 'regiondo-product-thumbnail',
},
screen: {
root: 'regiondo-product-gallery-screen',
imageSlide: 'regiondo-product-gallery-slide regiondo-product-image',
videoSlide: 'regiondo-product-gallery-slide regiondo-product-video',
previousButton: 'regiondo-product-gallery-previous',
nextButton: 'regiondo-product-gallery-next',
video: {
frame: 'regiondo-product-video-frame',
preview: 'regiondo-product-video-preview',
playButton: 'regiondo-product-video-play',
},
},
},
},
catalog: {
prefix: 'Re-c',
root: 'regiondo-catalog',
header: 'regiondo-catalog-header',
list: 'regiondo-catalog-list',
product: {
root: 'regiondo-list-product',
image: 'regiondo-list-product-image',
content: 'regiondo-list-product-content',
details: 'regiondo-list-product-details',
header: 'regiondo-list-product-header',
description: 'regiondo-list-product-description',
rating: 'regiondo-list-product-rating',
shortInfo: {
root: 'regiondo-list-product-short-info',
duration: 'regiondo-list-product-duration',
location: 'regiondo-list-product-location',
},
footer: 'regiondo-list-product-footer',
button: 'regiondo-list-product-button',
price: {
root: 'regiondo-list-product-price',
label: 'regiondo-list-product-price-label',
value: 'regiondo-list-product-price-value',
},
labels: {
soldOut: 'regiondo-list-product-label-sold-out',
saleEnded: 'regiondo-list-product-label-sold-sale-ended',
new: 'regiondo-list-product-label-new',
bestseller: 'regiondo-list-product-label-bestseller',
},
},
},
};