Principes de base
Accès à la section : /admin/retailer/widget
Autoriser un site internet à utiliser les widgets
Avant toute chose, vous devez déclarer le ou les sites internet autorisés à afficher vos widgets. Il s’agit d’une mesure de sécurité : seuls les domaines que vous avez explicitement ajoutés pourront charger et afficher vos widgets. Cela empêche n’importe qui de copier votre code et de l’utiliser sur un site tiers.
Vous pouvez ajouter plusieurs sites : par exemple votre site de production, un environnement de préproduction pour tester, ou même plusieurs sites de vente si vous distribuez vos produits sur différentes plateformes.
Formulaire d’inscription à la newsletter
L’option « Afficher le formulaire d’inscription à la newsletter » (Oui / Non) permet de faire apparaître une case à cocher dans le widget Panier. Lorsqu’un client coche cette case lors de son achat, son consentement est enregistré dans votre base clients (colonne « Newsletter : Oui/Non »). Cela vous permettra d’alimenter un outil de marketing automation comme Brevo pour vos campagnes d’emailing par export et si la connexion est effecutée directement entre Tourbiz et votre outil de marketing automation.
Un mot pour les développeurs : scripts vs iframes
Les widgets Tourbiz ne sont pas des iframes. Ce sont des scripts JavaScript qui s’injectent directement dans le DOM de votre page. Cela présente plusieurs avantages importants :
- Héritage du CSS : le widget adopte automatiquement les styles de votre site (polices, couleurs, boutons…), garantissant une intégration visuelle cohérente sans sur-couche à gérer.
- Interaction JavaScript native : le widget peut communiquer avec votre page (événements, tracking, analytics) comme n’importe quel composant natif.
- Pas de problèmes de hauteur dynamique : contrairement aux iframes, la hauteur s’adapte naturellement au contenu sans JavaScript supplémentaire.
Créer un widget
Widget Calendrier
Ce widget affiche un calendrier de disponibilités pour un produit donné, avec sélection de la date, de l’heure et des quantités.
Étapes :
- Sélectionnez le type « Calendrier » dans le menu déroulant.
- Choisissez la langue d’affichage.
- Sélectionnez le produit concerné — un aperçu s’affiche immédiatement à droite.
- Renseignez l’URL de la page panier (ex. :
https://www.votresite.com/panier). Cette URL est indispensable : c’est vers cette page que le client sera redirigé après avoir cliqué sur « Ajouter au panier », et c’est là que le widget Panier doit être intégré. - Copiez le code généré et intégrez-le dans votre page.
Produit introuvable dans la liste ? Vérifiez que vous l’avez bien activé dans l’onglet Vente en ligne > API. Seuls les produits activés dans cet onglet sont disponibles via les widgets et l’API. Cette activation volontaire vous permet de garder certains produits « hors ligne » — non distribuables en ligne — tout en les conservant dans votre catalogue interne.
Widget Panier
Ce widget affiche le panier d’achat et permet au client de finaliser sa commande.
Étapes :
- Sélectionnez le type « Panier ».
- Choisissez la langue correspondant à la page où il sera intégré.
- Copiez le code généré et collez-le directement sur votre page panier.
C’est tout ! Le widget récupère automatiquement les articles ajoutés depuis le widget Calendrier.
Widget Utiliser un bon cadeau
Ce widget permet à vos clients de saisir la référence d’un bon cadeau pour l’utiliser lors d’un achat.
Étapes :
- Sélectionnez le type « Utiliser un bon cadeau ».
- Choisissez la langue.
- Renseignez l’URL de la page de confirmation (ex. :
https://www.votresite.com/boncadeauachete). Cette URL est obligatoire : c’est la page vers laquelle le client sera redirigé après validation de son bon cadeau. - Copiez le code généré et intégrez-le sur la page dédiée de votre site.
Widget Liste de produits et calendrier
Ce widget combine une liste de produits et un calendrier interactif. Il est idéal lorsque vous souhaitez proposer plusieurs produits sur une même page et laisser l’utilisateur choisir.
Fonctionnement :
- Une liste de produits s’affiche à gauche.
- Lorsque l’utilisateur clique sur un produit, le calendrier à droite se met à jour automatiquement pour afficher les disponibilités de ce produit.
Étapes :
- Sélectionnez le type « Liste de produits et calendrier ».
- Choisissez la langue.
- Sélectionnez les produits à inclure (sélection multiple possible).
- Renseignez l’URL de la page panier.
- Copiez le code généré et intégrez-le sur votre page.
Récapitulatif
| Widget | URL obligatoire | Sélection produit(s) |
|---|---|---|
| Calendrier | ✅ URL page panier | 1 produit |
| Panier | ❌ | — |
| Utiliser un bon cadeau | ✅ URL page de confirmation | — |
| Liste de produits et calendrier | ✅ URL page panier | Plusieurs produits |