GrowSurf Docs
Help CenterSystem StatusContact SupportYour Dashboard →
  • Welcome
  • Getting Started for Web
    • Google Tag Manager
    • Participant Auto Authentication
  • Getting Started for Native Mobile
  • Developer Tools
    • Embeddable Elements
    • JavaScript SDK
      • Tutorials
      • Single Page Applications
      • API Reference
    • REST API
      • Tutorials
      • Objects
      • API Reference
      • API Guidelines
      • API Response Codes
    • Webhooks
      • Securing Your Webhooks (optional)
      • Examples
      • Events Reference
    • Metadata
  • Integrations
    • ActiveCampaign
      • Tutorials
    • Amplitude
    • AWeber
      • Tutorials
    • Brevo (formerly Sendinblue)
      • Tutorials
    • Cal.com
    • Calendly
    • Campaign Monitor
      • Tutorials
    • Chargebee
    • Constant Contact
      • Tutorials
    • ConvertKit
      • Tutorials
    • Customer.io
      • Tutorials
    • Drip
      • Tutorials
    • EmailOctopus
      • Tutorials
    • Fullstory
    • GetResponse
      • Tutorials
    • Google Ads
    • Google Analytics
    • Heap
    • Help Scout
    • HubSpot
      • Tutorials
    • Intercom
      • Tutorials
    • Klaviyo
      • Tutorials
    • LinkedIn Ads
    • Mailchimp
      • Tutorials
    • MailerLite
      • Tutorials
    • Mailjet
      • Tutorials
    • Make
      • Tutorials
    • Marketo
      • Tutorials
    • Meta (Facebook) Ads
    • Mixpanel
    • Pabbly Connect
      • Tutorials
    • PayPal
    • Pendo
    • PostHog
    • Recurly
    • Salesforce
      • Tutorials
    • Segment
    • SendGrid
      • Tutorials
    • Slack
    • Stripe
    • Tango Card
    • Typeform
    • X (Twitter) Ads
    • Zapier
      • Tutorials
      • Using Filters
      • Troubleshooting
Powered by GitBook
On this page
  • Getting Started
  • Step 1: Make sure the GrowSurf Universal Code is installed
  • grsfReady Event Listener
  • Example of using grsfReady
  • Example of using a conditional
  • URL Parameters
  • List of URL Parameters
  • Next Steps

Was this helpful?

  1. Developer Tools

JavaScript SDK

Use the JavaScript SDK to interact with your GrowSurf campaign and participant data.

Last updated 3 months ago

Was this helpful?

Getting Started

Step 1: Make sure the GrowSurf Universal Code is installed

When you have the installed on a webpage, that webpage has access to the JavaScript SDK, and you are ready for development. You can test this by entering in your browser's Developer Console.

The unique campaign ID from your GrowSurf Universal Code is the campaign that is the target. .

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

  • We recommend creating two different campaigns for development and production environments. .

grsfReady Event Listener

The GrowSurf Universal Code loads asynchronously. Therefore, if you intend to execute 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 SDK functions work.

Example of using grsfReady

// 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...

Example of using a conditional

// Check if the GrowSurf Universal Code is present
if (window.growsurf) {
    // Then, open the GrowSurf window
    growsurf.open();
}

URL Parameters

On any webpage where you have GrowSurf installed (including the GrowSurf-hosted referral portal), you can use the grsf_email URL parameter to ensure that when someone lands on the page, they see their unique referral link right away instead of a signup form.

For example, when an existing participant lands on https://grow.surf/abc123?grsf_email=bob@loblaw.com, they can instantly access their unique referral link without needing to log in. Conversely, if it's a non-existing participant, they will be added to your campaign as a participant, skipping the signup process and seeing their unique link immediately.

Other tips:

  • 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_email

Set this value if you want to automatically add a new participant, or return an existing participant

https://grow.surf/abc123/grsf_email=bob@loblaw.com

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/abc123?grsf_email=bob@loblaw.com &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/abc123?grsf_email=bob@loblaw.com &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's unique referral links.

https://yoursite.com?grsf=z7o8au

Next Steps

View Tutorials
View Embeddable Elements
View Single Page Applications
View API Reference
Click here for image
Click here for image
Learn more here
GrowSurf Universal Code
growsurf.open()