Les avantages des Widgets
Principaux avantages:
- Nouvelle technologie React: performances améliorées et meilleure visibilité dans Google
- Approche "mobile-first"
- Design moderne et contemporain
Autres avantages:
- Amélioration du taux de conversion grâce à une meilleure expérience utilisateur
- Options de suivi optimisées
- Amélioration des résultats de Google Lighthouse
- Évaluation des produits dans la recherche Google intégrée
- Navigation moderne par widget
- Fonctionnalité de filtrage et de tri améliorée
- Technologie React JS au lieu de iFrame
Catalog Widget
À quoi sert le Catalog Widget?
Le Catalog Widget vous procure une présentation moderne de vos offres. Le client voit le titre de l'offre, une photo, le prix et une brève description. En cliquant sur le bouton "Réserver ici", le client est redirigé vers la présentation du produit.
D'une part, il est possible de filtrer les offres par lieu, date et catégorie, comme les circuits ou les sports de plein air. D'autre part, les offres peuvent également être triées en fonction du prix le plus bas et le plus élevé, des différentes langues et selon d'autres critères.
Product Widget
À quoi sert le Product Widget?
Le widget de produit permet d'afficher les photos de vos produits et offres ainsi que leur description. Le client a aussi la possibilité d'acheter l'offre directement via le widget de réservation intégré. Pour une intégration visuelle du Product Widget à votre site Web, vous pouvez également adapter les couleurs et les styles à l'aide de CSS.
Instructions détaillées pour l'ajout des widgets
Étape 1
Si vous souhaitez utiliser les widgets, allez dans Tableau de bord > Configurer votre boutique > Intégrer votre boutique.
Étape 2
Cliquez ensuite sur Widget Editor pour accéder aux paramètres d'intégration.
Étape 3
Veuillez sélectionner + Nouveau Widget.
Remarque
L'article Comment utiliser le Widget Editor fournit des informations plus détaillées. Jetez-y un coup d'œil et ajoutez votre premier widget.
Personnalisez vos widgets avec CSS
Tous les éléments importants des widgets ont un nom de classe html propre à Regiondo, ce qui permet une personnalisation facile via CSS.
Remarque
L'article Comment ajuster le code de l'éditeur de widgets vous montre des exemples pour chaque possibilité de personnalisation de manière plus détaillée.
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',
},
},
},
};