After you installed Booqable on your third-party website, you can embed additional Booqable components to enhance your customer's experience.
Just like adding products on your third-party website, simply paste a code snippet anywhere on a page to add the component.
How it works
💡Note: This does not apply to websites made with the Booqable website builder.
The components you can embed onto your website are as follows:
Sidebar (vertical bar containing a date picker and collection list)
Booqable filter bar (horizontal bar containing a search field and sorting options)
Date picker
Let your customers select their desired rental period anywhere from your third-party website, and show them real-time pricing and availability.
💡Note: Make sure to have a product added to your shopping cart before you view availability on the date picker.
HTML snippet:
<div class="booqable-datepicker"></div>
WordPress shortcode:
[booqable_datepicker]
Note: The options available in the date picker depend on how you've set up your selectable rental period.
Collection list
Embed a list of product collections to make it easier for customers to find what they are looking for.
HTML snippet:
<div class="booqable-collections"></div>
WordPress shortcode:
[booqable_collections]
💡Note: The collection list only filters through product lists that are on the same page (meaning you cannot add just the collection list to a page and show the results in another).
The sidebar
Embed a sidebar containing a date picker and a collection list.
HTML snippet:
<div class="booqable-sidebar"></div>
WordPress shortcode:
[booqable_sidebar]
Search field
Add a search field that filters through product lists (filters on product names and tags).
HTML snippet:
<div class="booqable-product-search"></div>`
WordPress shortcode:
[booqable_search]
Note: The search field only filters through product lists that are on the same page (meaning you cannot add just the search field to a page and show the results in another).
Product sorting
A dropdown to let customers change the sort order of product lists.
HTML snippet:
<div class="booqable-sort"></div>
WordPress shortcode:
[booqable_sort]
💡Note: You can specify the default sorting method in the settings for sorting and filtering.
Booqable filter bar
A horizontal bar that combines a search field and a dropdown to sort products.
HTML snippet:
<div class="booqable-bar"></div>
WordPress shortcode:
[booqable_bar]
You're all set!
You have now successfully learned how to embed different online store components onto your online store.