🔧
Integrate
🎁
Automate Rewards
JavaScript Web API
Use the JavaScript Web API to add new participants, trigger referrals, get limited campaign data, get limited participant data, and open/close the GrowSurf window.
Getting Started
Step 1: Make sure the GrowSurf Universal Code is installed
When you have the GrowSurf Universal Code installed on a webpage, that webpage has access to the JavaScript Web API, and you are ready for development. You can test this by entering
growsurf.open() in your browser's Developer Console.Note: The unique campaign ID that is set in your GrowSurf Universal Code is the campaign in which the GrowSurf JavaScript Web API will execute for. Click here for image
Testing in development? If you are testing on a development URL, you can add that URL to the whitelist in the Installation step of the Campaign Editor. Click here for image
grsfReady Event Listener
grsfReady Event ListenerThe GrowSurf Universal Code loads asynchronously, so if you intend on executing any
growsurf functions on page load, you must wait until the library has completely loaded.When loaded successfully, the GrowSurf Universal Code will dispatch a
grsfReady event notifying any event listeners that it is ready for use. Only then will any GrowSurf JavaScript Web API functions work.Example of using grsfReady
grsfReady1
// Listen and wait for the Growsurf Universal Code to initialize
2
window.addEventListener('grsfReady', () => {
3
console.log('GrowSurf is Ready!');
4
// Your code goes here....
5
});
Copied!
In some cases the GrowSurf Universal script may already be available and the
grsfReady event may have already fired. This depends on how long it takes your scripts to load and can happen for various other reasons.
If your grsfReadycallback isn't being invoked on thegrsfReady event we recommend you check to see if the growsurf script is already available before adding the event listener callback with a conditional like this...
1
// Check to see if GrowSurf is available
2
if(!window.growsurf) {
3
// Listen and wait for the Growsurf Universal Code to initialize
4
window.addEventListener('grsfReady', () => {
5
console.log('GrowSurf is Ready!');
6
// Your code goes here....
7
});
8
} else {
9
console.log('GrowSurf is Already Available');
10
// Your code goes here....
11
}
Copied!
If you are executing
growsurf functions not on page load, we recommend you wrap them in a conditional like this...Example of using a conditional
1
// Check if the GrowSurf Universal Code is present
2
if (window.growsurf) {
3
// Then, open the GrowSurf window
4
growsurf.open();
5
}
Copied!
URL Parameters
On any webpage you have GrowSurf installed (including the GrowSurf-hosted referral portal), you can use the
grsf_email URL parameter to automatically force the participant view when someone lands on the webpage.Example:
https://grow.surf/[email protected]Existing participants will not have to log in to grab their unique link, and new participants will skip the signup process, seeing their unique link immediately upon landing instead.
Using
grsf_email is also useful for adding new participants on the fly (i.e, when a person shows high-intent to share, they land on your referral portal and only then are they added to your GrowSurf campaign).Setting
grsf_first_name and grsf_last_name will also set the participant's first name and last name, respectively, if the participant was newly added.List of URL Parameters
URL Parameter
Description
Example URL
grsf_emailSet this value if you want to automatically add a new participant, or return an existing participant
https://grow.surf/abc123/[email protected]grsf_first_name(Only applies if
grsf_email is set) Set this value if you want to add a new participant with a first namehttps://grow.surf/[email protected]
&grsf_first_name=Bobgrsf_last_name(Only applies if
grsf_email is set) Set this value if you want to add a new participant with a last namehttps://grow.surf/[email protected]
&grsf_first_name=Bob
&grsf_last_name=Loblawgrsf(Read-Only) This value represents the referrer's unique GrowSurf ID. You never have to worry about setting this value, as it gets automatically generated in participant unique referral links.
https://yoursite.com?grsf=z7o8auNext Steps
Last modified 1mo ago