Customize the Book Now button and form colors

You can customize the default Book Now button, for example, its color and text, or completely hide it if you want clients to open the booking widget by clicking on your custom button.

book now button

To customize the Book Now button, go to the Widget Script:

widget script parameters

# Book Now button parameters

The default Book Now button parameters are as the following:

button: {
   bgColor:"#1F4ACE",    <-- background color
   text:"Book Now",      <-- text
   position:"top-right", <-- position
   tOffset:"100px"       <-- top offset
}

You can customize them:

bgColor – to change the background color, copy the needed code color and paste it: Hex Colors.
text – optionally replace the “Book Now” button text with your custom one.
position – change the button position using the top-right or top-left parameters.
tOffset – the space between the button and the upper part of the site. If not set, 100px is default.

Just open the code script via Widget Script and replace default parameters with your custom ones.

# Book Now button styles

You can also add custom CSS code to style the “Book Now” button. You can add this code either in your website styles or right after the script code. Here is an example of how to add styles after the widget script code:

<!--Start of the Booking Widget script-->
<script type="text/javascript">
...
</script>

<!--Start of custom styles-->
<style>
.bnbforms-book-button {
    color: #FFF;                     <-- text color
    font-family: "Open Sans", Arial; <-- font
    padding: 10px 20px;              <-- space between text and borders
    border-radius: 6px 0 0 6px;      <-- border radius
}
</style>

# How to hide the Book Now button

You might want to hide the Book Now button in case, for example, you want to use any other website button for opening the Book Now widget by BNBForms.

You might hide the button in any preferable way, for example, using null or undefined parameters.

Example 1.

window.$bnbFormsBookingWidget || (
   function(d,s){
      window.$bnbBookingWidgetCofig = {
         uid:"123123",
         src:"https://bnbforms.com/example",
         lang:"en_US",
         button: null
      };
      var src = "https://cdn.bnbforms.com/v1/main.js";
      var $=d.createElement(s),
      e=d.getElementsByTagName(s)[0];
      $.async=true;
      $.setAttribute("charset","utf-8");
      $.src=src;
      $.type="text/javascript";
      e.parentNode.insertBefore($,e)
   }
)(document,"script");

Example 2.

window.$bnbFormsBookingWidget || (
   function(d,s){
      window.$bnbBookingWidgetCofig = {
         uid:"123123",
         src:"https://bnbforms.com/example",
         lang:"en_US",
         button: undefined
      };
      var src = "https://cdn.bnbforms.com/v1/main.js";
      var $=d.createElement(s),
      e=d.getElementsByTagName(s)[0];
      $.async=true;
      $.setAttribute("charset","utf-8");
      $.src=src;
      $.type="text/javascript";
      e.parentNode.insertBefore($,e)
   }
)(document,"script");

# How to open the booking widget by any other website button or link

To open the widget by any of your custom buttons or links, you need to add the custom CSS class bnbforms-bookingwidget-button to the preferable button or link on your website.

For example: by clicking on this button with the custom class added, the booking widget will be opened.

book now button custom class bnbforms

# How to customize widget colors

To customize colors of specific parts of the widget, go to Appearance > Customize > Colors in your BNBForms dashboard.

Here are a few examples:

bnbforms colors