> ## Documentation Index
> Fetch the complete documentation index at: https://docs.krti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Options and methods

> Every option of KrtiPromo and KrtiCard, and the instance methods.

```js theme={null}
new KrtiPromo(options)
new KrtiCard(options)
```

**selector** `string` *required*

CSS selector of the container. The component renders inside it and empties it on `destroy()`.

**publicKey** `string` *required*

Your public key, `pk_live_...` or `pk_test_...` (see [Public keys](https://docs.krti.com/on-site-messaging/keys.md)).

**amount** `string` *required*

The product, cart or order amount as a string with the currency's decimals: `"45.000"` for
KWD. Plain digits with an optional fraction, no sign, no exponent. Never a float.

**currency** `string` *required*

ISO code of your store's currency, `"KWD"`.

**lang** `'en' | 'ar'`

Default: the page's `<html lang>`, else `en`. Arabic renders right to left.

**source** `'product' | 'cart'`

`KrtiPromo` only. On the cart, a total under an offer's minimum shows the "on orders from"
nudge; product pages show the generic line instead.

**sku** `string`

The product's SKU, up to 64 characters, so SKU-specific offers show on the product page.

**theme** `'light' | 'dark' | 'auto'`

Default `light`. `auto` follows the shopper's `prefers-color-scheme` and updates live. Picks the
defaults of the `--krti-*` variables and the pop-up's theme. See [Styling](https://docs.krti.com/on-site-messaging/styling.md).

**badge** `'brand' | 'dark'`

Default `brand`: the Krti badge (the wordmark on a small pill, in the line and the card) is
brand blue with a white wordmark. `dark` fills it with the text colour, black on a light page
and white on a dark one. Pick the one that suits your page; the partners console previews
both.

**inheritBg** `boolean`

`true` drops the fill of the line and the card. They keep their border, padding and radius on
your own surface.

## Instance methods

**update(\{ amount, currency?, lang?, sku? })**

Re-renders with the new amount (variant or quantity change). One request per change, memoised
for a minute per amount.

**destroy()**

Empties the container and removes every listener.

## Behaviour you can rely on

* Any failure (network, revoked key, rate limit, a bad option) renders nothing or keeps the last
  message, and logs one `console.warn('[Krti] ...')`. The script never throws into your page.
* Text from the API is rendered as text, never as HTML.
* The pop-up is an iframe of `checkout.krti.com`; the script only accepts messages from that
  origin and only opens pop-ups on `krti.com`.


## Related topics

- [Overview](https://docs.krti.com/on-site-messaging/overview.md)
- [Krti for developers](https://docs.krti.com/index.md)
- [Quote the Krti saving for an amount](https://docs.krti.com/api-reference/promo/quote-the-krti-saving-for-an-amount.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.