Skip to main content
All CollectionsCheckout Flow Set-Up GuidesAdvanced Settings
How to Link Your Checkout Flow Widget to a Specific Product
How to Link Your Checkout Flow Widget to a Specific Product
Updated over 5 months ago

For businesses looking to direct customers to a specific product via the Checkout Flow widget, there are two effective methods to achieve this. Here’s a detailed guide on how to set it up.

Option 1: Direct Link to a Product Page

This option involves adding links or buttons on your website that directly open the Checkout Flow widget at a specific product page.

Steps to Implement:

  1. Create a Button or Hyperlink: Design a button or hyperlink on your website where you want to direct customers to a specific product.

  2. Link to Product URL: The link should be formatted as follows: https://checkout.tab.travel/product/[product_id]

  3. Replace the Placeholder: Substitute [product_id] with the actual product ID of the product you want to link to.

Finding the Product ID: Go to your Checkout Flow dashboard, click on the product card you want to link, and find the product ID on the product edit page.

(In the example above, the url would be https://checkout.tab.travel/product/dzlrl-acc-1)​

Option 2: Customising the 'Book Now' Button

This method customises the 'Book Now' button to open the Checkout Flow widget at a specific product page.

Steps to Implement:

  1. Add Custom Code: Insert the following script in the specific section of your website where you want the 'Book Now' button to open a specific product page:

    <script type="text/javascript"> 
    window.widgetSettings = {
    businessCode: "[Business_ID]",
    business_specific_id: "[Product_ID]",
    };
    </script>

  2. Replace Placeholders: Change [Business_ID] and [Product_ID] with your actual IDs.

    • Finding the Product ID: Follow the same steps as in Option 1 to find your product ID.

    • Business ID: This is the first 5 letters of your product ID (e.g., "dzlrl" in the example above).

Important Note:

For both methods, ensure that the widget’s code is already installed on your website. If you haven’t done this, please refer to Step 7 in our help center for instructions on installing the widget's code.

By following these steps, you can effectively direct customers to specific products, enhancing their experience and streamlining the booking process.

Did this answer your question?