Skip to main content
All CollectionsIntegrations
Booxi/Shopify integration guide
Booxi/Shopify integration guide
Updated yesterday

Booxi is integrated with Shopify! This integration was designed to streamline the creation and management of CTAs, while also enhancing your clients' experience with your brand. The integration enables the following:

  • Creation, storing and management of CTAs (e.g. "Book now" button) which redirect to the booking widget.

  • Configuration and customization of the booking widget.

  • Booking payment capture using Shopify Checkout (i.e. services clients book in Booxi are automatically added to their shopping cart in Shopify).

  • Automatically add new clients in Shopify

Setup

To set up the integration, simply search for Booxi in the Shopify app store and install.

Configure your settings

To configure your settings, go to "Apps" > Booxi > Settings:

Enter the following fields:

  • Hosting region*

    • North America

    • Europe

If your booxi account URL ends with ".com", your hosting region is North America. If your booxi account URL ends with ".eu", your hosting region is Europe.

  • Partner API key (optional): required if you want to enable either of the 2 following features, otherwise not:

    1. Automatically update the booking payment status in Booxi whenever an item is checked out in Shopify (see this section)

To obtain a Partner API key, contact your Booxi representative -- *Note: the provided partner API key must be associated with the merchant API key you enter below.

  • [Default] Merchant API key*: this key is used to specify which store (or stores) the booking widget will present upon opening. To find your key, go to the "My Business" tab > Business details.

Once your settings are configured, you're ready to begin creating CTAs.

How to create a CTA

To create a CTA, enter the following information:

  • Merchant API key*: this key is used to specify which store (or stores) the booking widget will present upon opening.

    • You may apply your default Merchant API key or a different one.

  • Name CTA*: the title of your CTA.

  • Settings

    • Enable select store: setup the widget such that when opened, the list of your stores will be displayed (as opposed to a single store). The client will be prompted to select one store from among the list.

    • Store filter tag: filter the list of stores shown in the widget (relevant if you have multiple stores)

      • To apply a tag(s) to a store, go to the "My Business" tab > Business details > Booking Filter Tags. For more info, see here.

    • Service filter tag (comma delimited as AND): filter the list of services shown in the widget

      • 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.

    • 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 > {click the pencil icon next to a service category} > notice the ID under "Category details"

    • 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".

  • Event

    • Event Date: Open the widget to a specific date.

    • Event Id: Open the widget to a specific event (i.e. appointment or group event)

  • Custom Product Identifier

    • Map a product variable ({Product.ID} or {Product.Name}). This information will be included in the "Additional request from client" field. This can be useful if you have multiple services which redirect to the same shopping cart URL (i.e. it will allow you to quickly identify the corresponding product).

    • You can use this information for reporting purposes: see the appointment report "Client request" column

  • URL redirect: redirect to a different page after the booking widget is closed.

    • URL if the booking was successful

    • URL if the booking was cancelled

If you've enabled payment via shopping cart, leave this field blank.

  • Tracking

    • Google Tag: track booking steps in Google Analytics. For more info, see here.

    • Acquisition channel: enter a tag to track the source of bookings. For more info, see here. Examples include:

      • "Welcome page"

      • "e-commerce"

      • "Manual booking"

  • Customize your CTA

    • Text

    • Background color

    • Color text

    • Border radius

  • Language: the language that the booking widget will be presented in.

    • *Note: if none is selected, the default browser user language will apply.

  • User session

    • "Use existing user session": when checked, the booking widget will be prefilled with the client's information.

    • "Skip the customer identification form": when checked, the customer identification step will be skipped (i.e. the customer won't need to enter their information when booking).

      • *Note: if there is any missing information, the customer identification step will not be skipped

Your CTAs will be listed in the "List CTA" page:

How to add a CTA into a page

Once your settings are configured, you're ready to add the CTA to your Shopify store. Booxi CTAs can be added to any store component that allows app elements. For example, within a site page (i.e. within the header, body or footer) or on a product page.

Go to "Apps" > Booxi > List CTA, then copy the shortcode of a CTA.

Then, open your online store editor and navigate to your desired page.

*IMPORTANT: you must enable the Booxi toggle in the "App embeds" screen; this is necessary for the Booxi script to load on all site pages.

Example 1: adding the CTA to the home page

  1. Open your online store.

  2. Navigate to your home page.

  3. Click "Add a section"

  4. Click "Apps", select Booxi.

  5. Click the Booxi CTA option, then enter the shortcode

  6. Click the button test it

Example 2: adding the CTA to a product page

  1. Navigate to your "Products" section

  2. Select a product

  3. In the appropriate section (e.g. "Template"), click "Add a block"

  4. Click "Apps", select Booxi.

  5. Click the Booxi CTA option, then enter the shortcode

  6. Click the button test it

Shopify Checkout

Automatically add booked services to the client's shopping cart when booking online.

Requirements

  1. Activate the "Enable Online Payment via Shopping Cart" setting ("My Business" tab > Booking Rules).

    • In the callback URL field, enter your Shopify website URL.

  2. For each service you want to enable payment via shopping cart for, set their online payment method to "Shopping Cart" : go to the "Services" tab > {select a service} > Service Details. Under "Online payment", select "Shopping Cart" and set a fixed amount to be paid.

    1. *Note: the price charged to the client will be the one listed in Shopify. To avoid confusion, please ensure that the price listed in Booxi matches the Shopify price. This also means that if you edit the product's price in Shopify, you should also edit it in Booxi.

  3. In the "Product ID" field, enter your product's Shopify URL handle; to access it, go to the "Products" tab in Shopify > {select a product} > scroll down to "Search engine listing", then copy the ending of your URL, as shown below:

*Note: if you edit a product's URL handle in Shopify, you will need to update it in Booxi.

How payment via shopping cart works

  • Client clicks a CTA; the booking widget opens.

  • The client books an appointment or a group event.

  • The client is redirected to the cart with the matching product added.

  • The client completes checkout.

    • At the moment of checkout, Shopify checks the status of the booking; if the booking is cancelled in Booxi, the client will not be able to checkout.

    • If the payment is successful, the client will receive a Shopify receipt.

By default, payments completed in Shopify do not automatically update their booking payment status in Booxi. To enable this, you need a partner API key.

Notes

  • Note that if you enabled the "Auto-cancel unpaid booking" setting ("My Business" tab > Booking Rules) in your account, bookings that are not paid within 15 minutes will be automatically cancelled, thus preventing clients from checking out after the 15-minute mark.

  • Any booking changes done in Booxi (i.e. edits, cancellation) will not affect the client's item in Shopify.

  • Any client actions in Shopify will not affect the booking in Booxi. For example, if a client abandons their cart or removes (i.e. cancels) an item from their cart, the booking won't be affected.

  • Any cancellations of paid bookings (done by the client or staff) will not provoke a refund in Shopify. Refunds must be manually done in Shopify.

Automatically add new clients to Shopify

Requires a Partner API key.

  • New clients (obtained from Booxi bookings) will automatically be added to your Shopify client list; Shopify will perform a match by client email address.

Other

  • You can view orders that were automatically added to Shopify from Booxi by navigating to the "Orders" tab in Shopify.

    • All Booxi orders are tagged "booxi", which you can use as a filter when searching.

  • Items added from Booxi bookings will include the associated Booxi Booking ID, Payment ID, and its associated date/time.

  • This integration applies to the booking widget v3, NOT v2.

Did this answer your question?