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

  • 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]‘
});
};

Did this answer your question?