> ## Documentation Index > Fetch the complete documentation index at: https://docs.kelviq.com/llms.txt > Use this file to discover all available pages before exploring further. # Integrate the Promotions UI > Add the Kelviq promotions banner to your app using HTML/JS, React, or the Direct API After creating a promotion, open it and go to the **Integration** tab. You will find ready-to-use code snippets for your stack — copy the snippet, paste in your `promotionId` and Client API key, and the banner will render automatically for eligible visitors. You will need two values: * **`promotionId`** — the unique ID of the promotion (pre-filled in the snippet). * **`accessToken`** — your Client API key. Find it in **Settings → API keys → Client API key**. *** ## HTML / JS Add the script snippet to the `` of your page. It loads the SDK asynchronously, initializes it with your promotion, and renders the banner automatically. You can also call `getUpdatedPrice()`, `updatePriceElement()`, and `updatePrice()` to display discounted prices on the page. Installation, `init()` options, auto price update with data attributes, JS API reference, and CSS hooks. *** ## React / Next.js Install `@kelviq/react-promotions-ui`, wrap your app in ``, and place `` where you want the banner to appear. Use `KQPriceFormatted` or the granular price components to show discounted prices anywhere on the page. Installation, `KQProvider` props, `KQBanner`, `KQPriceFormatted`, granular price components, and sandbox setup. *** ## Direct API Fetch promotion data directly from the REST API if you want to apply discounts in a custom checkout flow or build your own UI. The response includes the active discount percentage for the caller's detected location. The ready-to-use `curl` snippet is available in the **Integration** tab of your promotion. Full API reference — request parameters, response schema, and example response.