Tabby provides JS snippets to be placed on the Product and Cart pages. They contain the split price message and a widget displayed when customers want to Learn More.

Please make sure that snippets fit the width of a Mobile Web screen and have suitable width for a Desktop Web as well.

​
Product and Cart Page Snippet

Tabby snippet contains "Learn more", a clickable object which opens an info pop-up

First you need to create an empty div with a unique selector (preferably - id):

<div id="TabbyPromo"></div>

Put that div where you want Tabby Promo Snippet to be shown, preferably near the product price and / or “Add to cart” button for the product page and near the total amount or “Proceed to checkout” button for the cart page.

If your font colour is white and you have dark background colour, make sure you add the parameter shouldInheritBg in the snippet code, so the snippet could inherit the required theme settings.

Here you can find a full request:

<html>
  <body>
    <div id="tabby"></div>
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script>
      new TabbyPromo({
       selector: '#TabbyPromo', // required, content of tabby Promo Snippet will be placed in element with that selector.
       currency: 'AED', // required, AED|SAR|KWD only supported, with no spaces or lowercase.
       price: '1200.00', // required, price of the product. 2 decimals max for AED|SAR and 3 decimals max for KWD.
       lang: 'en', // Optional, en|ar only supported
       source: 'product', // Optional, snippet placement; `product` for product page and `cart` for cart page.
       publicKey: 'PUBLIC_API_KEY', // required, Public Key
       merchantCode: 'string'  // required
     });
    </script>
  </body>
</html>

​
Custom Promo Snippets

In specific cases when you are unable to use our JS promo components, you must discuss and confirm the desired solution with your Tabby account manager. Then you can create your components by referring to previous examples.

For these components, you can utilize the following ‘Learn More’ pop-up widgets. To do so, use the URLs provided below and include specific parameters:

  • merchant_code and public_key are required for all pop-up links
  • lang - specific language, supports values en and ar
  • price and currency - are required to show payment schedule

​
UAE and KSA Pop-up page examples

UAE Pop-up page example, Englishhttps://checkout.tabby.ai/promos/product-page/installments/en/?price=340.00&currency=AED&merchant_code=AE&public_key=pk_xyz
KSA Pop-up page example, Arabichttps://checkout.tabby.ai/promos/product-page/installments/ar/?price=100&currency=SAR&merchant_code=SA&public_key=pk_xyz
UAE No-Price Pop-up page example, Arabichttps://checkout.tabby.ai/promos/product-page/installments/ar/?currency=AED&merchant_code=AE&public_key=pk_xyz
KSA No-Price Pop-up page example, Englishhttps://checkout.tabby.ai/promos/product-page/installments/en/?currency=SAR&merchant_code=AE&public_key=pk_xyz

Pop-up examples

Please, make sure that promo snippets and pop-up widgets fit the width and height of the screen.