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

# Brugerdefineret HTML

> Tilføj brugerdefineret HTML eller JavaScript til din kurv med den indbyggede HTML-editor.

Sektionen **Custom HTML** i Upcart giver dig mulighed for at indsætte brugerdefineret kode i forskellige dele af din cart drawer.\
Du kan også skrive JavaScript med `<script>`-tags og interagere med kurven via Upcarts [Public API](https://rokt.notion.site/upcart-public-api) (f.eks. `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Her finder du det**
</div>

Gå til: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Sådan fungerer det**
</div>

Dropdown-menuen **HTML Location** lader dig vælge, hvor koden skal vises i kurvens layout. Baseret på dit valg bliver koden injiceret i det tilsvarende kurvområde.

Du kan bruge det til at tilføje:

* Brugerdefinerede beskeder
* Tillidsskabende tekst
* App-integrationer
* Analytics-snippets
* Styling-hooks
* Kampagneindhold, såsom bannere med personlige tilbud eller rabatter
* Produktgarantier, der opbygger kundernes tillid

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

Du kan bruge følgende token i ethvert Custom HTML-felt til at injicere live kurvdata:

| Token                 | Hvad den viser                                            |
| --------------------- | --------------------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | Kurvens aktuelle subtotal, formateret i din butiks valuta |

**Eksempel:**

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

Denne token virker i alle HTML-placeringsfelter undtagen **Scripts (Before Load)**, hvor du i stedet bør bruge JavaScript-API'et. Dette er den eneste dynamiske token, der er tilgængelig i Custom HTML-felter.

<div id="available-html-locations">
  ## **Tilgængelige HTML-placeringer**
</div>

|                                        |                                                                                                                                    |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Placering                              | Beskrivelse                                                                                                                        |
| **Above announcements/rewards**        | Øverst i kurven, under kurvens header.                                                                                             |
| **Below header/announcements/rewards** | Umiddelbart under eventuelle announcements eller reward-bjælker.                                                                   |
| **Between each line item**             | Injiceres under hvert produkt i kurven.                                                                                            |
| **Below cart items**                   | Direkte under kurvens varelinjer, over de nederste moduler.                                                                        |
| **Above footer/add-ons**               | Under kurvens varer og upsells, over add-ons.                                                                                      |
| **Above checkout button**              | Inde i footeren, direkte over checkout-knappen og subtotalen.                                                                      |
| **Below checkout button**              | Inde i footeren, direkte under checkout-knappen.                                                                                   |
| **Bottom of cart**                     | Helt i bunden af draweren (uden for footeren).                                                                                     |
| **On empty cart screen**               | Vises ved siden af teksten “Your cart is empty”.                                                                                   |
| **Scripts (Before Load)**              | Usynligt område til at køre JavaScript, **før** kurven indlæses. Ideelt til tracking, betinget logik eller brugerdefineret adfærd. |

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

Du kan style din HTML med editoren **Custom CSS**, som findes under:\
**Upcart > Cart Editor > Settings > Custom CSS**

For eksempel for at justere placeringen af den tomme kurv:

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