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
  • GitHub
  • React
  • React Component
  • Example using Classes
  • Example using Effect Hook
  • Vue
  • Troubleshooting

Was this helpful?

  1. Developer Tools
  2. JavaScript SDK

Single Page Applications

View sample code and troubleshooting tips for integrating GrowSurf into common JavaScript frameworks such as React and Vue.

Last updated 3 months ago

Was this helpful?

To test in a sandbox/development environment, we recommend creating two different campaigns for development and production environments. .

Due to the asynchronous behavior of SPAs, if the GrowSurf Universal Code has already been added you may need to re-initialize GrowSurf at times. For example, if embeddable elements are not being displayed, call .

GitHub

.

React

Check out the GitHub sample code for React and our .

React Component

To initialize GrowSurf asynchronously within your SPA, simply include the following code within your lifecycle event.

IMPORTANT: componentDidMount()is a lifecycle method for class components and cannot be used in functional components. If you want to initialize GrowSurf using a functional component you will need to use the .

Example using Classes

This snippet of code will only add the GrowSurf Universal Code when a visitor is brought to a page within your site that includes the component with this code. Once the script has been added successfully and , you will then have the ability to add any (s) you would like within your components JSX.

App.js
 class App extends React.Component {
   componentDidMount() {
    const script = document.createElement('script');
    script.src = 'https://app.growsurf.com/growsurf.js?v=2.0.0';
    script.setAttribute('grsf-campaign', 'jaoh4t');
    script.async = true;
    document.head.appendChild(script);
  }
  
  render() {
  return (
    <div>
      <div className='App'>REACT + GROWSURF</div>
      <div data-grsf-block-form></div>
    </div>
    ) 
  }
  }

Example using Effect Hook

App.js
  import {useEffect} from 'react'
  
  function App() {
    // GrowSurf Universal Code
    const addGrsfScript = () => {
      const script = document.createElement('script');
      script.src = 'https://app.growsurf.com/growsurf.js?v=2.0.0';
      script.setAttribute('grsf-campaign', 'jaoh4t');
      script.async = true;
      document.head.appendChild(script);
  };
    
    useEffect(() => {
    addGrsfScript();
    }, [])
  }

In React, third-party JavaScript SDKs like GrowSurf's are not automatically accessible within the Virtual DOM. To interact with them, you must reference them via the window object. Example

window.growsurf.getParticipantId();

Vue

Troubleshooting

.

If you experience issues with embeddable elements rendering on the page (depending on how URL routes are handled in your SPA, this behavior will typically be seen when you refresh the webpage with the absolute route) you will need to call to re-initialize GrowSurf to make the embeddable elements render.

Check out the GitHub sample code for Vue here
growsurf.init()
Learn more here
growsurf.init()
Check out the growsurf-samples GitHub repo for sample code
here
GrowSurf React project
React components componentDidMount()
Effect Hook
GrowSurf embeddable element
initialized