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

# Custom HTML

> Voeg custom HTML of JavaScript toe aan je cart met de ingebouwde HTML-editor.

In het gedeelte **Custom HTML** in Upcart kun je custom code invoegen in verschillende delen van de cart drawer.\
Je kunt ook JavaScript schrijven met `<script>`-tags en met de cart communiceren via de [Public API](https://rokt.notion.site/upcart-public-api) van Upcart (bijv. `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Waar vind je het**
</div>

Ga naar: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Hoe het werkt**
</div>

Met de dropdown **HTML Location** kies je waar de code binnen de cart-lay-out verschijnt. Op basis van je selectie wordt de code in het bijbehorende cart-gedeelte geïnjecteerd.

Je kunt dit gebruiken om het volgende toe te voegen:

* Aangepaste berichten
* Vertrouwensteksten
* App-integraties
* Analytics-snippets
* Styling-hooks
* Promotionele content, zoals banners met gepersonaliseerde aanbiedingen of kortingen
* Productgaranties die het vertrouwen van klanten vergroten

<div id="dynamic-tokens">
  ## **Dynamische tokens**
</div>

Je kunt het volgende token in elk Custom HTML-veld gebruiken om live cart-gegevens te injecteren:

| Token                 | Wat het weergeeft                                                       |
| --------------------- | ----------------------------------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | Het huidige subtotaal van de cart, opgemaakt in de valuta van je winkel |

**Voorbeeld:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

Dit token werkt in alle HTML-locatievelden behalve **Scripts (Before Load)**; daar gebruik je in plaats daarvan de JavaScript-API. Dit is het enige dynamische token dat beschikbaar is in Custom HTML-velden.

<div id="available-html-locations">
  ## **Beschikbare HTML-locaties**
</div>

|                                        |                                                                                                                                          |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Locatie                                | Beschrijving                                                                                                                             |
| **Above announcements/rewards**        | Bovenaan de cart, onder de cart-header.                                                                                                  |
| **Below header/announcements/rewards** | Direct onder eventuele aankondigingen of beloningsbalken.                                                                                |
| **Between each line item**             | Geïnjecteerd onder elk product in de cart.                                                                                               |
| **Below cart items**                   | Direct onder de cart-regelitems, boven de onderste modules.                                                                              |
| **Above footer/add-ons**               | Onder cart-items en upsells, boven add-ons.                                                                                              |
| **Above checkout button**              | In de footer, direct boven de checkout-knop en het subtotaal.                                                                            |
| **Below checkout button**              | In de footer, direct onder de checkout-knop.                                                                                             |
| **Bottom of cart**                     | Helemaal onderaan de drawer (buiten de footer).                                                                                          |
| **On empty cart screen**               | Wordt weergegeven naast de tekst "Your cart is empty".                                                                                   |
| **Scripts (Before Load)**              | Onzichtbaar gebied om JavaScript uit te voeren **voordat** de cart laadt. Ideaal voor tracking, conditionele logica of aangepast gedrag. |

<div id="custom-css-optional">
  ## **Custom CSS (optioneel)**
</div>

Je kunt je HTML stylen met de **Custom CSS**-editor die je vindt onder:\
**Upcart > Cart Editor > Settings > Custom CSS**

Bijvoorbeeld, om de uitlijning van een lege cart aan te passen:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```