> ## 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.
# Aangepaste Web SDK-integratie voor Rokt Thanks
> Dit artikel is bedoeld voor merken die geen Shopify Checkout gebruiken, maar toch willen profiteren van de Rokt Thanks-aanbiedingen van Aftersell.
Overzicht
Als je winkel een **aangepaste checkout-flow** gebruikt, kun je nog steeds gebruikmaken van Rokt Thanks-aanbiedingen door de **Rokt Web SDK** (een kleine JavaScript-snippet) te installeren.
Het installeren van de SDK is doorgaans eenvoudig en vereist minimale technische kennis. Indien nodig kan het technische supportteam van Aftersell je gedurende het hele proces helpen.
***
## Eerste vragen
Beantwoord de volgende vragen voordat je begint, om een soepele integratie te garanderen:
1. **Kun jij (of iemand van je engineeringteam) een codesnippet toevoegen aan de bevestigingspagina?**\
De bevestigingspagina, ook wel de **bedankpagina** genoemd, verschijnt direct na de checkout.
2. **Welke gebruikersgegevens of eigenschappen zijn beschikbaar op de bevestigingspagina?**\
We hebben toegang nodig tot [specifieke eigenschappen](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3) met betrekking tot gekochte artikelen en klantgegevens. Hoe meer gegevens er beschikbaar zijn, hoe relevanter en nauwkeuriger je Rokt Thanks-aanbiedingen zullen zijn.
3. **Is er een eenvoudige manier om deze gegevens via JavaScript op te vragen?**\
Kun je bijvoorbeeld de winkelwagen- of bestelgegevens op de bevestigingspagina opvragen?
***
## Implementatiestappen
## Stap 1: Controleren en bevestigen
* Bekijk de bovenstaande vragen en bevestig welke gegevenseigenschappen toegankelijk zijn.
* Zodra je klaar bent om verder te gaan, heb je een **accountId** nodig, die door een Aftersell-engineer wordt verstrekt.
Geef de volgende gegevens door om je account aan te maken:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## Stap 2: Installatiemethode kiezen
Beslis of je:
* **De integratie zelf wilt installeren**, of
* **Rechtstreeks met een Aftersell-engineer wilt samenwerken** (voor begeleide installatie kan een testomgeving nodig zijn).
Als je ervoor kiest om de installatie zelf uit te voeren, kun je [**de documentatie van Rokt**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization) volgen of de samengevatte stappen hieronder.\
Niet alle stappen in de installatiehandleiding van Rokt zijn vereist, maar de handleiding dient als referentie.
***
## Stap 3: Het integratiescript installeren
a. **Kopieer het [starter-integratiescript](#)** (hieronder aangeleverd).
b. **Voeg het script toe** tussen de ``-tags van elke pagina waarop je een Rokt Thanks-aanbieding wilt weergeven (meestal je bestelbevestigingspagina).
i. Vul alle vereiste **klant- en transactiegegevens** in.
ii. Vervang `"rokt_account_id_here"` door de **accountId** die je van je Aftersell-engineer hebt gekregen.
c. **Test je implementatie** met behulp van [de testhandleiding van Rokt](https://docs.rokt.com/developers/integration-guides/web/testing) om te controleren of placements correct laden.
d. Werk samen met ons team om de placement aan te passen zodat deze aansluit bij de look-and-feel van je merk.
## Eigenschappen (***vetgedrukte en cursieve*** eigenschappen worden sterk aanbevolen)
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
Klant-/besteleigenschappen
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
attributes: {
// Required
amount: '', //In $
firstname: '',
lastname: '',
billingzipcode: '',
Country: '',
Language: '',
currency: '',
cartItems: JSON.stringify(cartItems), //From above
email: '',
//Order Data
clientcustomerid: '',
cartId: '',
subtotal: '',
totalTax: '',
totalShipping: '',
margin: '',
paymenttype: '',
ccbin: '',
//Customer Data
customerType: '',
hasAccount: '',
isReturning: '',
lastVisited: '',
isLoyalty: '',
loyaltyTier: '',
mobile: '',
title: '',
age: '',
gender: '',
dob: '',
billingAddress1: '',
billingAddress2: '',
billingCity: '',
billingState: '',
billingCountry: '',
shippingAddress1: '',
shippingAddress2: '',
shippingCity: '',
shippingState: '',
shippingZipcode: '',
shippingCountry: '',
},
```
## Starterscript
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```