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
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 initializewindow.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 grsfReady
callback 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 availableif(!window.growsurf) {// Listen and wait for the Growsurf Universal Code to initializewindow.addEventListener('grsfReady', () => {console.log('GrowSurf is Ready!');// You code goes here....});} else {console.log('GrowSurf is Already Available');// You 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 presentif (window.growsurf) {// Then, open the GrowSurf windowgrowsurf.open();}
Most of the time, it is not necessary to use GrowSurf's URL parameters, however there are certain cases where they may come in handy (e.g, promoting your referral campaign in the footer of your customer promotional/transactional emails).
Let's say you've set up your site so that when a new visitor signs up, they get redirected to https://yoursite.com/thank_you
and this page is where you have the GrowSurf embedded form installed. If the participant cleared their browser cookies and returned to the /thank_you
page, they would not see the logged-in participant view.
Solution: You can set the grsf_email
URL parameter (e.g, https://yoursite.com/[email protected]
) to automatically log them in. This is useful when you are sending out an email blast to your customers, and you want them to always see the logged-in participant view.
Let's say that you only want to add new participants to your GrowSurf campaign when they show high share-intent, and visit a specific webpage that you set up at https://yoursite.com/refer
(i.e, this page would contain GrowSurf embeddable elements and act as a dedicated referrer portal for your participants).
Solution: You could set grsf_email
, grsf_first_name
, and grsf_last_name
URL parameters to automatically enroll them as new participants. This way, the participants in your campaign are only people who have high-intent to share.
URL Parameter | Description | Example URL |
| 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. |
|
| Set this value if you want to automatically add a new participant, or return an existing participant |
|
| (Only applies if |
|
| (Only applies if |
|