Hello Softinn CMS user!
We have released a feature whereby you can add the chat box to your Hotel website in Softinn CMS 🙂
With the presence of chat box, it gives your hotel an opportunity to improve your customer service experience. You can increase the communication between your guests. In addition, you can get connected with the potential customer by replying to their inquiries instantly.
It will make your Hotel website more user-friendly and you can entertain your guest anytime and anywhere!
Check out the video & guidelines below to find out how to add a chatbox to your Hotel website in Softinn CMS :
Steps to Add Chatbox in Softinn CMS:
Follow the guidelines below:
Step 1: Login to Softinn CMS
Step 2 : Select the right property
Step 3 : On the left panel, go to ‘Developer Tools‘.
Step 4 : Click on ‘HTML‘
Notes:
- Click on ‘Get Tips‘ for some tips using HTML Tool in Softinn CMS .
- Click ‘Check for Example‘ for a few examples you can use with HTML Tool.
Step 5 : Click on ‘Option‘ icon and choose ‘Create New‘
Step 6 : Insert Name for your custom script
Step 7 : Insert your code on Script
Notes:
- Softinn has constructed a modified code for the chatbox. The modified code is shared as below. You may just copy and paste the modified code to the “Script” column on Softinn CMS. And then, only update your Page ID to the modified code
- You can get your Page ID from your Facebook page
- Login to your Facebook Page
- Click ‘About’
- Go to ‘Page Transparency’
- Copy the ‘Page ID’
- This is the modified code :
<div class="hotel-fb-widget">
<div class="fb-chat-window" id="fbChatWindow">
<div class="fb-chat-header">
<div class="fb-hotel-avatar">🏨</div>
<div>
<h4>Front Desk Support</h4>
<p>● Online on Messenger</p>
</div>
<button class="fb-close-btn" onclick="toggleFBChat()">×</button>
</div>
<div class="fb-chat-body">
<div class="fb-message bubble-hotel">
Hi there! 👋 Welcome to our hotel page. Type your booking question below to chat with us on Messenger!
</div>
</div>
<div class="fb-chat-footer">
<input type="text" id="fbUserInput" placeholder="Type a message..." onkeypress="handleFbKeypress(event)">
<button onclick="sendFBMessage()">
<svg viewBox="0 0 24 24" width="20" height="20" fill="#0084FF">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
</svg>
</button>
</div>
</div>
<button class="fb-btn" onclick="toggleFBChat()">
<svg viewBox="0 0 24 24" width="24" height="24" fill="#ffffff">
<path d="M12 2C6.48 2 2 6.14 2 11.25c0 2.91 1.45 5.51 3.73 7.18.19.14.3.36.3.59l-.04 2.1c-.02.63.62 1.09 1.19.82l2.36-1.12c.16-.08.34-.1.52-.06 1.25.29 2.57.44 3.94.44 5.52 0 10-4.14 10-9.25S17.52 2 12 2zm1.14 11.95l-2.09-2.23-4.07 2.23 4.48-4.76 2.1 2.23 4.06-2.23-4.48 4.76z"/>
</svg>
<span class="fb-btn-text">Chat with Us</span>
</button>
</div>
<style>
.hotel-fb-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999;
font-family: Arial, sans-serif;
}
.fb-btn {
display: flex;
align-items: center;
gap: 10px;
background-color: #0084FF;
color: white;
border: none;
padding: 12px 18px;
border-radius: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
font-weight: bold;
font-size: 15px;
cursor: pointer;
transition: transform 0.2s ease;
}
.fb-btn:hover {
transform: scale(1.05);
background-color: #006BDE;
}
.fb-chat-window {
display: none;
width: 310px;
background: #f0f2f5;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,0.2);
margin-bottom: 15px;
overflow: hidden;
animation: fbFadeIn 0.3s ease;
}
.fb-chat-header {
background: #0084FF;
color: white;
padding: 15px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.fb-hotel-avatar {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.fb-chat-header h4 {
margin: 0;
font-size: 15px;
}
.fb-chat-header p {
margin: 2px 0 0;
font-size: 12px;
color: #e0f0ff;
}
.fb-close-btn {
position: absolute;
top: 12px;
right: 15px;
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
.fb-chat-body {
padding: 15px;
height: 160px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.fb-message {
background: white;
padding: 10px 14px;
border-radius: 15px;
max-width: 85%;
font-size: 14px;
line-height: 1.4;
color: #1c1e21;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.fb-chat-footer {
background: white;
padding: 10px;
display: flex;
gap: 8px;
align-items: center;
border-top: 1px solid #e4e6eb;
}
.fb-chat-footer input {
flex: 1;
padding: 9px 12px;
border: 1px solid #ccd0d5;
border-radius: 20px;
font-size: 14px;
outline: none;
background: #f0f2f5;
}
.fb-chat-footer button {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
@keyframes fbFadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width: 480px) {
.fb-btn-text { display: none; }
.fb-btn { padding: 12px; }
.fb-chat-window { width: 280px; }
}
</style>
<script>
function toggleFBChat() {
var chatWin = document.getElementById('fbChatWindow');
chatWin.style.display = (chatWin.style.display === 'block') ? 'none' : 'block';
}
function handleFbKeypress(e) {
if (e.key === 'Enter') { sendFBMessage(); }
}
function sendFBMessage() {
// ⚠️ REPLACE WITH YOUR HOTEL'S FACEBOOK PAGE ID
var fbPageId = "XXXXXXXXXXXXXX";
var userInput = document.getElementById('fbUserInput').value;
if (userInput.trim() !== "") {
var encodedText = encodeURIComponent(userInput);
var fbUrl = "https://m.me/" + fbPageId + "?text=" + encodedText;
window.open(fbUrl, '_blank');
document.getElementById('fbUserInput').value = ""; // Clear input box
}
}
</script>Step 8 : Choose ‘Ending of body‘ for Position
Step 9 : Set the status to ‘Active‘
Step 10 : Click on ‘Save Changes’
Hope this helps you to add a chatbox to your Hotel website 🙂
Leave A Comment?