Vous avez votre propre site web ? Créez votre widget de réservation DiBooq en quelques minutes !

1. Préparation

1.1 Créer votre site de réservation DiBooq

Commencez par créer votre site de réservation DiBooq. La configuration ne prend généralement que 5 à 10 minutes.

Une fois votre site de réservation en ligne (voir la capture d'écran), vous pouvez commencer à créer votre widget de réservation DiBooq.

Deux possibilités s'offrent à vous pour intégrer le widget sur votre propre site web :

• Widget intégré (iFrame) : le widget de réservation est directement intégré à votre site web.
• Widget Popup (bouton avec superposition) : un bouton ouvre le widget de réservation dans une fenêtre superposée, sans que les visiteurs quittent votre site web.

1.2 Vérifiez la technologie utilisée par votre site web

Notre widget de réservation a déjà été intégré avec succès sur différents types de sites web, notamment :

• Sites web développés sur mesure (par exemple en HTML ou PHP)
• WordPress
• Constructeurs de sites web tels que Squarespace, Wix, Jimdo, etc.

De manière générale, le widget peut également être utilisé avec d'autres CMS ou systèmes de gestion de sites web, à condition qu'ils permettent l'intégration de code HTML et JavaScript personnalisé. 

2. Créer votre widget de réservation (générateur de code)

Une fois votre site de réservation DiBooq créé, ouvrez le générateur de code à l'adresse suivante :

https://tools.dibooq.com/code-generator.html

Vous pourrez y configurer votre widget de réservation et générer le code personnalisé pour l'intégrer à votre site web.

• Champ de saisie : Votre sous-domaine

  Saisissez le sous-domaine que vous avez défini lors de la création de votre site de réservation DiBooq.

  Important : Saisissez uniquement le nom du sous-domaine, sans .book.dibooq.com.

Exemple : Si votre site de réservation est accessible à l'adresse :maisonvacances.book.dibooq.comsaisissez simplement :maisonvacances

• Liste déroulante : Langue du widget
  
  

  L'option Auto (par défaut) utilise la langue du site web. Pour ce faire, le widget utilise l'attribut lang défini dans l'en-tête HTML de votre site.
  
  Selon la technologie utilisée ou votre CMS, cet attribut de langue n'est toutefois pas toujours accessible. Dans ce cas, le widget de réservation risque de ne pas s'afficher dans la langue attendue.
  
  Vous pouvez alors sélectionner une langue fixe via le paramètre « Langue » du widget. Le code généré ouvrira toujours le widget dans la langue sélectionnée, indépendamment de la langue du site web.
  
  Vous pouvez choisir parmi les langues suivantes : Allemand, Anglais, Espagnol, Français, Portugais, Croate, Italien ou conserver le réglage par défaut : Auto (par défaut) 

• Champ de saisie : Texte du bouton
  
  

  Vous pouvez définir ici le texte affiché sur le bouton ouvrant le widget de réservation.
  Le texte saisi sera affiché sur le bouton lors de l'utilisation du Widget Popup.
  

• Champ de saisie : Titre

  Vous pouvez définir ici le titre qui s’affichera dans la fenêtre superposée, au-dessus du widget de réservation.

  Si votre site web utilise plusieurs hébergeurs, vous pouvez, par exemple, indiquer le nom de l'hébergeur concerné. Ainsi, vos voyageurs sauront immédiatement pour quel hébergement ils effectuent leur réservation.

   

• Champ de saisie : Sous-titre

  Vous pouvez définir ici un texte supplémentaire qui sera affiché directement sous le titre dans la fenêtre superposée.

  Utilisez ce sous-titre pour ajouter une courte description, une information importante ou un message personnalisé destiné à vos voyageurs.

• Personnalisation du bouton

  Vous trouverez ici différentes options de personnalisation du bouton ouvrant le widget de réservation dans une fenêtre superposée.

  Vous pouvez ainsi adapter son apparence au design de votre site web.
  
  

 2.1 Créer un Widget Popup (bouton avec superposition)

L'aperçu vous montre l'apparence du bouton sur votre site web avec les paramètres sélectionnés.

Vous pouvez cliquer directement sur le bouton dans l'aperçu. La fenêtre superposée s'ouvrira exactement comme elle apparaîtra ensuite sur votre site web.

Lorsque vous êtes satisfait du résultat, cliquez sur Code Snippet pour générer le code d'intégration.

Code avec CSS intégré (Inline Styling)

Sur la gauche, vous trouverez le code avec le CSS directement intégré (Inline Styling).

Cette version est idéale si vous souhaitez intégrer le widget de réservation à un seul endroit sur votre site web. Il vous suffit de copier le code et de l'insérer à l'endroit souhaité.

Code avec CSS séparé

Sur la droite, vous trouverez une version où le CSS est séparé du code du widget.

Cette solution est recommandée si vous souhaitez utiliser le widget de réservation à plusieurs endroits sur votre site web.

Vous pouvez intégrer le CSS une seule fois sur votre site, par exemple via le CSS personnalisé de WordPress. Ensuite, il vous suffira d'insérer le code plus court du widget aux différents emplacements souhaités.

Cette méthode facilite la maintenance et garantit une apparence cohérente de tous les widgets de réservation.


 2.2 Créer un Widget intégré (iFrame)

L'aperçu vous montre comment le calendrier de réservation intégré apparaîtra sur votre site web. Vous pouvez ainsi vérifier que le widget se charge correctement avant son intégration.

Si le calendrier s'affiche correctement dans l'aperçu, cliquez sur Code Snippet pour générer le code d'intégration.

Vous pourrez ensuite insérer ce code à l'endroit souhaité dans le code HTML de votre site web.

Pour WordPress, les constructeurs de sites web ou d'autres CMS, il existe généralement un élément dédié tel que HTML personnalisé, HTML, HTML intégré ou Intégrer du code.

Il vous suffit d'y coller le code généré.