> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tabby.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# On‑Site Messaging
Tabby's JavaScript snippets show split-price messaging right where customers decide to buy — on your Product, Cart and Checkout pages. They raise awareness of flexible payments before checkout, which directly increases conversion. Each snippet includes a "Learn more" link that opens a pop-up with the payment schedule.
## Add the snippets
Two components cover all pages:
* **`TabbyPromo`** — Product and Cart pages. Place the container near the product price, next to the "Add to cart" button, or below the cart total.
* **`TabbyCard`** — Checkout page, the recommended way to present Tabby payment details at checkout (see Tabby on Checkout). Place it under the Tabby payment method option and show it when Tabby is selected.
```html your-store-page.html expandable theme={"dark"}
```
Snippets only need your Public Key and merchant code — never expose the Secret Key in frontend code.
Make sure snippets fit mobile screen widths (320px minimum).
## Live demo
Everything below is rendered live by `tabby-promo.js` and `tabby-card.js` — exactly what your customers will see. Switch the market to preview English/AED and Arabic/SAR, and click "Learn more" to open the real pop-up.
## Custom Promo Snippets
If you can't load Tabby's JavaScript (security policies, native mobile apps, full styling control), build your own message and open the Tabby "Learn more" pop-up via a direct URL:
| Description | URL |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| UAE pop-up, English | [**https://checkout.tabby.ai/promos/product-page/installments/en/?price=2000.00\¤cy=AED\&merchant\_code=your\_merchant\_code\&public\_key=pk\_xyz**](https://checkout.tabby.ai/promos/product-page/installments/en/?price=2000.00\¤cy=AED\&merchant_code=your_merchant_code\&public_key=pk_...) |
| KSA pop-up, Arabic | [**https://checkout.tabby.sa/promos/product-page/installments/ar/?price=2000.00\¤cy=SAR\&merchant\_code=your\_merchant\_code\&public\_key=pk\_xyz**](https://checkout.tabby.sa/promos/product-page/installments/ar/?price=2000.00\¤cy=SAR\&merchant_code=your_merchant_code\&public_key=pk_...) |
#### URL Parameters
| Parameter | Required | Description | Values |
| --------------- | -------- | --------------------- | ----------------------------------------------------------- |
| `merchant_code` | Yes | Your merchant code | Provided by Tabby |
| `public_key` | Yes | Your Tabby public key | `'pk_test_...'`, `'pk_...'` |
| `price` | Yes | Product or cart price | `'1200.00'`, `'99.99'`, `'5.500'` (3 decimals for KWD only) |
| `currency` | Yes | Currency code | `AED`, `SAR`, `KWD` |
| `lang` | No | Language code | `en`, `ar` |
If you implement your own custom snippet, notify your Tabby account manager so we can keep your integration in sync with upcoming changes.
For promo messaging inside native mobile apps, see App Promo Messaging.
