How to Fully Customize Your Book Now Button

Developers    |   November 14, 2016

This article presents technical notes on how to fully customize the look and feel of your booxi book now widget, as well as some behaviours. Remember that these are optional and not required to use the booxi Book Now widget and get a perfectly working Book Now button.

  • Full Button UI Customization
  • Redirect URL (successful booking or abort)
  • Add Analytics

Customize Your Button Appearance

Here is a list of available button style options, which you can customize using javascript properties.

  • button_color : css background-color
  • text_color : css text color
  • border : css border style
  • hover_button_color : on hover background-color
  • hover_text_color : on hover text color
  • hover_border : on hover border style
  • border_radius : css border-radius
  • button_height : css height
  • line_height : css inline-height for text vertical centering
  • font_size : css font-size button text
  • font_weight : css font-weight : like bold
  • font_family : css font family
  • show_icon : true or false to display icon
  • icon_path : url to image for icon
  • use_important : true or false applies css !important to overrides

Look for the bxe_core.init javascript method, add the customize_button property, which should be a javascript object (property / value pairs) using the properties listed above. These values are actual css values, for example 18px which is a valid CSS value for font_size. Example :

bxe_core.init({

bxLang: ‘eng’,
btn_text_eng: ‘Book My Appointment’,
bxExtWin: false,
customize_button:
{
button_color:"#D792A1",
text_color:"#333333"
}
});

Customize Your Button Behaviors

You can customize some behaviors of your button using external parameters.

  • Referrer url (document_domain): The URL from which the web user is originating from.
  • onBooked url (url_booked): If defined, the web user will be redirected to this URL upon successful booking.
  • onCancel url (url_cancel) : If defined, the web user will be redirected to this URL upon aborting the current booking process.
  • Google Analytic ID (custom_ga): Allows you to provide your own analytics id. To be instanced in book now.

Here is how you can use these.

window.bxApiInit =
function()
{bxe_core.init({
bxLang: ‘eng’,
btn_text_eng: ‘Book your appointment’,
bxExtWin: true,
document_domain:’wix.com‘,
url_booked:’[Add your successful booking url]‘,
url_cancel:’[Add your cancel/abort booking url]‘,
custom_ga:’[Add your Google Analytics ID]‘
});
};

That’s it for now. More great things to come with booxi!

Astrid Bertout
Digital Marketing | Customer Success
The Importance of a Website
Business Tips   |   Oct 19, 2016
You Can Now Customize Pricing and Duration per Staff
Product Features   |   Nov 18, 2016