> For the complete documentation index, see [llms.txt](https://docs.growsurf.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.growsurf.com/getting-started.md).

# Getting Started for Web

{% hint style="info" %}
**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](https://support.growsurf.com/article/262-how-can-i-test-in-a-sandbox-or-development-environment).
{% endhint %}

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

![Find your program-specific GrowSurf Universal Code in the Installation step of the Program Editor](/files/-LfJyLczHVfm3nA0KajL)

{% hint style="info" %}
**Note:**

* Your program-specific GrowSurf Universal Code will work on any URL that shares the same origin ([what's same-origin?](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)) as the *Share URL* or *Signup URL* that you entered in the *Installation* step of the *Program Editor*. [Click here for image](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LeklWo0yn03AhWro2Ux%2F-LfUACx31pyQJHxsgdvN%2F-LfUAF1aWVBnBJ5YshXz%2FScreen%20Shot%20on%202019-05-22%20at%2018%3A53%3A26.png?alt=media\&token=0ae62744-aa53-44d8-ab40-2a1d2bae4132)
* If you have *Participant authentication/login* enabled, you may want to set up [*Participant Auto Authentication*](/getting-started/participant-auto-authentication.md)*.*
* To set up a development process that supports multiple environments (e.g, development, production), [view this article](https://support.growsurf.com/article/262-how-can-i-test-in-a-sandbox-or-development-environment).
  {% endhint %}

## Step 2: Connect integrations or use the GrowSurf API

GrowSurf provides no-code [integrations](https://growsurf.com/integrations/) (such as Stripe, HubSpot, Salesforce) to track when referred leads successfully convert. You can also use our web/mobile SDKs or REST API to integrate with GrowSurf.

| Development Tool                                         | Type        | Description                                                                                                       |
| -------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------- |
| [**JavaScript SDK**](/developer-tools/javascript-sdk.md) | Client-side | Open/close the GrowSurf window, generate referral links, track referral attribution.                              |
| [**iOS SDK**](/developer-tools/ios-sdk.md)               | Client-side | Open/close the GrowSurf window, generate referral links, track referral attribution.                              |
| [**Android SDK**](/developer-tools/android-sdk.md)       | Client-side | Open/close the GrowSurf window, generate referral links, track referral attribution.                              |
| [**REST API**](/developer-tools/rest-api.md)             | 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 an [integration](https://growsurf.com/integrations) or by using [Webhooks](/developer-tools/webhooks.md).

## Step 4: Open the GrowSurf window

The GrowSurf window is a widget that opens from within your product. It is the central command center for your program participants to share their unique link, send invites, and track the status of their referrals. It is branded, customizable, and available via web and mobile SDKs.

![](https://d33v4339jhl8k0.cloudfront.net/docs/assets/524448053e3e9bd67a3dc68a/images/52b3179ce4b0a3b4e5ec6393/file-kPc7JvfiR4.png)

{% embed url="<https://youtu.be/ESlkP4k0ksc>" %}

***

## Troubleshooting

To troubleshoot common issues during installation, check out [Help Center - Installation](https://support.growsurf.com/category/232-troubleshooting) articles or [contact GrowSurf support](https://app.growsurf.com/settings#contact_support).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.growsurf.com/getting-started.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
