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