Vous avez un moteur de reservation ? Vous avez aussi une page Facebook? Ça tombe bien, vous êtes sur le bon Tuto! L’objectif du jour : Ajouter un widget « Chat » en moins de 10 minutes sur votre site internet et dans votre moteur de réservation!
Non, je ne parle pas de celui-là! 😉
Un Widget Chat pour augmenter vos réservations :
Vous avez sans aucun doute déjà vu, sur l’un des sites de vos confrères, une bulle de « Discussion instantanée » pour rentrer en conversation avec la réception, sans passer par le téléphone ou par le mail.
Dans les salons, des entreprises vous proposent des solutions de la sorte [parfois avec des essais gratuits] sur des forfaits mensuels, avec des tarifs avoisinants les 10€ ou 20€ /Mois!
Pour avoir une première approche des avantages, des atouts mais aussi des inconvénients de, chez hôtellerie.digital, nous vous proposons une parade totalement Gratuite!
6 Bonnes raisons d’installer cette fonctionnalité :
- La personne sera rassurée et aura la possibilité de converser avec vos équipes avant son séjour!
- Le prospect n’a plus besoin de passer par mail pour ses questions, il pourra avoir sa réponse en instantanée!
- Si vous avez un ChatBot déjà en place (Possibilité de réserver par Messenger) il fonctionnera
- Vous (Responsable de la gérance) et les réceptionnistes habilités pourrez répondre avec l’application Facebook Pages / Facebook Messenger
- C’est Gratuit!
- Lire ce Tutoriel prend bien plus de temps que de faire l’opération… [Vous me suivez? On y va?]
Où implanter ce chat?
L’opération que nous allons voir nous permettra d’afficher, sous forme de bulle, la possibilité aux internautes de communiquer avec vous. Nous vous suggérons de mettre en place cette solution :
- Sur votre site internet,
- Dans le moteur de reservation,
Recommandations : Attention toutefois à ne pas « Surcharger » le site. Vous pouvez très bien, de la même manière qu’ici, l’implanter uniquement sur la page chambre, où sur la page
Astuce : vous aurez la possibilité de personnaliser la couleur d’affichage ainsi que le message de bienvenue au code couleur de votre établissement!
Comment mettre en place cette fonctionnalité?
C’est un jeu d’enfant: Vous n’avez qu’à vous connecter à votre page facebook en tant qu’administrateur et trouver, dans la partie « Paramètres » l’onglet « Plate-forme Messenger » qui se trouve dans le menu à gauche.
Descendez puis trouvez plus bas: « Plug-in de discussion client » … Il ne nous reste plus qu’à le configurer!
Étapes suivantes:
Laissez-vous guidez puis RDV à la première étape de la configuration : Vous devrez choisir en Haut à gauche la langue. Vous aurez également la possibilité de définir le message d’accueil à afficher sur votre page, n’hésitez pas à mettre un petit émoticône!
Vous devrez, pas la suite, définir les URLS autorisées à afficher votre widget. Celles-ci doivent être en HTTPS!
Dans notre cas, nous mettrons l’adresse du site officiel, puis le début de celle de notre moteur de réservation.
Ça y est! Vous avez fait tout ce qu’il fallait pour exploiter l’outil!
Comment implanter le script dans Mon site?
Si vous souhaitez inclure cette fonctionnalité sur la totalité des pages de votre site internet, essayer de placer le bout de code dans un élément qui est déjà en place sur l’intégralité des pages (le footer par exemple) Attention à ne pas le placer dans le header. Le bout de code que vous avez reçu, devrait ressembler à ça :
Il faut impérativement le mettre entre les balises <body> </body> de votre site internet.
WordPress :
Si vous avez un site WordPress, vous pouvez vous rendre dans « Apparence>>widget » et trouver une zone éditable HTML.
Vous avez aussi la possibilité, d’aller dans les paramètres du thème pour changer la page « footer.php » et ajouter les lignes avant le </body>
Autres CMS :
Beaucoup de CMS vous laissent la possibilité d’ajouter un bout de code HTML de nos jours. Si ce n’est pas le cas, il faudra demander à votre développeur de le faire pour vous. (Si le développeur n’est plus sur le marché, n’hésitez pas à nous contacter, l’opération ne prend que quelques minutes!)
Comment implanter le script dans Mon Booking Engine?
De la même manière, AvailPro, Reservit (pour les plus connus) Vous laissent la possibilité d’intégrer des lignes de script.
Availpro : RDV dans le paramétrage de votre moteur de reservation, vous aurez la possibilité d’ajouter, de manière librement, un bout de code. (Nous n’avons malheureusement pas d’accès hôtel pour une capture d’écran…) Si un hôtelier nous laisse la possibilité de l’intégrer pour lui, nous illustrerons l’article avec ce dernier – en retirant les infos de l’hôtel en fonction de l’appréciation- !
Reservit : RDV dans l’onglet « Configuration » >> « Tags de Statistique » >> « Gestion »
Coller le code et cocher les cases qui vous intéressent (comme ci-dessous)
Ça ne fonctionne pas..?
Pour vous assurer que cela fonctionne, je vous encourage à mettre dans la liste des sites autorisés « https://codepen.io » et a créer un test ici, il suffit de coller le code dans la partie de gauche |html| : https://codepen.io/pen/
Mon site est traduit en Plusieurs Langues : comment faire?
Aucun souci : Vous aurez deux paramètres (Appelés variables) à changer dans le code Source:
- Ligne 7: js.src = il faudra changer fr_FR par en_US (pour anglais)
- Lignes 15/16 : logged_in_greeting et logged_out_greeting = Par la traduction en Anglais.
Et après, que faire?
• Si ce n’est pas encore le cas, nous vous recommandons d’installer l’application « pages » de facebook sur votre téléphone et d’ajouter, dans l’onglet « rôles » des préférences de votre page facebook, les collaborateurs habilités à utiliser cette fonctionnalité.
L’idéal est de répondre en moins de 30 secondes à un client!
• Définir des messages de bienvenue (Part 2) rendez-vous dans Facebook >> Paramètres >> Messagerie >> Assistant de réponse Vous aurez la possibilité de
• Pour aller plus loin, nous encourageons les aventureux à afficher le widget en fonction de l’heure, grace à des plugins type :
—html—
<div class= »messenger> … le code que l’on a créé précédemment est à coller ici </div>
— css —
.on {}
.off {display:none}
— Script type —-
<script>
var myDate = new Date();
var hours = myDate.getHours();
if (7 <= hours && hours < 18) // 5-9 jour
{document.getElementById(« messenger »).className = ‘on’;}
else if (18 <= hours || hours < 7) // 22-5 nuit
{document.getElementById(« messenger »).className = ‘off’;}
</script>
