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.
Hardcoded settings: use this to enter custom code. This will override any advanced settings defined in "Settings" EXCEPT for the Google Tag setting.
*Note: the entry must begin with "{" and end with "}"
*Note: only enter the parameter code, see example below:
Ex: {bookingFlow:'locations', serviceTags:'vip'}
Advanced 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".
Show descriptions: choose whether to display the location, service category and service descriptions, and if so, how.
Always visible
Never visible
Initially collapsed with button to expand
Hide steps: skip the service selection step and/or the staff selection step. 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).
Service
Staff
The list of customizable widget parameters in Shopify is limited. The full list available for customization is here (note that this would require you to configure and generate the widget code yourself, outside of Shopify). The parameters not available through Shopify include the following:
Geolocation: allow clients to select stores sorted by proximity (to activate, contact your Booxi representative)
locationCategory: require clients to select a region as the first step when opening the widget.
staffId: preselect a specific staff member when opening the booking widget (requires you to apply a service ID also).
availabilityTags: filter availability to time slots assigned with one or several tags.
Client Object: with Shopify, enabling "Use existing user session" (see User session for reference) will prefill the widget with the client's information. However, enabling this setting does not allow you to choose which properties to pass nor to set the value of any property (e.g. whether reminders are enabled by default). Integrating the widget yourself (outside of Shopify) will allow you to do this.
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)
Additional details
Map a product variable; options include:
{Product.ID}
{Product.Name}
{Product.ID} - {Product.Name}
{Variant.SKU}
{Variant.Barcode}
The chosen variable will be included in the "Additional request from client" field in Booxi. Doing 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 right product). See example below:
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
BOTH fields must be entered for the redirect to work.
If you've enabled payment via shopping cart, leave this field blank.
Tracking
Customize your CTA
Text
Background color
Color text
Border radius
You can apply these customizations directly in your store editor, see here for more info.
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 delete or duplicate a CTA
To delete or duplicate a CTA, simply click the target CTA, then use the appropriate options in the top right of the screen, as shown below:
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.
In the Shopify web editor, you can either add a CTA as a section OR as a block within a section. Adding a CTA as a section will display it in its own area (see example), whereas adding a CTA as a block within a section will include the button within an existing Shopify element (see example).
*IMPORTANT: in your web editor, make sure to enable the Booxi toggle in the "App embeds" screen; this is necessary for the Booxi script to load on all site pages.
Adding a CTA as a section
Example of a CTA as a section:
To add a CTA as a section: 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.
Example 1: adding the CTA to the home page
Open your online store.
Navigate to your home page.
Click "Add a section"
Click "Apps", select Booxi.
Click the Booxi CTA option, then enter the shortcode
Click the button test it
Example 2: adding the CTA to a product page (see here for an important note)
Navigate to your "Products" section
Select a product
In the appropriate section (e.g. "Template"), click "Add a block"
Click "Apps", select Booxi.
Click the Booxi CTA option, then enter the shortcode
Click the button test it
Adding a CTA as a block within a section
Example of a CTA as a block within a section:
To add a CTA as a block within a section: Go to "Apps" > Booxi > List CTA, then copy the link of a CTA.
Then, open your online store editor and navigate to your desired page.
Example 1: adding the CTA to the home page
Open your online store.
Navigate to your home page.
Click "Add a section", then select a section type (any section type that allows buttons. Ex: "Image with text").
Add a button if none are pre-loaded.
Click the button, then paste the CTA link in the "Button link" section.
Click the button test it
Adding a CTA to a menu item
You can also add CTAs to menu items. Here's an example:
Follow these steps:
Copy the link of your target CTA (from the "List CTA" tab)
In your Shopify account, go to "Content" > Menus > {select a menu item}
Add a new menu item (if necessary)
Paste the target CTA's link in the "Link" field.
Save your changes.
Note about adding CTAs to a product page
If you're looking to include CTAs on your product pages, note that by default, all product pages will inherit the default product template. This means that the CTA included in the default page will apply to all product pages. If your goal is to configure the widgets of each product page to open to the chosen product (i.e. service), you must choose one of the following workarounds:
Option 1: create a template for every product
Create a CTA for every product (i.e. service), making sure to enter the service's ID in the "Service Id" field
In the web editor, create a product template for every product page.
In each product template you created, include a Booxi button, and paste the appropriate CTA (shortcode or link) in its link section.
|
Finally, assign the appropriate template to each product, use the created CTA link for each one), making sure to assign the right template to the product.
Option 2: use the metafield object
Create a CTA for every product (i.e. service), making sure to enter the service's ID in the "Service Id" field
Create a product metafield of type "Single line text" (Settings > Metafields and metaobjects > Products).
Then, for every product, paste the appropriate shortcode in the Metafields section of its product page.
Then, for every product, open your editor and in the "CTA ID or shortcode" field, select the dynamic source that you created.
Notes on customization
For buttons you added as a section, customizations must be done within the Booxi CTA settings.
Customization options:
For buttons you added as a block within a section, customization must be done using Shopify's theme editor:
Relevant components include:
Colors
Typography
Animations
Buttons
*Note: Depending on the component, changes made to the theme may affect other elements in your website (for example, if you edit the button theme, it will affect all buttons on your website as opposed to just one).