UPDATED

We recommend using your own "Book Now" button when implementing the Booxi Widget. You will have more control on the design and the integration of the widget through your own button is explained in the video below :

In this video, as an example, the steps in order to change the green "Book Now" button to your own button are the following :

From the website editor, scroll down to the button line:
<div class="bx_bn_button use_bx_ico" onclick="booxiController.book();">Book Now</div>


Paste this line before (the example button of this video):
<button type="button" class="w3-button w3-red w3-margin-bottom" onclick="booxiController.book();">Book Now</button>


Both uses the booxiController.book(); function


Remove the line:
<div class="bx_bn_button use_bx_ico" onclick="booxiController.book();">Book Now</div>

Click Run, show the new button, click on it

PREVIOUSLY

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 :

<script type="text/javascript">
(function(d){
var ss, js, id = 'booxi-js-api';
if(d.getElementById(id)){return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = 'https://www.booxi.com/api/bxe_core.js';
d.getElementsByTagName('head')[0].appendChild(js);
ss = d.createElement('link'); ss.type = 'text/css'; ss.rel = 'stylesheet';
ss.href = 'https://www.booxi.com/api/style.css';
d.getElementsByTagName('head')[0].appendChild(ss);
}(document));

window.bxApiInit =  function()
{
   bxe_core.init({
           bxLang: 'eng',
           bxExtWin: 'false',
           customize_button: {
           button_color:'#D792A1',
           text_color:'#333333'
       }
   });
};
</script>

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?