The Cloudbeds PMS has a new look! As we work to update our knowledgebase some steps in our articles might not match our new design. Click here for more details.

Cloudbeds Booking Engine - Add Text, Images, Hyperlinks and Buttons

Follow

Add text with additional information, images and other elements to your Booking Engine by using the code in this article.

  • For the Custom Meta Tags applicable code: Use the Gallery Design tab.
  • For color customization: Each color has a different code. If you need any reference, use the Color Picker tool to get your preferred color code.
Add custom text under the Search button

Add the following code to Custom Meta Tags section and change the color of the text by replacing the code #ff000 with your preferred color code:

<style>
.button-container:after {
  content: "YOUR TEXT HERE";
  color: #ff0000;
display: block;
}
</style>
Add custom text under the Book Now button (policies, rules etc)

Add this code to Custom footer for your hotel booking page and duplicate for all desired languages:

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '<br/> YOUR CUSTOM TEXT';
NewEl.className = "message-under-booknow";
NewEl.appendAfter(document.querySelector('.book_now'));
</script>
<style>
.message-under-booknow {
font-size: 12px;
text-align: center;
}
</style>
Add custom text under Bank Transfer Payment Method

Add this code in the Meta Tags section. The text added will be the same on all booking engine languages:

<style>
label[for="ebanking"]>a:after {
  content: "text here";
  display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
  vertical-align: top;
}
</style>
Add custom text under Credit Card Method

Add this code in the Meta Tags section. The text added will be the same on all booking engine languages:

<style>
label[for="card"]>a:after {
  content: "text here";
  display: block;
}
/*add below code so options won't align bottom*/
.md-radio-inline .md-radio {
  vertical-align: top;
}
</style>
Add Debit Card payment method

Add this code in Custom footer for your hotel booking page to add Debit next to the Credit card:

<script type="text/javascript">
document.querySelector('#reservationDetailsForm > div.payment_method > div.md-radio-inline > div:nth-child(2) > label > a').innerHTML = 'Debit/Credit Card';
</script>
Click to copy
Add text with link Get your promo code here under Have a promo code?

Add this code to the Custom footer for your hotel booking page and duplicate for all the languages:

  • Replace text Get your promo code here
  • Set a correct link to where customer can get a code instead of http://www.linktoyourcodehere
<script type="text/javascript">Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }, 
false;var NewEl = document.createElement('p');NewEl.innerHTML = '<a href="http://www.linktoyourcodehere." style="text-decoration:underline;">Get your promo code here</a>';
NewEl.className += "text-center";NewEl.style.fontSize = '12px';NewEl.appendAfter
( document.querySelector('.promo-code'));
</script>
Add text above calendar/available rooms list

Put the code below to in the Custom footer for your hotel booking page section and change the text highlighted red:

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement("h1");
NewEl.innerHTML = "</br> Please note that the minimum length of stay is 2 days";
NewEl.className += "text-center";
NewEl.style.fontSize = "19px";
NewEl.appendAfter( document.querySelector(".message_container"));
</script>
  • Control font size by changing number in line:
NewEl.style.fontSize = '19px';
  • Change the position of the text by changing 'NewEl.className += "text-left";' line to center or right.
Add the Visa/Mastercard Logo to the Payment Page

Copy and paste the code to in the Custom Meta Tags section. Replace the ADD URL HERE with a valid image link, for example from Google Images:

<style>
.payment_method>.md-radio-inline::after {
 content: "";
 display: block;
 width: 174px;
 height: 58px;
 background-image: url(ADD URL HERE);
 background-size: cover;
</style>
Add Visa/Mastercard/AMEX/Discover/Diner credit card logo to payment page

Copy and paste the code to the Custom Meta Tags section:

<style>
.payment_method>.md-radio-inline::after {
 content: "";
 display: block;
 width: 216px;
 height: 29px;
 background-image: url(https://www.cloudbeds.com/wp-content/uploads/2018/05/ccs.png);
 background-size: cover;
}
</style>
Add Scroll Up button

Save the following code in the Custom Meta Tags section:

<div>
<button onclick="topFunction()" id="myBtn" title="Scroll up"> Scroll Up </button>
</div>

<style>
html {
scroll-behavior: smooth;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 999999; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #26A69C; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
box-shadow: 0.5em 0.5em 0.5em rgb(11, 70, 140, 0.5);
}

#myBtn:hover {
  background-color: #12234E; /* Add a background color on hover */
}

</style>

<script type="text/javascript"> 
//Get the button
var mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
} 
</script>
Click to copy
Add a blinking text under Choose Room - Confirm Reservation bar

Add the following code in the Custom Footer section:

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('p');
NewEl.innerHTML = '- Please select the number of Rooms from the drop down - <br> <i>Go for the discount prices';
NewEl.className += "custom-blink-message";
NewEl.style.fontSize = '20px';
NewEl.appendAfter(document.querySelector('#wizard'));
</script>
<style>
.custom-blink-message {
animation: blink 3000ms infinite linear;
font-weight: bold;
text-align: center;
margin: 2%;
color: #2389C9;
}
@keyframes blink {
 50% {
   opacity: 0;
 }
}
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
Add a Video under the Choose a Room bar

Add the following code under Custom Footer for your hotel booking page section and change the video URL to any other by adding a new link in NewEl.src highlighted below.

<script type="text/javascript">
Element.prototype.appendAfter = function (element)
{ element.parentNode.insertBefore(this, element.nextSibling); }
, false;
var NewEl = document.createElement('iframe');
NewEl.className += "iframe-video";
NewEl.allow = 'autoplay';
NewEl.src = "https://www.youtube.com/embed/mPqWoQCREA0?autoplay=1";
NewEl.appendAfter( document.querySelector('.message_container'));
</script><style>
.iframe-video {
width: 100%;
height: 480px;
border: none;
}
</style>
Saurabh Mansion [Demo] - San Diego, India - Best Price Guarantee - Google Chrome
Add a centered image / Title Image at the top of the page

To add a centered image and a centered image at the top of your booking engine, convert the image into a URL to apply to the code.

Example:

Add the following code in the Custom Header section and replace both Image Banner and Title Image URL highlighted in red:

<style>
/* Banner image code */
.new-heade-wrap{
    margin: 0;
}
.new-heade-wrap .header{
    background: #fff;
    padding: 15px 0 8px;
    webkit-box-shadow: 0px 2px 5px -4px #050505;
    -moz-box-shadow: 0px 2px 5px -4px #050505;
    box-shadow: 0px 2px 5px -4px #050505;
    position: relative;
    z-index: 1;
}
.new-heade-wrap .header #branding {
    display: block;
    text-align: center;
}
.new-heade-wrap .header #branding img{ 
    height: 100px;
}
.new-heade-wrap .banner{
    height: 180px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.new-heade-wrap .header #register {
        width: 48px;
        height: 48px;
        display: block;
        background: #a57841;
        border-radius: 6px;
        text-align: center;
        text-align: center;
        position: relative;
        margin: 10px auto 30px;  
        &:hover,
        &:active,
        &:focus{
            background: #634521;
        }      
    }
    .new-heade-wrap .header #register .icon{
        display: inline-block;
        vertical-align: top;
        width: 18px;
        height: 18px;
        margin-top: 8px;
    }
    .new-heade-wrap .header #register .txt{
        max-width: 100%;
        display: inline-block;
        vertical-align: top;
        margin-top: 7px;
    }
@media only screen and (min-width: 768px) {
        .new-heade-wrap .header #register {
            position: absolute;
            right: 20px;
            top: 11px;
        }
    }
</style>
<div class="new-heade-wrap">
    <div class="header">
<div id="cusregisterbtn"></div>
        <div id="branding" title="The Wind">                
            <img src="IMAGE URL HERE" alt="TITLE IMAGE" title="TITLE IMAGE">
        </div>
    </div>
    <div class="banner" style="background-image: url(IMAGE BANNER URL HERE);">
    </div>
</div>

Make a collage of all the images into one to add multiple images. If you add several images/ URLs one after the other on the above code, it may not look nice when your guest is accessing from a mobile device.

Make the Hotel Name clickable

To allow your guests to click on your hotel name and be redirected back to the website, apply the following codes:

Step 1: Add this to Custom Footer section and replace google URL with your URL:

<script type="text/javascript">
document.getElementsByClassName('hotel_name margin-left-160')[0].addEventListener('click', function(){ window.open('https://www.google.com', '_blank') });
</script>
Click to copy

Step 2: Add this to Custom Meta Tags section:

<style>
 div.page-header.page-header-wrap.navbar > div > h1{
cursor: pointer
}</style>
Click to copy
Make the Hotel Logo clickable
  1. Add the following code in the Custom Meta Tag section. This will change the mouse cursor to hand when you hover over the logo:
<style>
.logo {
cursor: pointer;
}
</style>
Click to copy
  1. Add the following code in the Custom Footer of the hotels page:

Replace the red text to any other link that you want to redirect your guests. This code will open the website in a new browser window:

<script type="text/javascript">
document.getElementsByClassName('logo')
[0].addEventListener('click', function(){ 
window.open('https://www.google.com', 
'_blank') });
</script>
[Demo] Mountain Resort & SPA - Kyiv, Ukraine - Best Price Guarantee - Google Chrome
  1. Add the code below in the Custom Footer of the hotel booking page section to redirect guests to the personal (or main) website of the property after clicking on the logo. Replace the red text to any other link that you want to redirect your guests.

    This code will open the website in the same browser window:
<script>
document.getElementsByClassName('logo')
[0].addEventListener('click', function() 
{window.location.href = 
'https://www.google.com';});
</script>

What to do if my customization code is not working?

If the desired customization code is not working as expected, try the following troubleshooting steps:

  • Confirm that the code has been correctly copied and pasted, without typos or unnecessary/extra spaces.
  • Paste the code in the correct field, in the Customize the Booking Engine section (For example: Some codes should be placed in the Custom header section, and some other codes need to be pasted in the Custom footer section)
  • Save your changes after the customization codes are added to the correct fields, and reload/open the Booking Engine on your browser to see the effect
  • The List Design View is no longer supported in Cloudbeds PMS. Find more details here.

Reach out to our Support Team if none of the solutions above fix the issue.

Powered by Zendesk