Customize floating widget


Website widgets can be customized on the website they are placed. Cloudbeds doesn't provide support for web development so please ask your web developer to help you customize the widget. This article provides some CSS code that might help you specifically with floating widget.

Change the position of the widget to bottom

Per default floating widget is positioned on the top of your website. To move it on the bottom of your website add these styles between <body> and </body> tags (in your website).

.CloudBedsWidget.floatWrapper {
padding-bottom: 0;
.CloudBedsWidget .float_bg2 {
position: fixed !important;
bottom: 0;
border-bottom: none;

Customize the look of the floating widget

By customizing this code you can change the look of floating widget. Add this CSS to the source code of your website where the widget is placed.

.float_bg2 {
background: #fff;
width: 100%;
z-index: 50001;
left: 0;
top: 0;
display: block;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
border: none;
border-bottom: 2px solid #fff;
box-shadow: 0 3px 5px #fff;

With this code, you can change the look of "Search" button on the floating widget.

.CloudBedsWidget .widgetHotelsForm input[type=button] {
border-radius: 0 !important;
background: #d2a917;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: #fff;
padding: 4px;
min-width: 100px;
margin-top: -5px;
text-shadow: none;
white-space: normal;
cursor: pointer;

For any other customization ask for help from your experienced web developer.

Have more questions? Contact Support


Powered by Zendesk