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:

Embeddable shopping cart
Shopping cart button
Date picker
Collection list
Sidebar (vertical bar containing a date picker and collection list)
Search field
Product sorting
Booqable filter bar (horizontal bar containing a search field and sorting options)

1. Embeddable shopping cart

Embed a shopping cart on any page of your third-party website. The full shopping cart consists of two elements:

a list of the products in the cart
a sidebar with an order summary and checkout actions

You can also embed these elements separately.

Full embeddable shopping cart:

HTML snippet:

<div class="booqable-embeddable-cart"></div>

WordPress shortcode:

[booqable_embeddable_cart]

Product lines only:

HTML snippet:

<div class="booqable-embeddable-cart-lines"></div>

WordPress shortcode:

[booqable_embeddable_cart_lines]

Sidebar only:

HTML snippet:

<div class="booqable-embeddable-cart-sidebar"></div>

WordPress shortcode:

[booqable_embeddable_cart_sidebar]

2. Shopping cart button

Embed a button that navigates your customer to the shopping cart.

After you install Booqable on your third-party website, a "floating" shopping cart appears in your website's lower-right corner by default. You can replace the floating cart with a button (in the header of your website, for example).

When you embed the shopping cart button on a page, the floating cart disappears automatically.

HTML snippet:

<div class="booqable-cart-button" data-href="https://your-website.com/cart"></div>

WordPress shortcode:

[booqable_cart_button href="https://your-website.com/cart"]

Important: Replace "your-website.com/cart" with the (relative or absolute) URL of the page where you placed the Embeddable shopping cart.

Note: Some website builders and themes don't let you add the href to the embed code. When no href is present, the button links to /cart.

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

4. 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).

5. The sidebar

Embed a sidebar containing a date picker and a collection list.

HTML snippet:

<div class="booqable-sidebar"></div>

WordPress shortcode:

[booqable_sidebar]

6. 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).