Getting Started for Web

For web integration, start here once you've created your GrowSurf program.

Sandbox/testing environment

To start building your referral or affiliate program in a "sandbox" environment, we recommend creating two GrowSurf separate programs (one for development and one for production).

A program, also known as campaign, is simply a referral or affiliate program. Every GrowSurf program has a unique ID that you can find in the URL or from the program's GrowSurf Universal Code. Learn more here.

Step 1: Install the GrowSurf Universal Code onto your site

Get the GrowSurf Universal Code.

The GrowSurf Universal Code is what allows referrals to be tracked and credited properly.

It's also what powers the GrowSurf window and embeddable elements to be displayed to your participants so that they can get their unique share link, click social share buttons, and check their referral stats and/or the leaderboard.

The GrowSurf Universal Code is a snippet of JavaScript that you paste into the <HEAD> of your website.

To get your program-specific GrowSurf Universal Code, follow the Installation steps in the Program Editor until you get to the instructions page (see image below).

Note:

Your program-specific GrowSurf Universal Code will work on any URL that shares the same origin (what's same-origin?) as the Share URL or Signup URL that you entered in the Installation step of the Program Editor. Click here for image
If you have Participant authentication/login enabled, you may want to set up Participant Auto Authentication.
To set up a development process that supports multiple environments (e.g, development, production), view this article.

Step 2: Integrate with GrowSurf API(s)

Use our client-side or server-side APIs to integrate with GrowSurf to add participants and to trigger referrals.

Development Tool

Type

Description

JavaScript Web API

Client-side

Create new participants, trigger referrals, get limited program data, get limited participant data, and open/close the GrowSurf window.

REST API

Server-side

Create new participants, trigger referrals, get program data, and get participant data from a secure environment.

Step 3: Automate reward fulfillment

Set up automatic reward fulfillment and data syncing by using Webhooks and/or Zapier.

Model Context Protocol (MCP)

The GrowSurf MCP server enables your AI agents and tools to directly interact with your GrowSurf referral and affiliate programs.

If you're using an AI tool such as Cursor, Claude Code, Antigravity, or ChatGPT Codex to help you implement GrowSurf, we recommend utilizing our MCP server.

Installation

View installation instructions for popular AI tools below.

Download the MCP server here
Open Cursor
In the top menu, click File > Preferences > Cursor Settings
In the Cursor Settings panel, open Tools & MCP
Click Add Custom MCP
In the mcp.json file, add the following:

{
  "mcpServers": {
    "growsurf-mcp": {
    "command": "npx",
    "args": ["-y", "@growsurfteam/growsurf-mcp"],
    "env": {
      "GROWSURF_API_KEY": "REPLACE_WITH_YOUR_API_KEY",
      "GROWSURF_CAMPAIGN_ID": "REPLACE_WITH_YOUR_CAMPAIGN_ID"
    }
  }
}

Save the configuration file
You should see growsurf-mcp under MCP Tools with a green dot, indicating the MCP server is successfully running

Install the server directly into Claude Code:

claude mcp add @growsurfteam/growsurf-mcp -- \
  -e GROWSURF_API_KEY=REPLACE_WITH_YOUR_API_KEY \
  -e GROWSURF_CAMPAIGN_ID=REPLACE_WITH_YOUR_CAMPAIGN_ID

Open Antigravity
Click the … menu in the panel to the right and select MCP Store
Click Manage MCP Servers > View raw config
In the mcp_config.json file, add the following:

{
  "mcpServers": {
    "growsurf": {
      "command": "npx",
      "args": ["-y", "@growsurfteam/growsurf-mcp"],
      "env": {
        "GROWSURF_API_KEY": "YOUR_API_KEY",
        "GROWSURF_CAMPAIGN_ID": "YOUR_CAMPAIGN_ID"
      }
    }
  }
}

Option 1: Configure via `config.toml`

Create or edit the ~/.codex/config.toml file by adding the following:

[mcp_servers.growsurf]
command = "npx"
args = ["-y", "@growsurfteam/growsurf-mcp"]

[mcp_servers.growsurf.env]
GROWSURF_API_KEY = "YOUR_API_KEY"
GROWSURF_CAMPAIGN_ID = "YOUR_CAMPAIGN_ID"

Option 2: Configure via Codex CLI

codex mcp add growsurf \
  --env GROWSURF_API_KEY=YOUR_API_KEY \
  --env GROWSURF_CAMPAIGN_ID=YOUR_CAMPAIGN_ID \
  -- npx -y @growsurfteam/growsurf-mcp

Resources

GrowSurf MCP server: Check out the GitHub repository for the MCP server
Model Context Protocol: Learn more about the Model Context Protocol specification

Troubleshooting

To troubleshoot common issues during installation, check out Help Center - Installation articles.

Last updated 13 days ago

Was this helpful?

hashtagSandbox/testing environment

hashtagStep 1: Install the GrowSurf Universal Code onto your site

hashtagGet the GrowSurf Universal Code.

hashtagStep 2: Integrate with GrowSurf API(s)

hashtagStep 3: Automate reward fulfillment

hashtagModel Context Protocol (MCP)

hashtagInstallation

hashtagOption 1: Configure via config.toml

hashtagOption 2: Configure via Codex CLI

hashtagResources

hashtagTroubleshooting