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 Text, Images, Hyperlinks, and Buttons
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 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 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 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 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>
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>

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.


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>

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>

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>
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>

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](https://media.screensteps.com/image_assets/assets/005/572/466/original/8674f368-70ab-4cac-9230-abec0d87efe1.png)
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.
Add Clickable Links
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>
Step 2: Add this to Custom Meta Tags section:
<style>
div.page-header.page-header-wrap.navbar > div > h1{
cursor: pointer
}</style>
- 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>
- 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](https://media.screensteps.com/image_assets/assets/005/572/472/original/90df0a57-84b6-4a23-8836-8e982ffd5337.png)
- 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.