🔧
Integrate
🎁
Automate Rewards
Single Page Applications
GrowSurf integrates seamlessly with all single page applications (SPAs), including those running on common JavaScript frameworks such as React, Angular, and Vue.
If integrating GrowSurf globally throughout your SPA, there are no special instructions required. Simply install your campaign-specific GrowSurf Universal Code onto your site and you can begin using the GrowSurf JavaScript Web API.
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 growsurf.init().
GitHub
React
React Component
To initialize GrowSurf asynchronously within your SPA, simply include the following code within your React components
componentDidMount() lifecycle event. App.js
1
componentDidMount() {
2
const script = document.createElement('script');
3
script.src = 'https://app.growsurf.com/growsurf.js?v=2.0.0';
4
script.setAttribute('grsf-campaign', 'jaoh4t');
5
script.async = true;
6
document.head.appendChild(script);
7
}
Copied!
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
1
render() {
2
return (
3
<div>
4
<div className='App'>REACT + GROWSURF</div>
5
<div data-grsf-block-form></div>
6
</div>
7
)
8
}
Copied!
To access third party javascript SDK's such as GrowSurf's JavaScript Web API from within Reacts Virtual DOM, you must use window(dot) syntax.
Example
1
window.growsurf.getParticipantId();
Copied!
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
growsurf.init() to re-initialize GrowSurf to make the embeddable elements render.Last modified 8mo ago
Copy link