To implement the booking widget into your website or application, you must first generate its code. The code generator allows you to generate your widget code while applying your desired configurations.
Here are the configuration options offered in the generator:
Choose a hosting region*:
If your booxi URL ends with ".com", your hosting region is North America. If it ends with ".eu", your hosting region is Europe.
Merchant API Key*: this key is used to specify which store (or stores) the booking widget will present upon opening. To find your API key, go to "My Business" > Business Details.
Enable store selection (this setting is only relevant if you have multiple stores):
When enabled, the list of all stores associated with your Head Office will be displayed (except for stores whose online booking setting is disabled). If disabled, the store associated with the provided merchant API key will be preselected.
When enabled, all locations are shown:
When disabled, 1 location is preselected:
Store filter tag (comma delimited as AND): Use this field to filter the list of stores shown in the widget; only stores that have the tag(s) you specify will be displayed.
To apply a tag(s) to a service, go to the "Services" tab > {select a service} > Service details > Booking Filter Tags. For more info, see here.
This filter will only apply if the "Enable store selection" parameter is enabled.
In the above example, I only see the locations that have the "quebec" tag applied to them.
Service filter tag (comma delimited as AND): Use this field to filter the list of services shown in the widget; only services that have the tag(s) you specify will be displayed.
To apply a tag(s) to a service, go to the "Services" tab > {select a service} > Service details > Booking Filter Tags. For more info, see here.
In the above example, I only see the categories that contain the services having the "special" tag (instead of 5), and only 2 services (instead of 15): the two that were tagged "special".
Service Category Id: preselect a specific service category when opening the booking widget. To obtain a service category's ID, go to the "Services" tab > {select a service category} > copy its ID.
In the below example, the category whose ID I entered is preselected.
Service Id: preselect a specific service when opening the booking widget. To obtain a service's ID, go to the "Services" tab > {select a service} > notice the ID under "Service details"
Group Event Id: preselect a specific group event when opening the booking widget. To obtain a group event's ID, go to the "Calendar" tab > {select a group event} > copy the ID in the URL
In the below example, the event whose ID I entered is preselected.
Group Event Date: open the booking widget with a preselected group event date (must be in “YYYY-MM-DD” format), requires entering a service ID. Only group events whose start date occurs on the chosen date will be shown.
*Note: the service ID provided must be of type "Group reservation"
In the above example, I entered 2024-12-13 as the date, and the ID of the "Yoga training" service in the "Service ID" field.
Hide a step: skip the service selection step and/or the staff selection step. To skip the service selection step, enter "Service". To skip the staff selection step, enter "Staff". Skipping the service selection step can be relevant if the service is preselected (i.e. the client won't need to select the service), whereas skipping the staff selection step can be relevant if the service has only 1 assigned staff member (i.e. the client won't need to select the staff member.
Show Service Description: choose whether to display the location, service category and service descriptions, and if so, how.
Expandable: initially collapsed w/button to expand (default value)
Always: always visible
Never: not visible
Location and service category descriptions:
Service category and service descriptions:
Language: specify the language your widget will be presented in. If none is selected, your business' default language will apply. To view your default language, go to the "My Business" tab > Booking Rules > Languages.
Button Text: customize your button text (e.g: "Reserve here")
Default text is "Book Now"
Acquisition Channel Tag: identify the source of the booking. Examples include:
E-commerce
Facebook
Clienteling_app
Line-chat
Google_ad-campaign,summer2024
This parameter only applies to enterprise users, since the data can only be retrieved using webhooks, APIs or automated reports.
Enable Google Analytic TAG (without the leading G-): this field is used to track booking events using Google Analytics 4. For more info, see here.
Redirect URL upon completed booking: redirect the client to a specific URL once a booking is successfully created or updated.
Redirect URL upon aborted booking: redirect the client to a specific URL once a booking is aborted.
Once you've generated the code for your widget, you are ready to insert it into your website; see here for the next steps.