Installer le bouton de réservation sur votre site web

Vous n'avez pas besoin d'un développeur pour cela, et vous n'avez pas besoin de comprendre le code. Vous copiez deux morceaux de texte depuis Rentalbuddy et vous les collez dans votre site web. Ce guide explique exactement où va chacun et quoi faire lorsque le bouton n'apparaît pas.

Les deux morceaux, et pourquoi les deux sont nécessaires

Morceau	Ce qu'il fait	Où il va
Copier le code du moteur de réservation (le script)	Charge Rentalbuddy sur votre site web	Une fois pour tout le site, dans vos réglages de code/pied de page globaux
Copier le code du bouton (le bouton)	Marque l'endroit exact où le bouton doit apparaître	Sur la page où vous voulez le bouton

Aucun des deux ne fonctionne seul. Le script sans le code du bouton charge Rentalbuddy mais n'affiche rien. Le code du bouton sans le script laisse un espace vide sur la page. C'est l'erreur la plus courante — les opérateurs ne copient que le code du bouton et se demandent pourquoi rien ne se passe. (Seule exception : les liens des e-mails pour déverrouiller ou prolonger une réservation fonctionnent sans bouton.)

Avant de commencer

Le bouton de réservation se configure par emplacement : faites donc ceci pour chaque emplacement qui doit avoir un bouton sur votre site web.

Étape 1 — Ouvrir la configuration du Bouton Réserver

Dans le menu de gauche, ouvrez Emplacements.
Cliquez sur l'emplacement voulu.
Ouvrez l'onglet Bouton Réserver.

Étape 2 — Choisir comment les clients réservent

Sous Où les clients réservent-ils ?, choisissez Mon propre site web.

Puis sous Comment les clients réservent-ils depuis votre site web ?, choisissez Intégré sur votre site web — c'est l'option qui vous donne le code du bouton. (L'autre option, Lien de réservation, ne vous donne qu'un lien vers une page hébergée par Rentalbuddy et ne demande aucun code. Si vous n'êtes pas sûr de pouvoir installer du code, c'est une très bonne alternative.)

Étape 3 — Indiquer à Rentalbuddy quel créateur de site vous utilisez

Sous Quel créateur de site utilisez-vous ?, choisissez le vôtre dans la liste — WordPress (trois variantes), Wix, Squarespace, GoDaddy Website Builder, Webflow, Jimdo, IONOS (MyWebsite), ou Autre / Je ne sais pas.

Cela ne change pas le code. Cela change les instructions affichées à côté de chaque étape pour qu'elles correspondent aux menus de votre créateur de site. Choisissez Autre / Je ne sais pas si rien ne correspond — vous obtiendrez tout de même des instructions générales.

Étape 4 — Ajouter le script à votre site web (une seule fois)

Dans l'étape Ajoutez le moteur de réservation à votre site, cliquez sur Copier le code du moteur de réservation. Vous obtenez une seule ligne qui ressemble à ceci :

<script defer src="https://plugin.rentalbuddy.io/static/js/main.js"></script>

Utilisez toujours le bouton de copie plutôt que de taper ceci à la main — la copie vous donne l'adresse exacte utilisée par votre compte.

Collez-la dans la zone de code globale de votre site web, à la fin du corps de page. Dans les créateurs de sites, ce champ s'appelle généralement custom code, header/footer code, tracking scripts, ou quelque chose mentionnant "avant </body>". La formulation de Rentalbuddy sous cette étape : "Charge Rentalbuddy sur votre site. Ajoutez-le une fois par adresse web."

Voici approximativement où chercher dans les créateurs de sites courants (les noms de menus changent, considérez donc ceci comme un point de départ) :

WordPress — WordPress n'a pas de champ intégré pour cela. Le guide dans le produit recommande d'installer une petite extension gratuite comme Insert Headers and Footers ou WPCode et d'utiliser son champ Footer / "avant </body>". Si vous utilisez une extension de cache, videz le cache après l'enregistrement.
Wix — Site & app settings → Custom code (parfois sous Tracking & Analytics), placement Body – end, appliqué à toutes les pages.
Squarespace — Settings → Advanced → Code injection → Footer. Toutes les formules Squarespace n'incluent pas l'injection de code.

Enregistrez ensuite et publiez votre site.

Ne collez le script qu'une seule fois. Les copies supplémentaires sont ignorées : un doublon ne casse donc rien — mais il ralentit la page et rend flou le choix de la copie à remplacer si vous avez besoin plus tard de la version pour bannière cookies ou de la version async décrites plus bas. Si vous n'êtes pas sûr qu'il soit déjà là, cherchez rentalbuddy dans vos champs de code globaux avant d'en ajouter une copie.

Un site web avec plusieurs pages : collez-le une seule fois, pour tout le site. Plusieurs sites web distincts : collez-le une fois sur chaque site web.

Étape 5 — Saisir l'adresse de votre site web

Dans l'étape Placez le bouton là où il doit s’afficher, vous trouverez le champ URL où le bouton de livre est implémenté. Saisissez l'adresse complète de la page où se trouvera votre bouton — par exemple https://votresite.com/reservation.

Les règles appliquées par le système :

Elle doit commencer par https:// ou http://. Sans cela, l'enregistrement échoue avec "L’URL doit commencer par https:// ou http://."
Elle ne doit pas contenir de ?. Cela arrive généralement quand vous collez un lien d'aperçu ou de test. Supprimez tout à partir du ?.
Elle est obligatoire. Sans elle, vous ne pouvez pas enregistrer l'emplacement en mode intégré.

Ce champ compte bien plus qu'il n'y paraît. Rentalbuddy construit les liens qu'il envoie dans les e-mails — démarrer la location, retour, prolonger, replanifier — en partant de cette adresse et en y ajoutant des informations. Si l'adresse pointe vers une page qui ne contient pas le code du bouton, vos clients atterrissent sur cette page et n'atteignent jamais leur code PIN ni l'étape de retour. Si vous changez l'adresse en pleine saison, les liens déjà envoyés pointeront vers l'ancienne page.

Étape 6 — Placer le bouton sur la page

Toujours dans Placez le bouton là où il doit s’afficher, cliquez sur Copier le code du bouton à côté de Réservation standard. Vous obtenez une ligne comme celle-ci :

<div id="rentalbuddy-checkout" data-site="your-location-id"></div>

Collez-la dans la page elle-même — dans un bloc HTML / Embed / Code de votre éditeur de page, à l'endroit exact où le bouton doit apparaître. Pas dans les réglages globaux du site ; c'est là qu'est allé le script de l'étape 4.

Sous Avancé (seulement si nécessaire) se trouvent deux autres codes de bouton : Réservation de produits et Réservation d'événement. Ne les utilisez que si votre emplacement propose à la fois des produits et des événements et que vous voulez un bouton qui saute le choix. Sinon, Réservation standard est le bon.

Enregistrez et publiez la page.

Étape 7 — Vérifier

Cliquez sur Sauvegarder dans Rentalbuddy.
Cliquez sur Aperçu à côté de l'option de réservation — cela ouvre votre site web dans un nouvel onglet avec le flux de réservation, pour vérifier que l'intégration fonctionne.
Ouvrez aussi votre page normalement, dans une fenêtre privée / de navigation privée, afin de la voir comme un client et non depuis le cache.

Le texte et l'apparence du bouton

Deux choses concernant l'apparence du bouton surprennent presque tout le monde.

Si vous ne définissez jamais de texte, le bouton affiche BOOK — en majuscules. C'est le libellé de repli intégré, pas un choix de style de votre part. Donnez-lui un vrai libellé sous Texte du bouton dans le même onglet :

Pour cet emplacement : activez Personnaliser pour cet emplacement et renseignez le Texte par défaut. Sous Réglages avancés se trouvent des champs Texte pour les produits / Texte pour les événements distincts, destinés aux codes de bouton avancés.
Pour tous les emplacements à la fois : utilisez Modifier le texte pour le compte.

Deux comportements à connaître. Avec Personnaliser pour cet emplacement désactivé, ce sont les textes du compte qui sont utilisés et les champs de l'emplacement ne sont même pas affichés. Et vider tous les champs de l'emplacement alors que l'interrupteur est activé revient aussi, silencieusement, aux textes du compte.

La feuille de style de votre site web peut restyler le bouton. Le bouton est un simple élément de bouton sur votre page. Ses couleurs et ses polices sont définies directement sur l'élément, si bien que les styles ordinaires de votre site ne les modifient pas — mais les règles marquées !important, ainsi que les propriétés que le bouton laisse non définies (la mise en majuscules du texte, par exemple), passent bien. Donc si le texte s'affiche en majuscules alors que vous avez saisi des minuscules, c'est la feuille de style de votre site, pas Rentalbuddy. Utilisez Style du bouton (même onglet) pour définir explicitement son apparence, et vérifiez le résultat avec Aperçu.

Les modifications de texte et de style ne nécessitent pas de recopier le moindre code — elles prennent effet au prochain chargement de la page.

Ce que signifie réellement la marque rouge

L'onglet Bouton Réserver (et la colonne URL du bouton Réserver de la liste des emplacements) affiche une marque rouge tant que la configuration n'est pas terminée — et les opérateurs se battent régulièrement au mauvais endroit, à cause d'un seul malentendu :

La marque rouge/verte ne regarde jamais votre site web. Rentalbuddy ne visite pas votre site et ne détecte pas si le code y est installé. La marque ne reflète que ce qui est enregistré dans l'admin :

Intégré sur votre site web : vert dès qu'une URL où le bouton de livre est implémenté valide est enregistrée (commence par http(s)://, sans ?).
Lien de réservation : toujours vert.
L'option de site web hébergé par Rentalbuddy : vert dès que ce site est activé.

Donc si la marque « reste rouge alors que le bouton est bien sur notre site » : le site web n'a rien à voir — la cause est un champ d'URL non enregistré, vide ou invalide. Renseignez-le, appuyez sur Sauvegarder, et il bascule. L'infobulle vous indique dans quel cas vous êtes : "Choisissez comment les clients réservent et terminez la configuration du bouton Réserver." (rien de choisi ou URL manquante) ou "L’URL doit commencer par https:// ou http://." Inversement, une marque verte ne prouve pas que le code est sur votre site — Aperçu est l'outil qui ouvre réellement votre page et montre si le bouton fonctionne.

Pièges courants

Une bannière de consentement aux cookies bloque le script

Si vous utilisez une bannière de cookies, elle peut retenir le script Rentalbuddy jusqu'à ce que le visiteur accepte les cookies — le bouton apparaît alors tardivement, voire pas du tout. Rentalbuddy met en garde précisément là-dessus : "Si le bouton de réservation n'apparaît pas et que vous utilisez une bannière cookies, votre site peut bloquer le script jusqu'à ce que les visiteurs acceptent les cookies."

Sous Avancé (seulement si nécessaire) → Outils de consentement aux cookies se trouvent des versions prêtes à l'emploi du script pour deux outils courants : Copier pour Cookiebot et Copier pour OneTrust. Remplacez le script collé à l'étape 4 par celui qui correspond.

Pour tout autre outil de cookies : dans les réglages de votre bannière, marquez le script de réservation (ou l'hôte plugin.rentalbuddy.io) comme strictement nécessaire ou essentiel. Vous n'avez pas besoin de recatégoriser les cookies individuellement.

Le bouton apparaît mais se comporte bizarrement

Sous Avancé (seulement si nécessaire) → Chargement du script, vous pouvez copier deux versions alternatives du même script : Copier avec async et Copier sans defer. Essayez l'une d'elles à la place de la version standard — là encore, en remplaçant la copie déjà collée, jamais en en ajoutant une autre.

Vous voulez un bouton sur une deuxième page

Le script est déjà chargé pour tout le site, vous n'avez donc besoin que du code du bouton. Collez le même code de bouton dans un bloc HTML/Embed de l'autre page.

Notez que le champ URL où le bouton de livre est implémenté ne contient qu'une adresse par emplacement. Choisissez la page vers laquelle vous voulez envoyer les clients depuis les e-mails de réservation — c'est la page que les liens des e-mails ouvriront.

Vous voulez un bouton sur une version de votre page dans une autre langue

Comme ci-dessus : collez le code du bouton dans la version linguistique de la page. Si la seconde langue vit sur un site web distinct (un autre domaine), ce site a besoin de sa propre copie du script.

Les langues proposées par la fenêtre de réservation elle-même sont un réglage distinct sur l'emplacement — voir Paramètres du compte — où se trouve chaque réglage.

Vous avez plusieurs emplacements

Chaque emplacement a son propre code de bouton (la valeur data-site diffère) et sa propre adresse de site web. Copiez le code du bouton depuis l'onglet Bouton Réserver de cet emplacement. Le script, lui, est le même pour tous : il ne va donc qu'une seule fois par site web.

Liste de contrôle : le bouton n'apparaît pas

Parcourez cette liste dans l'ordre.

Les deux morceaux sont-ils installés ? Le script dans les réglages globaux du site, et le code du bouton sur la page. Le script manquant est la cause la plus fréquente.
Avez-vous publié ? La plupart des créateurs de sites exigent un Publier/Mettre à jour explicite après l'enregistrement, et les extensions de cache doivent être vidées.
Le script est-il présent plusieurs fois ? Cherchez rentalbuddy dans vos champs de code globaux. Supprimez toutes les copies sauf une.
L'emplacement est-il réglé sur la réservation intégrée ? Ouvrez Emplacements → l'emplacement → Bouton Réserver et vérifiez que Mon propre site web → Intégré sur votre site web est bien sélectionné et enregistré. Si l'onglet Bouton Réserver affiche un avertissement rouge, c'est la configuration enregistrée qui est incomplète — voir Ce que signifie réellement la marque rouge ci-dessus ; il s'agit du champ URL enregistré, jamais de votre site web.
L'adresse du site web est-elle valide ? Elle doit commencer par https://, ne pas contenir de ?, et être la page qui porte réellement le code du bouton.
Une bannière de cookies le bloque-t-elle ? Essayez la version Cookiebot ou OneTrust du script, ou marquez-le comme strictement nécessaire dans votre outil de cookies.
Essayez une autre option de chargement. Remplacez le script par la version async ou sans defer.
Vérifiez sur un téléphone et en fenêtre privée. Les pages en cache et les extensions de navigateur peuvent le masquer.
Y a-t-il vraiment quelque chose à réserver ? Le bouton peut être correctement installé et pourtant n'avoir rien à vendre si l'emplacement n'a aucune période d'ouverture ou aucun produit. Dans ce cas, le client ne voit pas une fenêtre vide — il voit "Cette station de location n’est pas disponible pour la réservation pour le moment." avec les coordonnées de votre emplacement. Voir Horaires d'ouverture et dates d'ouverture et Les clients ne voient aucun créneau disponible, ou aucun produit du tout.
Toujours bloqué ? Envoyez au support l'adresse de votre page et précisez quel créateur de site vous utilisez — les deux informations qui déterminent tout ce qui précède.