` 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"} ``` Re-initialize `TabbyPromo` when the price changes (e.g. variant or quantity selectors). 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 to `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. Create an empty `

` 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"}

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