Do you have a booking system? You also have a Facebook page? You’re on the right Tuto! Today’s objective : Add a “Chat” widget in less than 10 minutes on your website and in your booking system!
No, I’m not talking about that one!
A Chat Widget to increase your bookings :
No doubt you have already seen, on one of your fellow sites, an “Instant Chat” bubble to get into a conversation with the reception, without going through the phone or email.
In the salons, companies offer you such solutions [sometimes with free trials] on monthly packages, with rates around 10€ or 20€ /Month!
To have a first approach of the advantages, the assets but also the disadvantages of, at hôtellerie.digital, we propose you a totally Free parade!
6 Good reasons to install this feature :
- The person will be reassured and will have the possibility to talk with your teams before his stay!
- The prospect no longer needs to send an email for his questions, he will be able to get his answer instantly!
- If you have a ChatBot already in place (Possibility of booking by Messenger) it will work
- You (Manager) and the authorized receptionists will be able to answer with the Facebook Pages / Facebook Messenger application
- It’s Free!
- Reading this Tutorial takes much more time than doing the operation… [Are you following me? let’s go]
Where to place this chat?
The operation we are going to see will allow us to display, in the form of a bubble, the possibility for Internet users to communicate with you. We suggest that you set up this solution:
- On your website,
- In the booking system,
Recommendations: Be careful not to “overload” the site. You can very well, in the same way as here, implement it only on the room page, or on the page
Tip: you will be able to customize the display color and the welcome message to the color code of your establishment!
How to set up this feature?
It’s easy: Just log in to your Facebook page as an administrator and find the “Messenger Platform” tab in the left-hand menu in the “Settings” section.
Scroll down and find “Client chat plug-in” … Now we just have to configure it!
Next steps:
Let yourself be guided and then go to the first step of the configuration: You will have to choose the language in the upper left corner. You will also have the possibility to define the welcome message to be displayed on your page, don’t hesitate to put a little emoticon!
You will then have to define the URLS allowed to display your widget. These must be in HTTPS!
In our case, we will put the address of the official website, then the beginning of the one of our booking system.
That’s it! You’ve done everything you need to do to use the tool!
How to implement the script in my website?
If you want to include this functionality on all the pages of your website, try to place the code in an element that is already in place on all the pages (the footer for example) Be careful not to place it in the header. The piece of code you received should look like this:
It is imperative to put it between the <body> </body> tags of your website.
WordPress:
If you have a WordPress site, you can go to “Appearance>>widget” and find an HTML editable area. You also have the possibility, to go to the theme settings to change the page “footer.php” and add the lines before the </body>
Other CMS :
Many CMS let you the possibility to add a piece of HTML code nowadays. If not, you will have to ask your developer to do it for you. (If the developer is no longer on the market, do not hesitate to contact us, the operation only takes a few minutes!)
How to implement the script in My Booking Engine?
In the same way, AvailPro, Reservit (for the most known) let you the possibility to integrate script lines.
Availpro: Go to the settings of your booking system, you will be able to add, freely, a piece of code. (Unfortunately, we do not have access to the hotel for a screen capture…) If a hotelier lets us integrate it for him, we will illustrate the article with it – by removing the information of the hotel according to the appreciation-!
Reservit : Go to the tab “Configuration” >> “Statistics Tags” >> “Management”
Paste the code and check the boxes that interest you (as below)
It doesn’t work…?
To make sure it works, I encourage you to put in the list of authorized sites “https://codepen.io” and create a test here, just paste the code in the left part |html|: https://codepen.io/pen/
My site is translated into different languages: how do I do it?
No problem : You will have two parameters (called variables) to change in the Source code:
- Line 7: js.src = you will have to change fr_FR by en_US (for English)
- Lines 15/16: logged_in_greeting and logged_out_greeting = By the translation in English.
And then, what to do?
• If you haven’t already done so, we recommend that you install the facebook “pages” application on your phone and add, in the “roles” tab of your facebook page preferences, the collaborators who are authorized to use this feature.
Ideally, you should be able to respond to a customer in less than 30 seconds!
• Define welcome messages (Part 2) go to Facebook >> Settings >> Messaging >> Reply Wizard You will be able to
•To go further, we encourage adventurous people to display the widget according to the time, thanks to plugins like :
—html—
<div class=”messenger> … the code we created earlier is to be pasted here </div>
— css —
.on {}
.off {display:none}
–— Script type —-
<script>
var myDate = new Date();
var hours = myDate.getHours();
if (7 <= hours && hours < 18) // 5-9 day
{document.getElementById(“messenger”).className = ‘on’;}
else if (18 <= hours || hours < 7) // 22-5 night
{document.getElementById(“messenger”).className = ‘off’;}
</script>
