The main aspect of your rental store is, of course, your rental products.
Thankfully, Booqable has created a super simple method of embedding your Booqable products onto a website of your own.
How it works
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 more anywhere on your website by pasting a simple embed code onto the page.
💡Note: This tutorial is only for Booqable users who want to embed Booqable onto a website of their own (using Squarespace, Wordpress, Shopify, etc).
If you wish to use the Booqable Rental Website Builder, check out this guide instead.
1. Embed a list of products
To embed a list of your Booqable products, paste this code anywhere:
<div class="booqable-product-list"> </div>
2. Embed a single product card
A product card will open details (description) about the product in a pop up when clicked on.
1. In Booqable, go to Products.
2. 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/
3. Click Card, and copy the HTML code. (If you have a Wordpress site, copy the Wordpress code instead.)
4. Alternatively, go into your specific product and click on the online store tab, where you can choose which embed code to copy.
3. Embed a product detail view
A detailed view will have the image with a description, pricing information, and an add to cart button without a pop up needed.
1. In Booqable, go to Products.
2. 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/
3. Click Detail, and copy the HTML code. (If you have a Wordpress site, copy the Wordpress code instead.)
4. Alternatively, go into your specific product and click on the online store tab, where you can choose which embed code to copy.
4. Embed a product button
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!
1. In Booqable, go to Products.
2. 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/
3. Click Card, and copy the HTML code. (If you have a Wordpress site, copy the Wordpress code instead.)
4. Alternatively, go into your specific product and click on the online store tab, where you can choose which embed code to copy.
5. Embed a search field, collections, and more
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 collections,
<div class="booqable-product-list" data-collections="collection,collection 2,collection 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>
You're all set!
You have now successfully learned how to embed products on an existing website in Booqable.