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.

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

# 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 using null or undefined parameter.

Example 1.

window.$bnbFormsBookingWidget || (
   function(d,s){
      window.$bnbBookingWidgetConfig = {
         uid:"123123",
         src:"https://bnbforms.com/example",
         lang:"en_US",
         button: null
      };
      ...
   }
)(document,"script");

Example 2.

window.$bnbFormsBookingWidget || (
   function(d,s){
      window.$bnbBookingWidgetConfig = {
         uid:"123123",
         src:"https://bnbforms.com/example",
         lang:"en_US",
         button: undefined
      };
      ...
   }
)(document,"script");

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