How to install Rokt Thanks on Tapcart

A Setup Guide for TapCart App Studio

What is Rokt Thanks?

Rokt Thanks displays personalized, non-intrusive offers to your customers on the post-purchase confirmation screen. It’s a simple way to generate passive revenue from every order without impacting the customer experience.

This guide walks through how to install Rokt Thanks within your TapCart mobile app using a Custom Code Block. The setup takes just a few minutes.

Before you start

You will need the following:

• TapCart Enterprise plan - Custom Code Blocks are only available on Enterprise. If you’re unsure about your plan, check with your TapCart account rep.
• Your Rokt Account ID - your Aftersell account manager will provide this. If you don’t have it yet, just reach out and we’ll send it over.

Step 1: Create a Custom Block

Log in to your TapCart dashboard and open the App Studio editor. Create a new Custom Block.

Step 2: Paste the code snippet

In the Custom Block editor, switch to the Dev section. Clear any placeholder code and paste the snippet below:

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} />
}

Replace Your Account ID

In the snippet above, find the line accountId: "YOUR_ACCOUNT_ID" and replace YOUR_ACCOUNT_ID with the Account ID provided by your Aftersell account manager.

Once updated, save the Custom Block.

Step 3: Add to your Post Purchase page

Navigate to your Post Purchase page in TapCart’s visual editor. Drag the Custom Block you just created onto the page and drop it wherever you’d like the offers to appear.

Step 4: Let us know

Once you’ve completed the steps above, let your Aftersell account manager know. We’ll finalize a quick configuration on our end and confirm when everything is live.

The snippet is initially set to sandbox mode (sandbox: true), which loads test offers so you can preview the placement. sandbox is an option on the launcher in the snippet itself, not a setting on our side — so once we’ve confirmed everything looks right, edit the Custom Block, change sandbox: true to sandbox: false, and save. You’ll start earning revenue from that point.

Summary

Step	Action
1	Create a Custom Block in TapCart’s App Studio editor
2	Paste the code snippet into the Dev section (replace YOUR_ACCOUNT_ID with your actual Account ID)
3	Drag the Custom Block onto your Post Purchase page
4	Notify your Aftersell account manager so we can finalize setup

Frequently asked questions

Do I need to be on TapCart Enterprise?

Yes. Custom Code Blocks in App Studio require TapCart’s Enterprise plan.

Will this slow down my app?

No. The script loads asynchronously and won’t block your page from rendering.

Can I choose where the offer appears on the page?

Absolutely. Once the Custom Block is saved, you can drag it to any position on your Post Purchase page using TapCart’s visual editor.

What kind of offers will my customers see?

Rokt Thanks serves relevant, non-intrusive offers from premium advertisers tailored to each customer.