> ## 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.

# Como instalar o Rokt Thanks no Tapcart

> Um guia de configuração para o TapCart App Studio

<div id="what-is-rokt-thanks">
  ## O que é o Rokt Thanks?
</div>

O Rokt Thanks exibe ofertas personalizadas e não intrusivas aos seus clientes na tela de confirmação pós-compra. É uma maneira simples de gerar receita passiva com cada pedido sem afetar a experiência do cliente.

Este guia explica como instalar o Rokt Thanks no seu app móvel TapCart usando um Custom Code Block. A configuração leva apenas alguns minutos.

<div id="before-you-start">
  ## Antes de começar
</div>

Você precisará do seguinte:

* **Plano TapCart Enterprise** - os Custom Code Blocks só estão disponíveis no Enterprise. Se não tiver certeza sobre o seu plano, verifique com o seu representante de conta do TapCart.
* **Seu Rokt Account ID** - o seu gerente de conta do Aftersell fornecerá esse ID. Se você ainda não o tem, é só entrar em contato que enviaremos.

<div id="step-1-create-a-custom-block">
  ## Etapa 1: crie um Custom Block
</div>

Faça login no seu painel do TapCart e abra o editor do App Studio. Crie um novo Custom Block.

<div id="step-2-paste-the-code-snippet">
  ## Etapa 2: cole o trecho de código
</div>

No editor do Custom Block, mude para a seção Dev. Apague qualquer código de exemplo e cole o trecho abaixo:

```jsx theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
import * as React from "react"
 
export default function RoktPlacement({
  blockConfig,
  tapcartData,
  translations,
  pageState,
  useActions,
}) {
  const containerRef = React.useRef(null)
 
  React.useEffect(() => {
    const loadRokt = async () => {
      try {
        await new Promise((resolve, reject) => {
          if (document.getElementById("rokt-launcher")) {
            resolve()
            return
          }
          const script = document.createElement("script")
          script.type = "text/javascript"
          script.src =
            "https://apps.rokt.com/wsdk/integrations/launcher.js"
          script.fetchPriority = "high"
          script.crossOrigin = "anonymous"
          script.async = true
          script.id = "rokt-launcher"
          script.addEventListener("load", () => resolve())
          script.addEventListener("error", (error) => reject(error))
          document.head.appendChild(script)
        })
 
        const launcher = await window.Rokt.createLauncher({
          accountId: "YOUR_ACCOUNT_ID",
          sandbox: true,
        })
 
        await launcher.selectPlacements({
          identifier: "TapCart.success",
          attributes: {
            email: tapcartData?.customer?.email || "",
            firstname:
              tapcartData?.customer?.firstName || "",
            lastname:
              tapcartData?.customer?.lastName || "",
          },
        })
      } catch (error) {
        console.error("Rokt SDK failed to load:", error)
      }
    }
 
    loadRokt()
  }, [])
 
  return <div id="rokt-placeholder" ref={containerRef} />
}
```

<Info>
  <div id="replace-your-account-id">
    ### Substitua o seu Account ID
  </div>

  No trecho acima, encontre a linha `accountId: "YOUR_ACCOUNT_ID"` e substitua `YOUR_ACCOUNT_ID` pelo Account ID fornecido pelo seu gerente de conta do Aftersell.

  Depois de atualizado, salve o Custom Block.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## Etapa 3: adicione à sua página de pós-compra
</div>

Navegue até a sua página de Post Purchase no editor visual do TapCart. Arraste o Custom Block que você acabou de criar para a página e solte-o onde quiser que as ofertas apareçam.

<div id="step-4-let-us-know">
  ## Etapa 4: avise a gente
</div>

Depois de concluir as etapas acima, avise o seu gerente de conta do Aftersell. Finalizaremos uma configuração rápida do nosso lado e confirmaremos quando tudo estiver no ar.

O trecho vem inicialmente configurado em modo sandbox (`sandbox: true`), que carrega ofertas de teste para você visualizar o posicionamento. `sandbox` é uma opção do launcher no próprio trecho de código, não uma configuração do nosso lado — então, assim que confirmarmos que tudo está correto, edite o Custom Block, altere `sandbox: true` para `sandbox: false` e salve. Você começará a gerar receita a partir desse momento.

<div id="summary">
  ## Resumo
</div>

| Etapa | Ação                                                                                        |
| ----- | ------------------------------------------------------------------------------------------- |
| 1     | Crie um Custom Block no editor App Studio do TapCart                                        |
| 2     | Cole o trecho de código na seção Dev (substitua `YOUR_ACCOUNT_ID` pelo seu Account ID real) |
| 3     | Arraste o Custom Block para a sua página de Post Purchase                                   |
| 4     | Avise o seu gerente de conta do Aftersell para que possamos finalizar a configuração        |

<div id="frequently-asked-questions">
  ## Perguntas frequentes
</div>

**Preciso estar no TapCart Enterprise?**

Sim. Os Custom Code Blocks no App Studio exigem o plano Enterprise do TapCart.

**Isso vai deixar meu app mais lento?**

Não. O script é carregado de forma assíncrona e não bloqueia a renderização da página.

**Posso escolher onde a oferta aparece na página?**

Com certeza. Depois que o Custom Block for salvo, você pode arrastá-lo para qualquer posição na sua página de Post Purchase usando o editor visual do TapCart.

**Que tipo de ofertas meus clientes verão?**

O Rokt Thanks exibe ofertas relevantes e não intrusivas de anunciantes premium, personalizadas para cada cliente.