GitHub

​Check out the growsurf-samples GitHub repo for sample code.

React

​Check out the GitHub sample code for React here.

React Component

To initialize GrowSurf asynchronously within your SPA, simply include the following code within your React components componentDidMount() lifecycle event.

App.js
  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);
  }

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 initialized, you will then have the ability to add any GrowSurf embeddable element(s) you would like within your components JSX.

App.js
  render() {
    return (
      <div>
        <div className='App'>REACT + GROWSURF</div>
        <div data-grsf-block-form></div>
      </div>
    ) 
  }

Vue

​Check out the GitHub sample code for Vue here.

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 growsurf.init() to re-initialize GrowSurf to make the embeddable elements render.