> ## 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.
# Integração personalizada do web SDK para Rokt Thanks
> Este artigo é para marcas que não usam o Shopify Checkout, mas ainda querem aproveitar as ofertas do Rokt Thanks da Aftersell.
Visão geral
Se a sua loja usa um **fluxo de checkout personalizado**, você ainda pode acessar as ofertas do Rokt Thanks instalando o **Rokt Web SDK** (um pequeno snippet de JavaScript).
Instalar o SDK costuma ser simples e exige conhecimento técnico mínimo. Se necessário, a equipe de suporte técnico da Aftersell pode ajudar você durante todo o processo.
***
## Perguntas iniciais
Antes de começar, responda às seguintes perguntas para garantir uma integração tranquila:
1. **Você (ou alguém da sua equipe de engenharia) consegue adicionar um snippet de código à página de confirmação?**\
A página de confirmação, também conhecida como **página de agradecimento**, aparece imediatamente após o checkout.
2. **Quais dados ou propriedades do usuário estão disponíveis na página de confirmação?**\
Precisaremos de acesso a [propriedades específicas](https://www.notion.so/rokt/Custom-Web-SDK-integration-for-Rokt-Thanks-306ee2db8608815899eadad3811b5ff3) relacionadas aos itens comprados e às informações do cliente. Quanto mais dados estiverem disponíveis, mais relevantes e precisas serão suas ofertas do Rokt Thanks.
3. **Existe uma forma fácil de acessar esses dados usando JavaScript?**\
Por exemplo, é possível consultar os detalhes do carrinho ou do pedido na página de confirmação?
***
## Etapas de implementação
## Etapa 1: Revise e confirme
* Revise as perguntas acima e confirme quais propriedades de dados podem ser acessadas.
* Quando estiver pronto para prosseguir, você precisará de um **accountId**, que será fornecido por um engenheiro da Aftersell.
Para criar sua conta, forneça os seguintes detalhes:
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{
"firstName": "",
"lastName": "",
"primaryEmail": "",
"websiteUrl": "",
"countryCode": "",
"brand": ""
}
```
***
## Etapa 2: Escolha o método de instalação
Decida se você prefere:
* **Instalar a integração por conta própria**, ou
* **Trabalhar diretamente com um engenheiro da Aftersell** (um ambiente de testes pode ser necessário para a configuração assistida).
Se você optar por instalar por conta própria, pode seguir a [**documentação da Rokt**](https://docs.rokt.com/developers/integration-guides/getting-started/?layer1=siteMonetization) ou as etapas resumidas abaixo.\
Nem todas as etapas do guia de configuração da Rokt são obrigatórias, mas o guia é fornecido como referência.
***
## Etapa 3: Instale o script de integração
a. **Copie o [script inicial de integração](#)** (fornecido abaixo).
b. **Adicione o script** entre as tags `` de qualquer página onde você quer exibir uma oferta do Rokt Thanks (normalmente sua página de confirmação de pedido).
i. Preencha todas as **propriedades de dados de cliente e transacionais** obrigatórias.
ii. Substitua `"rokt_account_id_here"` pelo **accountId** fornecido pelo seu engenheiro da Aftersell.
c. **Teste sua implementação** usando o [guia de testes da Rokt](https://docs.rokt.com/developers/integration-guides/web/testing) para garantir que os placements carreguem corretamente.
d. Trabalhe com a nossa equipe para personalizar o placement para que ele corresponda ao visual e à identidade da sua marca.
## Propriedades (propriedades em ***negrito e itálico*** são altamente recomendadas)
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
const cartItems = [
{
'itemPrice': '',
'itemQuantity': '',
'majorcat': '',
'majorcatid': '',
'minorcat': '',
'minorcatid': '',
'productname': '',
'sku': '',
},
{
...
}
]
```
Propriedades de 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"}}
```