Note: This does not apply to websites made with the Booqable website builder
After you added Booqable on a third-party website with the use of an add-on or the javascript snippet, you can show your products and a date picker anywhere on your website by pasting a simple embed code onto the page.
Embed a list of products
To embed a list of your Booqable products, paste this code anywhere:
<div class="booqable-product-list"> </div>
Extra options
You can add optional parameters to add a search field to:
add a search field that filters the product list,
<div class="booqable-product-search"> </div>
only show products with specific tags,
<div class="booqable-product-list" data-tags="tag,tag 2,tag 3"> </div>
only show products with specific categories,
<div class="booqable-product-list" data-categories="category,category 2,category 3">
set the number of products displayed per page,
<div class="booqable-product-list" data-per="3"> </div>
limit the number of products loaded altogether.
<div class="booqable-product-list" data-limit="6"> </div>
You can also combine these parameters:
<div class="booqable-product-list" data-show-search="true" data-tags="tag,tag 2,tag 3" data-per="3" data-limit="6"> </div>
Embed single products
There are 3 different embed codes for single products, so you can embed them as:
A product card will open details (description) about the product in a pop up when clicked on
A detailed view will have the image with a description, pricing information, and an add to cart button without a pop up needed
Just a button will just have the availability, pricing information, quantity information and add to cart button from the detailed view and no product information. This is best used when incorporating Booqable onto your website that has a commerce system with products already in it!
To get the embed codes for a single product:
There are two ways to get your embed codes for specific products
1. Using the Products overview Page:
In Booqable, go to Products.
Hover over the visible button to see and copy the embed code for a product. There are 3 different embed codes depending on how you'd like the product to display:
2. Go into your specific product and click on the online store tab, there you can choose which embed code to copy.
