> ## 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.
# Intégration personnalisée du SDK web pour Rokt Thanks
> Cet article s'adresse aux marques qui n'utilisent pas Shopify Checkout mais souhaitent tout de même profiter des offres Rokt Thanks d'Aftersell.
Aperçu
Si votre boutique utilise un **flux de checkout personnalisé**, vous pouvez tout de même accéder aux offres Rokt Thanks en installant le **Rokt Web SDK** (un petit extrait JavaScript).
L'installation du SDK est généralement simple et nécessite peu d'expertise technique. Si besoin, l'équipe de support technique d'Aftersell peut vous accompagner tout au long du processus.
***
## Questions préliminaires
Avant de commencer, répondez aux questions suivantes pour garantir une intégration fluide :
1. **Pouvez-vous (ou quelqu'un de votre équipe d'ingénierie) ajouter un extrait de code à la page de confirmation ?**\
La page de confirmation, également appelée **page de remerciement**, apparaît immédiatement après le checkout.
2. **Quelles données ou propriétés utilisateur sont disponibles sur la page de confirmation ?**\
Nous aurons besoin d'accéder à des [propriétés spécifiques](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3) relatives aux articles achetés et aux informations client. Plus les données disponibles sont nombreuses, plus vos offres Rokt Thanks seront pertinentes et précises.
3. **Existe-t-il un moyen simple d'accéder à ces données via JavaScript ?**\
Par exemple, pouvez-vous interroger les détails du panier ou de la commande sur la page de confirmation ?
***
## Étapes de mise en œuvre
## Étape 1 : Vérifier et confirmer
* Passez en revue les questions ci-dessus et confirmez quelles propriétés de données sont accessibles.
* Une fois prêt à continuer, vous aurez besoin d'un **accountId**, qui vous sera fourni par un ingénieur Aftersell.
Pour créer votre compte, veuillez fournir les informations suivantes :
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## Étape 2 : Choisir la méthode d'installation
Décidez si vous souhaitez :
* **Installer l'intégration vous-même**, ou
* **Travailler directement avec un ingénieur Aftersell** (un environnement de test peut être nécessaire pour une installation assistée).
Si vous choisissez de l'installer vous-même, vous pouvez suivre [**la documentation de Rokt**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization) ou les étapes résumées ci-dessous.\
Toutes les étapes du guide de configuration de Rokt ne sont pas obligatoires, mais le guide est fourni à titre de référence.
***
## Étape 3 : Installer le script d'intégration
a. **Copiez le [script d'intégration de démarrage](#)** (fourni ci-dessous).
b. **Ajoutez le script** entre les balises `` de toute page où vous souhaitez afficher une offre Rokt Thanks (généralement votre page de confirmation de commande).
i. Renseignez toutes les **propriétés de données client et transactionnelles** requises.
ii. Remplacez `"rokt_account_id_here"` par l'**accountId** fourni par votre ingénieur Aftersell.
c. **Testez votre implémentation** à l'aide du [guide de test de Rokt](https://docs.rokt.com/developers/integration-guides/web/testing) pour vérifier que les emplacements se chargent correctement.
d. Travaillez avec notre équipe pour personnaliser l'emplacement afin qu'il corresponde à l'apparence et à l'identité de votre marque.
## Propriétés (les propriétés en ***gras et italique*** sont fortement recommandées)
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
Propriétés client/commande
```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: '',
},
```
## Script de démarrage
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```