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

# Cómo instalar Rokt Thanks en Tapcart

> Una guía de configuración para TapCart App Studio

<div id="what-is-rokt-thanks">
  ## ¿Qué es Rokt Thanks?
</div>

Rokt Thanks muestra ofertas personalizadas y no intrusivas a tus clientes en la pantalla de confirmación post-compra. Es una forma sencilla de generar ingresos pasivos con cada pedido sin afectar la experiencia del cliente.

Esta guía explica cómo instalar Rokt Thanks dentro de tu aplicación móvil de TapCart usando un Custom Code Block. La configuración toma solo unos minutos.

<div id="before-you-start">
  ## Antes de empezar
</div>

Necesitarás lo siguiente:

* **Plan TapCart Enterprise**: los Custom Code Blocks solo están disponibles en Enterprise. Si no estás seguro de tu plan, consulta con tu representante de cuenta de TapCart.
* **Tu Rokt Account ID**: tu gestor de cuenta de Aftersell te lo proporcionará. Si aún no lo tienes, solo contáctanos y te lo enviaremos.

<div id="step-1-create-a-custom-block">
  ## Paso 1: crea un Custom Block
</div>

Inicia sesión en tu panel de TapCart y abre el editor de App Studio. Crea un nuevo Custom Block.

<div id="step-2-paste-the-code-snippet">
  ## Paso 2: pega el fragmento de código
</div>

En el editor del Custom Block, cambia a la sección Dev. Borra cualquier código de ejemplo y pega el fragmento a continuación:

```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">
    ### Reemplaza tu Account ID
  </div>

  En el fragmento anterior, busca la línea `accountId: "YOUR_ACCOUNT_ID"` y reemplaza `YOUR_ACCOUNT_ID` con el Account ID proporcionado por tu gestor de cuenta de Aftersell.

  Una vez actualizado, guarda el Custom Block.
</Info>

<div id="step-3-add-to-your-post-purchase-page">
  ## Paso 3: añádelo a tu página Post Purchase
</div>

Navega a tu página Post Purchase en el editor visual de TapCart. Arrastra el Custom Block que acabas de crear a la página y suéltalo donde quieras que aparezcan las ofertas.

<div id="step-4-let-us-know">
  ## Paso 4: avísanos
</div>

Una vez que hayas completado los pasos anteriores, informa a tu gestor de cuenta de Aftersell. Finalizaremos una configuración rápida por nuestra parte y te confirmaremos cuando todo esté activo.

El fragmento está configurado inicialmente en modo sandbox (`sandbox: true`), que carga ofertas de prueba para que puedas previsualizar la ubicación. `sandbox` es una opción del launcher dentro del propio fragmento, no un ajuste de nuestra parte; por eso, una vez que confirmemos que todo se ve bien, edita el Custom Block, cambia `sandbox: true` a `sandbox: false` y guarda. A partir de ese momento empezarás a generar ingresos.

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

| Paso | Acción                                                                                             |
| ---- | -------------------------------------------------------------------------------------------------- |
| 1    | Crea un Custom Block en el editor App Studio de TapCart                                            |
| 2    | Pega el fragmento de código en la sección Dev (reemplaza `YOUR_ACCOUNT_ID` con tu Account ID real) |
| 3    | Arrastra el Custom Block a tu página Post Purchase                                                 |
| 4    | Notifica a tu gestor de cuenta de Aftersell para que podamos finalizar la configuración            |

<div id="frequently-asked-questions">
  ## Preguntas frecuentes
</div>

**¿Necesito estar en TapCart Enterprise?**

Sí. Los Custom Code Blocks en App Studio requieren el plan Enterprise de TapCart.

**¿Esto ralentizará mi aplicación?**

No. El script se carga de forma asíncrona y no bloqueará el renderizado de tu página.

**¿Puedo elegir dónde aparece la oferta en la página?**

Por supuesto. Una vez guardado el Custom Block, puedes arrastrarlo a cualquier posición de tu página Post Purchase usando el editor visual de TapCart.

**¿Qué tipo de ofertas verán mis clientes?**

Rokt Thanks muestra ofertas relevantes y no intrusivas de anunciantes premium, adaptadas a cada cliente.