Book Now for WordPress

booxi WordPress Widget
Version 0.2 Beta
Requires: WP Ver 4+
Updated: 2015-07-06
The booxi WordPress widget is a plugin that allows you to easily integrate the booxi online booking Book Now button in your WordPress website. The use of this widget requires a booxi account with a valid API Key.
Integration instructions
  1. Download the plugin (version 0.2 Beta)
  2. You must upload the plugin .zip file to your WordPress site. To do this, download it from this page using the Download button on your left and save it on your computer. Now go to your WordPress dashboard, select the Plugins menu, and the option Installed Plugins. From your installed plugins list, select the option Add New. Click on the button Upload a plugins located at the top of the available plugins list.
  3. Click on Choose file to upload the plugins file from your computer to WordPress, and click on Install Now.
  4. Next go back to your installed plugins, by selecting the option Installed Plugins from your WordPress dashboard’s Plugins menu. You must now Activate the booxi widget plugin.
  5. Once you’ve activated the plugin, you get a new menu : booxi Widget which appears under Settings in your WordPress dashboard. You must access this menu to configure your Book Now button.
  6. You must set a Default API Key value, which you can find in your booxi account, My Business section, Details subsection and fields API Key.
  7. Make sure to select a default language and a default text label, which will be used to dispaly the Book Now button.
  8. Your button is ready to use. You can add it as a widget to your navigation or simply add it to posts using the shortcode.
Book Now as a menu widget
In the Appearance menu of your WordPress dashboard, the Widgets section you will have a new widget at your disposal. The booxi Book Now widget can be added to any menu of your theme that supports widgets. Simply drag and drop your booxi Book Now widget where you want it. When a new widget is created it automatically takes the default settings; however, you are free to customize these for each instance of the button. You may define :
booxi Api Key : You may provide a different Api Key here if you accept online booking for multiple booxi business accounts.
Button Language : You can set the language for the booxi popup. We currently only offer the online booking in English and French.
Button Text : Is the label that appears on the button.
Add the Book Now button to posts & pages
It is possible to also add the booxi Book Now button to a post or page by using a simple shortcode : [book-now-button] to your post or page text. Wordpress will replace the code with a Book Now button.

The button will be generated by using the default settings, however you may customize each instance of the button much like the widget usage. To do so simply add any of the following optional attributes to the shortcode :
api_key : Attribute to use a different API Key.
lang : Attribute which defines the language.
button_text : Attribute that allows you to set a custom button label.
Example Usage : [book-now-button api_key= "API_KEY_CODE" lang= "fre" button_text= "Book Now"].
Customization Options
Several UI customizations options are available to allow you to match the Book Now button with your website colors and style.
Widget Display Mode
When you press the Book Now button, the booxi Book Now widget appears ontop of your web site. There are two display modes available :
Display in page : The widget is overlayed on top of your site.
Display as popup : The widget will be displayed as an external popup window.
Appearance Settings
It is possible to customize the button’s appearance; for example the sizes or the colors.
Button Icon : You may choose to show or hide the small book now icon which is next to the label.
Border Radius: Customize the roundness of the button’s corners.
Font Size: Allows you to change the size of the text on the button.
Button Height: Allows you to change the height of the button.
Padding Left / Right: Allows you to set a left and right space between the button edges and text. The width of the button is adjusted to the length of text.
Color Settings
You may set the text color, background color and border color of your button.
Text Color: For the color of the text on the button.
Background Color: For the color of the button itself.
Border Color: For the 1 pixel border color around the button.
Button Hover Color
A button hover state is when the mouse cursor is above the button, its purpose is to highlight the current selection. It is possible to customize the color for the hover state.
Hover Text Color: For the color of the text on the button when the mouse cursor is over the button.
Hover Background Color: For the color of the button itself when the mouse cursor is over the button.
Hover Border Color: For the 1 pixel border around the button. when the mouse cursor is over the button.
Custom CSS
For site owners who are familiar with CSS, we’ve added the option to define a block of CSS that will be added to the button. You may define a set of CSS for the normal state, and one for the hover state. This feature is reserved for experienced users.