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

# Built-in Features

> What the script adds to your storefront by itself once init() runs, how it keeps checkout safe, and what it needs from your page

`init()` does more than connect your page to the store. Once the page has loaded, the script adds
the features a merchant turns on in the dashboard, so a custom storefront gets them without any code.

None of it touches your markup or your styles. Each piece renders inside its own shadow DOM, so your
CSS can't restyle it and its CSS can't leak into your page, and it picks up the store's accent color
from its branding.

## Cookie notice

A small "We use cookies" card in the bottom corner (full width on phones) with a **Dismiss** button.
It appears on every page until the visitor dismisses it, and then stays dismissed in that browser.
There's no setting to turn it off.

The notice informs; it doesn't ask. Dismissing it hides it, and that's all - [analytics](#analytics)
run either way.

## Pop-up offers

The offers a merchant creates under **Products → Pop-up Offers**: a title, a message, and a coupon code
the buyer can copy. Each offer opens either:

* **On entrance** - when the page loads, after the delay you set, or
* **On exit intent** - when the pointer leaves through the top of the window. That needs a pointer,
  so in practice it's desktop only.

An offer can be limited to once per visit or once ever. Nothing appears unless an offer is enabled.

## Recent-order notifications

Turn on **Recent order notifications** under **Online Store → Settings → General** and small toasts
appear in the corner: a buyer's masked name and country, the product and the price, and how long ago
they ordered. The first shows after a few seconds, then another every 15 seconds.

<Warning>
  Each notification links to `/product?id=` followed by the product's slug - the product page path
  the visual builder uses. On a custom storefront, serve product pages at that path, or redirect it
  to yours, before you turn notifications on.
</Warning>

## Analytics

The script feeds the store's analytics in the dashboard. You don't call anything.

| Event | Recorded when |
| - | - |
| Page view | `init()` runs, and on every route change in a single-page app |
| Product view | `getProduct()` succeeds |
| Add to cart | `addToBasket()` or `buyNow()` is called |
| Checkout started | `checkout()` is called |

Route changes are picked up from the History API (`pushState`, `replaceState` and the back button),
which is how every mainstream router navigates, so single-page apps need no extra work.

Because a successful `getProduct()` counts as a product view, use it for product pages only. To show
names and prices in a cart or a grid, look products up in `store.products` from `getStore()` instead.

## Affiliate links

An affiliate link is any page of your storefront with `?ref=` and the affiliate's code on the end. When
`init()` runs it saves the code in a first-party cookie for 30 days, and a later link replaces an
earlier one - the last click wins. At checkout the code is exchanged for the affiliate, who is
credited with the order.

The [Embed SDK](/guides/embed-sdk) uses the same cookie, so a buyer who lands on your storefront and
pays through an embedded checkout - or the other way round - is still credited to the same
affiliate. See [Affiliates](/guides/affiliates) for how commission works.

<Note>
  Older integrations that set a `kmrza_ref` cookie to an affiliate's ID by hand still work. When
  that cookie is present it takes precedence.
</Note>

## Security

### What Komerza takes care of

* **Every order is priced on the server.** `checkout()` sends product IDs, variant IDs, quantities,
  the email address and the coupon code - never a price. Prices, discounts, stock and quantity limits
  are all worked out and checked by Komerza, so nothing done to your page's JavaScript can change what
  a buyer pays.
* **Payment never touches your site.** The buyer pays on Komerza's hosted checkout, so card details
  never pass through your page.
* **Checkout has a bot check.** Before it creates the order, `checkout()` runs a check in a small frame
  served from `checkout.komerza.com`. Most buyers never see it. Now and then one is asked to confirm
  they're human in a small dialog, and checkout carries on once they have. It's one reason to show a
  loading state while `checkout()` runs.
* **Order creation is rate-limited**, which blunts scripts that hammer your store with fake orders.

### What your page has to do

* **Render store data as text.** Review text is written by customers, so an `innerHTML` that includes
  it can run their script on your storefront. Use `textContent`, or your framework's normal text
  binding - React, Vue and Svelte all escape by default. Never pass review text to `innerHTML`,
  `dangerouslySetInnerHTML`, `v-html` or `{@html}`.
* **Sanitize markdown you turn into HTML.** Store and product descriptions are markdown. If you render
  them as HTML, run the result through a sanitizer such as DOMPurify.
* **Keep API keys out of the page.** The client library needs no key, and anything in your page can be
  read by every visitor. Keys belong on a server, with the [API](/api-reference/introduction).
* **Allow the SDK in your Content-Security-Policy**, if your site sends one - below.

### Content-Security-Policy

Only relevant if you host the storefront yourself and send a CSP header. Add these origins to the
policy you already have:

| Directive | Allow | For |
| - | - | - |
| `script-src` | `https://cdn.komerza.com` | The SDK itself |
| `connect-src` | `https://m-api.komerza.com` | Store data, orders and analytics |
| `frame-src` | `https://checkout.komerza.com` | The checkout bot check |
| `img-src` | `https://ugc.komerza.com` | Logos, banners and product images |
| `style-src` | `'unsafe-inline'` | The cookie notice, pop-ups and notifications style themselves |

The redirect to `checkout.komerza.com` is an ordinary navigation and needs no entry. If a directive is
missing, the browser blocks that request and logs a CSP violation in the console - checkout in
particular can stall while the bot-check frame is blocked.

## What the script stores

Everything is first-party, kept under your site's own origin:

| Where | Name | Holds |
| - | - | - |
| `localStorage` | `kmrza_session` | The store ID, and whether the notice was dismissed |
| `localStorage` | `kmrza_basket`, `kmrza_basket_metadata`, `kmrza_basket_backup` | The cart, its change history and a backup |
| Browser storage | `komerza_shown_dialogs_session`, `komerza_shown_dialogs_ever` | Which pop-up offers have been shown |
| Cookie | `kmrza_affiliate` | The affiliate code, for 30 days |
| Cookie | `kmrza_t_` followed by the store ID | The analytics visitor ID, for an hour |


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