> ## 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 provides JavaScript snippets that display promotional messaging on your Product, Cart and Checkout pages. These snippets show split price information and a "Learn More" widget that opens a pop-up when clicked. ## Overview Tabby promotional snippets help increase customer awareness and conversion rates by displaying payment options directly on your store pages. The implementation includes: * **Product and Cart page snippet** - shows split payment options on product pages and the shopping cart page * **Checkout snippet** - provides payment details during checkout
Product page snippet Product page snippet Checkout page snippet
Ensure snippets fit mobile screen widths and are appropriately sized for desktop. All promo snippets and pop-up widgets must fit within screen dimensions. ## Product and Cart Page Snippet The Product and Cart page snippet uses the `TabbyPromo` component to display promotional messaging on product and cart pages. Create an empty `
` element with a unique selector, preferably using an `id`: ```HTML theme={"dark"}
``` For maximum visibility, place the container in one of the suggested places: * **Product**: near the product price or next to the "Add to cart" button; * **Cart**: below the total cart amount. Include the Tabby Promo script in your page and initialize the `TabbyPromo` component after the script loads: ```HTML theme={"dark"} ``` If the white background of the snippet does not match your website design and you want the snippet to inherit the background color, you can use `shouldInheritBg: true`. When this parameter is set for `true`, you can also customize the text and link colors using the following CSS variables: ```CSS theme={"dark"} --snippetTextColor: white; --snippetLinkTextColor: white; ``` ### Complete Product and Cart Snippet Example ```HTML theme={"dark"}
``` ## Checkout Snippet The checkout snippet uses the `TabbyCard` component to display payment information during checkout. This is the recommended way to present Tabby payment details at your checkout — see Tabby on Checkout. Create an empty `div` element where the Tabby Card will be displayed: ```HTML theme={"dark"}
``` Place this div under the Tabby payment method option. Display it when the Tabby payment method is selected. Load and Initialize TabbyCard: ```HTML theme={"dark"} ``` ### Complete Checkout Snippet Example ```HTML theme={"dark"}
``` ## Custom Promo Snippets If you can't use Tabby's JavaScript promo components (e.g., due to framework constraints, security policies, or custom requirements), you can use Tabby's "Learn More" pop-up widgets via direct URLs. Before implementing custom promo snippets, you must discuss and confirm the desired solution with your Tabby account manager. ### When to use custom promo snippets? Consider custom promo snippets when: * You can't load external JavaScript files due to security policies * You're building a native mobile app and need webview integration - [check our Mobile App Promo Messaging guide](https://docs.tabby.ai/pay-in-4-custom-integration/mobile-apps/app-promo-messaging) * You need complete control over snippet styling and behaviour ### Pop-up URL structure and examples The pop-up URL follows this pattern: | Description | URL | | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | UAE Pop-up, English | [**https://checkout.tabby.ai/promos/product-page/installments/en/?price=340.00\¤cy=AED\&merchant\_code=AE\&public\_key=pk\_xyz**](https://checkout.tabby.ai/promos/product-page/installments/en/?price=340.00\¤cy=AED\&merchant_code=AE\&public_key=pk_...) | | KSA Pop-up, Arabic | [**https://checkout.tabby.sa/promos/product-page/installments/ar/?price=100\¤cy=SAR\&merchant\_code=SA\&public\_key=pk\_xyz**](https://checkout.tabby.sa/promos/product-page/installments/ar/?price=100\¤cy=SAR\&merchant_code=SA\&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` |
UAE pop-up with price, en KSA pop-up with price, en
## Best Practices ### Security and Performance * Never expose your Secret API Key in frontend code - only Public Key should be used there; * Make sure snippet update is triggered when prices change on product pages with variant selectors; * Consider lazy loading snippets for below-the-fold content; * Use event listeners to detect when scripts load before initializing components. ### Responsive Design * Ensure snippets fit mobile screen widths (typically 320px minimum); * Verify snippet visibility across different screen sizes; * Use CSS media queries for custom styling.