JavaScript Web API
Use the JavaScript Web API to interact with GrowSurf campaign and participant data.
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.The unique campaign ID from your GrowSurf Universal Code is the campaign that is the target. Click here for image.
Testing in development?
- If you are testing on a development URL (e.g,
http://localhost:3000), you will need to whitelist that URL in the Installation step of the Campaign Editor. Click here for image. - We recommend creating two different campaigns for development and production environments. Learn more here.
The 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.// Listen and wait for the Growsurf Universal Code to initialize
window.addEventListener('grsfReady', () => {
console.log('GrowSurf is Ready!');
// Your code goes here....
});
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...// Check to see if GrowSurf is available
if(!window.growsurf) {
// Listen and wait for the Growsurf Universal Code to initialize
window.addEventListener('grsfReady', () => {
console.log('GrowSurf is Ready!');
// Your code goes here....
});
} else {
console.log('GrowSurf is Already Available');
// Your code goes here....
}
If you are executing
growsurf functions not on page load, we recommend you wrap them in a conditional like this...// Check if the GrowSurf Universal Code is present
if (window.growsurf) {
// Then, open the GrowSurf window
growsurf.open();
}
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.
Other tips:
- Using
grsf_emailis 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_nameandgrsf_last_namewill also set the participant's first name and last name, respectively, if the participant was newly added.
URL Parameter | Description | Example URL |
grsf_email | Set 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 name | https://grow.surf/[email protected]
&grsf_first_name=Bob |
grsf_last_name | (Only applies if grsf_email is set) Set this value if you want to add a new participant with a last name | https://grow.surf/ab[email protected]
&grsf_first_name=Bob
&grsf_last_name=Loblaw |
grsf | (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=z7o8au |
Last modified 6mo ago