Create a landing page with online booking

Business Tips    |   May 11, 2020

If you are using online booking for a special offer, event, marketing campaign, or simply because it is faster than modifying your website, this article will help you achieve this in no time.

  • Adding online booking to your landing page can be done in a few easy steps
  • Add a button to your page
  • Add 3 simple javascripts to your unbounce page
  • Copy your button ID and replace it in 1 javascript
  • Copy your booxi API key and replace it in 2 javascript
  • Publish your page, and you’re done

If you are not sure how to create an unbounce landing page, you can get started here.
Create a unbounce landing page

Adding booxi online booking to a button

Once you have completed the design of your landing page and added a button to open booxi’s book now, follow these simple steps:

  1. From your landing page designer, select Add New Javascript in the Javascripts option at the bottom.
  2. Set the Placement as Head, and copy this:<script src=”https://www.booxi.com/api/booknow.js” async=””></script>
  3. Add another Javascript but with Placement as After Body Tag, and copy this:

    <script>

    var bnHandler = null;

    window.bxApiInit = function () {

    bnHandler = booxiController.configure({

    apiKey: “YOUR_API_KEY_HERE”

    });

    };

    </script>

  4. Replace YOUR_API_KEY_HERE with your api key, that you can find in your booxi account My Business, Details. Scroll down to the API key.
    Add another Javascript but with Placement as After Body End Tag, and copy this:

    <script>

    $(‘#YOUR_BUTTON_ID’).click(function(){

    booxiController.book();

    });

    </script>

  5. Replace YOUR_BUTTON_ID with your unbounce button ID, that you can find by clicking on your button (in the designer) to open the Properties. Scroll down to the Element Metadata and find your ID.
    Now you must Publish your page to test your book now button.

More features and resources

booxi offers a wide range of features to create online booking buttons for a variety of scenarios.

  • Start with a store selection
  • Filter the store list
  • Filter the service list
  • Start with a preselected service or category
  • Push data with the appointment
  • and much more

If you wish to open book now using other features such a store location (bookingFlow), push data (customRequest), filter services (serviceTags) and so on, use the following script instead of the one in step 5.

<script>

$(‘#YOUR_BUTTON_ID’).click(function(){

var props = {

apiKey: “YOUR_API_KEY_HERE”,

bookingFlow: “locations”,

customRequest: “YOUR DATA”,

serviceTags: “YOUR TAGS”

}

booxiController.open(null, props);

});

</script>

 

Make sure that you use the double quotes character in your code, as copy/paste from articles often transform this character. If your booxi account is on a European server, make sure to use booxi.eu:

<script src=”https://www.booxi.eu/api/booknow.js” async=””></script>

To try your API Key and the various features supported by book now, try our code generator:
https://www.booxi.com/api/test_cases/generator#/
https://www.booxi.eu/api/test_cases/generator#/

Margaux Duchatelet
Margaux Duchatelet
Setting Up Online Booking for Appointment by Phone and Video Conference
Business Tips   |   May 11, 2020
Present Your Online Booking Service Offer in Various Languages
Product Features   |   Apr 10, 2020
Ready to grow your business?
14 day free trial|No credit card required
Get Started