> ## 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.
# Integración personalizada del Web SDK para Rokt Thanks
> Este artículo es para marcas que no utilizan Shopify Checkout pero que aún quieren aprovechar las ofertas de Rokt Thanks de Aftersell.
Descripción general
Si tu tienda utiliza un **flujo de checkout personalizado**, aún puedes acceder a las ofertas de Rokt Thanks instalando el **Rokt Web SDK** (un pequeño fragmento de JavaScript).
La instalación del SDK suele ser sencilla y requiere conocimientos técnicos mínimos. Si es necesario, el equipo de soporte técnico de Aftersell puede ayudarte durante todo el proceso.
***
## Preguntas iniciales
Antes de comenzar, responde las siguientes preguntas para garantizar una integración fluida:
1. **¿Puedes (o alguien de tu equipo de ingeniería) agregar un fragmento de código a la página de confirmación?**\
La página de confirmación, también conocida como la **página de agradecimiento**, aparece inmediatamente después del checkout.
2. **¿Qué datos o propiedades del usuario están disponibles en la página de confirmación?**\
Necesitaremos acceso a [propiedades específicas](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3) relacionadas con los artículos comprados y la información del cliente. Cuantos más datos estén disponibles, más relevantes y precisas serán tus ofertas de Rokt Thanks.
3. **¿Existe una forma sencilla de acceder a estos datos usando JavaScript?**\
Por ejemplo, ¿puedes consultar los detalles del carrito o del pedido en la página de confirmación?
***
## Pasos de implementación
## Paso 1: Revisa y confirma
* Revisa las preguntas anteriores y confirma a qué propiedades de datos se puede acceder.
* Cuando estés listo para continuar, necesitarás un **accountId**, que te será proporcionado por un ingeniero de Aftersell.
Para crear tu cuenta, proporciona los siguientes datos:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## Paso 2: Elige el método de instalación
Decide si prefieres:
* **Instalar la integración por tu cuenta**, o
* **Trabajar directamente con un ingeniero de Aftersell** (puede requerirse un entorno de pruebas para la configuración asistida).
Si eliges instalarla por tu cuenta, puedes seguir la [**documentación de Rokt**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization) o los pasos resumidos a continuación.\
No todos los pasos de la guía de configuración de Rokt son necesarios, pero la guía se proporciona como referencia.
***
## Paso 3: Instala el script de integración
a. **Copia el [script de integración inicial](#)** (proporcionado a continuación).
b. **Agrega el script** entre las etiquetas `` de cualquier página donde quieras mostrar una oferta de Rokt Thanks (normalmente tu página de confirmación de pedido).
i. Completa todas las **propiedades de datos del cliente y transaccionales** requeridas.
ii. Reemplaza `"rokt_account_id_here"` con el **accountId** proporcionado por tu ingeniero de Aftersell.
c. **Prueba tu implementación** usando la [guía de pruebas de Rokt](https://docs.rokt.com/developers/integration-guides/web/testing) para asegurarte de que las ubicaciones se cargan correctamente.
d. Trabaja con nuestro equipo para personalizar la ubicación de modo que coincida con la imagen y el estilo de tu marca.
## Propiedades (las propiedades en ***negrita y cursiva*** son altamente recomendadas)
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
Propiedades del cliente/pedido
```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 inicial
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
```