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

# Maak menu-stories met videocontent en CTA's

> Voeg verticale fullscreen video-stories toe aan je storekit-menupagina. Verhoog engagement en verkoop met Instagram-achtige content over je aanbiedingen.

Stories zijn verticale full-screen videocontent die op je menupagina wordt weergegeven. Ze zijn onderdeel van je **Content**-toolkit, samen met [Promotionele banners](/docs/nl/guides/marketing/promotional-banners), en zijn ontworpen om het gedrag van gasten te beïnvloeden en actie te stimuleren.

Voor contentstrategie en best practices, zie de [Stories-gids](/docs/nl/guides/menu-engineering/stories) in Menu Engineering.

<video autoPlay muted loop playsInline className="w-full rounded-xl shadow-lg" src="https://ucarecdn.com/87409ef0-c71a-4419-9b43-67f245349b01/storeis.mp4" />

## Een story maken

1. Ga naar **Marketing** → **Content** in je dashboard
2. Klik in de sectie **Stories** op **Create Story**
3. Voer een **title** in (getoond in de viewer)
4. Voeg een of meer **pages** (video's) toe
5. Configureer CTA's voor elke pagina
6. Stel de weergavevolgorde in de carrousel in
7. Zet de story op **Active**
8. Klik op **Create Story** om op te slaan

## Story-structuur

Elke story bestaat uit:

| Element       | Beschrijving                                               |
| ------------- | ---------------------------------------------------------- |
| **Title**     | Naam die wordt getoond in de story-viewer                  |
| **Pages**     | Een of meer videopagina's binnen de story                  |
| **Thumbnail** | Eerste frame van de eerste video (automatisch gegenereerd) |
| **Order**     | Positie in de carrousel                                    |

## Pages

Elke pagina binnen een story bevat:

| Element       | Beschrijving                                                                                                                                                             |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Video**     | Verticale videocontent (geüpload naar Mux)                                                                                                                               |
| **CTA Type**  | Actie die wordt getriggerd wanneer op de knop wordt getikt                                                                                                               |
| **CTA Label** | Aangepaste knoptekst (optioneel)                                                                                                                                         |
| **CTA Data**  | Doelproduct, categorie of URL. Product- en categoriedoelen worden ingevoerd als ID's - zie [Een Product ID of Category ID vinden](#een-product-id-of-category-id-vinden) |

### Videovereisten

| Specificatie   | Vereiste                      |
| -------------- | ----------------------------- |
| **Oriëntatie** | Verticaal (9:16 aspect ratio) |
| **Formaat**    | MP4, MOV of WebM              |
| **Duur**       | 5-60 seconden aanbevolen      |
| **Resolutie**  | 1080x1920 of hoger            |

Video's worden verwerkt via Mux voor geoptimaliseerd streamen op alle apparaten.

## Call-to-Action-types

### Add to Basket

Voegt het gekoppelde product direct toe aan het mandje van de klant.

* Het beste voor eenvoudige items zonder vereiste modifiers
* Als het product modifiers heeft, wordt in plaats daarvan de item-modal geopend
* CTA-type met de hoogste conversie
* Vereist dat het **Product ID** van het product in het veld **Product ID** wordt geplakt

### View Item

Opent de productdetailmodal.

* Gebruik wanneer producten modifiers hebben om te configureren
* Klanten kunnen alle details zien voordat ze toevoegen
* Vereist dat het **Product ID** van het product in het veld **Product ID** wordt geplakt

### View Category

Scrolt het menu naar de geselecteerde categorie.

* Sluit de story-viewer
* Handig voor het promoten van hele menusecties
* Vereist dat het **Category ID** van de categorie in het veld **Category ID** wordt geplakt

### External URL

Opent een externe link in een nieuw tabblad.

* Volg klikken voordat de gebruiker vertrekt
* Gebruik voor reserveringen, events of externe content

### None

Geen CTA-knop weergegeven.

* Gebruik voor merkcontent of aankondigingen
* Video speelt af zonder tot actie op te roepen

### Een Product ID of Category ID vinden

Product- en categorie-CTA's worden gericht op basis van ID, die je in de pagina-editor plakt:

| CTA-type          | Veld            | Waarde om te plakken                 |
| ----------------- | --------------- | ------------------------------------ |
| **Add to Basket** | **Product ID**  | Het **Product ID** van het product   |
| **View Item**     | **Product ID**  | Het **Product ID** van het product   |
| **View Category** | **Category ID** | Het **Category ID** van de categorie |

Om ze te vinden:

1. Ga naar **Menu** in de sidebar
2. Open het product of de categorie waarnaar je wilt linken
3. Scroll naar de onderkant van het bewerkingspaneel - het **Product ID** (of **Category ID**) is het laatste item, net boven de opslaanknop
4. Het is een lange identifier weergegeven in een monospace-lettertype. Klik erop om de hele waarde te selecteren en kopieer deze vervolgens

Dezelfde velden verschijnen onder **Scheduling, priority & CTA overrides** als je een pagina per winkel op een ander product of categorie wilt richten.

<Note>
  Een **Product ID** is niet hetzelfde als de **SKU / PLU** of **POS ID** van het product. Story-CTA's accepteren alleen het **Product ID**. Zie [Producten](/docs/nl/guides/menu/products) en [Categorieën](/docs/nl/guides/menu/categories).
</Note>

## Viewer-gedrag

Wanneer een klant een story opent:

| Interactie       | Gedrag                                |
| ---------------- | ------------------------------------- |
| **Tik rechts**   | Volgende pagina of volgende story     |
| **Tik links**    | Vorige pagina                         |
| **Vasthouden**   | Video pauzeren                        |
| **Veeg omhoog**  | CTA activeren (indien geconfigureerd) |
| **X-knop**       | Viewer sluiten                        |
| **Escape-toets** | Viewer sluiten (desktop)              |
| **Terug-knop**   | Viewer sluiten (mobiel)               |

Video's starten standaard **gedempt**. Klanten kunnen op het volume-icoon tikken om het geluid aan te zetten.

### Voortgangsindicator

Een voortgangsbalk bovenaan toont:

* Huidige positie binnen de story
* Aantal pagina's in de huidige story
* Gaat automatisch verder wanneer de video is voltooid

## Metrics en tracking

storekit volgt uitgebreide story-engagement:

| Event               | Vastgelegde data                                          |
| ------------------- | --------------------------------------------------------- |
| **Viewer Opened**   | Story ID, bronlocatie                                     |
| **Story Viewed**    | Story ID, pagina-index, heeft video, heeft CTA            |
| **Navigation**      | Richting (volgende/vorige), methode (tik/automatisch)     |
| **CTA Clicked**     | CTA-type, doel, videovoortgang %                          |
| **Story Completed** | Tijd besteed, pagina's bekeken                            |
| **Viewer Closed**   | Sluitmethode, totaal stories/pagina's bekeken, sessieduur |

### Belangrijke metrics

| Metric              | Beschrijving                                   |
| ------------------- | ---------------------------------------------- |
| **Open rate**       | % van menuweergaven die stories hebben geopend |
| **Completion rate** | % van stories die tot het einde zijn bekeken   |
| **CTA click rate**  | % van weergaven die op de CTA hebben geklikt   |
| **Avg. time spent** | Gemiddelde seconden in de story-viewer         |

## Weergave-instellingen

### Carrouselpositie

Stories verschijnen in een horizontale carrousel bovenaan de menupagina, boven categorieën.

### Thumbnail-preview

Elke story toont een herhalende videopreview in de carrousel. Klanten tikken om de full-screen viewer te openen.

### Laadstatussen

* Skeleton-placeholders worden getoond terwijl stories laden
* Blur hash-previews worden weergegeven voordat de video klaar is
* Spinner geeft aan dat de video buffert

## Stories beheren

### Volgorde wijzigen

Sleep stories om hun positie in de carrousel te wijzigen. De eerste story verschijnt links.

### Bewerken

Klik op een story om de pagina's, CTA's of instellingen te bewerken. Wijzigingen worden direct opgeslagen.

### Verwijderen

Verwijder stories om ze permanent te verwijderen. Dit kan niet ongedaan worden gemaakt.

### Archiveren

Zet stories uit om ze te verbergen zonder ze te verwijderen. Handig voor seizoensgebonden content die je opnieuw zult gebruiken.

## Problemen oplossen

### Story is actief maar niet zichtbaar op de bestelpagina

Als een story als **Active** wordt weergegeven in het dashboard maar niet op je live menupagina verschijnt, doorloop dan eerst deze controles:

1. **Bevestig dat het Active is, niet alleen opgeslagen** - Open de story vanuit **Marketing** → **Content** en controleer of de toggle **Active** (groen) aangeeft. Een story die **Inactive** is gelaten, is opgeslagen maar wordt niet weergegeven. Gebruik de filters **Active** / **All** / **Inactive** om de status te bevestigen.
2. **Controleer of de juiste winkel is geselecteerd** - Stories worden per winkel toegewezen. Zorg ervoor dat de story is toegewezen aan (en Active is voor) de winkel wiens bestelpagina je bekijkt.
3. **Vernieuw de live pagina** - Herlaad de bestelpagina (een harde refresh wist alle gecachte versies) zodat deze de nieuwste content ophaalt.
4. **Controleer de positie in de carrousel** - De carrousel staat bovenaan het menu, boven de categorieën. Een story lager in de weergavevolgorde kan buiten beeld zijn gescrolld - scroll de carrousel zijwaarts om deze te vinden.
5. **Wacht tot de video is verwerkt** - Video's worden na uploaden verwerkt via Mux. Een story wordt niet weergegeven totdat de video klaar is, wat een paar minuten kan duren voor grotere bestanden.
6. **Controleer eventuele planning** - Als je een start- of einddatum hebt ingesteld onder **Scheduling, priority & CTA overrides**, verschijnt de story alleen binnen dat venster.

<Info>
  Als de story na deze controles nog steeds niet verschijnt, [neem dan contact op met support](/docs/nl/getting-started/contact-support) met de winkelnaam en storytitel.
</Info>

## Tips

* **De eerste frame telt** - De thumbnail wordt automatisch gegenereerd uit de eerste frame
* **Houd het kort** - 5-15 seconden per pagina presteert het best
* **Geluid optioneel** - Ontwerp voor gedempt kijken, want video's starten gedempt
* **Roteer content** - Verse stories stimuleren herhaalde betrokkenheid
* **Match CTA's** - Gebruik "Add to Basket" voor eenvoudige items, "View Item" voor complexe
* **Volg prestaties** - Bekijk metrics om onderpresterende stories te optimaliseren

## Gerelateerde content

<CardGroup cols={2}>
  <Card title="Stories-gids" icon="lightbulb" href="/docs/nl/guides/menu-engineering/stories">
    Contentstrategie en best practices
  </Card>

  <Card title="Promotionele banners" icon="image" href="/docs/nl/guides/marketing/promotional-banners">
    Statische visuele content voor het menu
  </Card>

  <Card title="Videos" icon="video" href="/docs/nl/guides/menu-engineering/videos">
    Video toevoegen aan producten
  </Card>
</CardGroup>


## Related topics

- [Stories: strategie en best practices](/docs/nl/guides/menu-engineering/stories.md)
- [Videos](/docs/nl/guides/menu-engineering/videos.md)
- [Promotionele banners](/docs/nl/guides/marketing/promotional-banners.md)
- [Productfotografie](/docs/nl/guides/menu-engineering/product-photography.md)
- [Menucategorieën aanmaken en plannen](/docs/nl/guides/menu/categories.md)