Skip to main content
All CollectionsBooking widgetBooking widget implementation
Add Booxi's Booking Widget to your website
Add Booxi's Booking Widget to your website

How to generate the required Book now code and where to place each component in your website creation tool

Updated this week

To add Booxi's Book Now widget into your website, follow these steps:

PART 1: Generate the code for your widget

Booking widget v2

  1. Access our code generator

    1. If your hosting region is North America, click here.

    2. If your hosting region is Europe, click here.

  2. In the code generator, input the API key associated with your store (to find your API key, go to "My Business" > Business Details > "API key")

  3. Enter any additional fields and/or configure settings as you see fit [optional]

  4. Test your button by clicking "Run"

Familiarize yourself with the different components of the code, as shown here. You will need this in part 2.

Booking widget v3

  1. Access our code generator

    1. If your hosting region is North America, click here.

    2. If your hosting region is Europe, click here.

  2. In the code generator, input the API key associated with your store (to find your API key, go to "My Business" > Business Details > "API key")

  3. Enter any additional fields and/or configure settings as you see fit [optional]

  4. Generate your code by clicking "Generate"

  5. Test your button

PART 2: Insert the code into your website

  1. Navigate to your website creation tool. If you are using any of the below tools, click the link:

  2. In the code generator, copy the code from the head tag and paste it within the head tag of your page.

  3. In the code generator, copy the code from the body tag and paste it at the beginning of your page's body tag.

    1. *Note: if you are using the booking widget v3, this may be blank.

  4. In the code generator, copy the button code and paste it in the area you want it to appear.

  5. Test the functioning of the button in your website tool.

Here's a video demonstrating the above steps:

You can make basic customization changes; familiarity with Javascript and CSS is required. For advanced customization, contact your Booxi representative.

Did this answer your question?