Cloudbeds Booking Engine - 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:

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 the code below to  the Custom header or footer for your hotel booking page section:

• Replace https://www.cloudbeds.com/ with link to your website's
• Change the Back to website text to any other text you prefer
• Change h4 to h1,h2,h3 to change the font size
• Change left to center/right to change the position of the text

<h4 style="text-align:left"><a href="https://www.cloudbeds.com/" target="_blank"><h4><b>Back to website</b></h4></a>

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>

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:

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>

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>

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:

Step 2: Add this to Custom Meta Tags section:

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:

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

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