To seamlessly integrate StoreRocket into your React application, include the StoreRocket widget script in your HTML's <head> section. This guide covers both class and functional component approaches, catering to various React development styles.
Class Component Approach
1. Embed StoreRocket Script
Insert the following script tag in your HTML's <head> section:
<script src="//cdn.storerocket.io/widget.js"></script>
2. Create a Div Container
In your React class component, add a div with a specific class to hold the store locator:
<div className="store-locator-widget"></div>
3. Initialize StoreRocket
Use the componentDidMount() method to initialize StoreRocket:
componentDidMount() {
const config = {
selector: ".store-locator-widget",
account: "<YOUR_ACCOUNT_ID>"
};
window.StoreRocket.init(config);
}
Functional Component Approach
For modern React applications using functional components:
1. Embed StoreRocket Script
As with the class component, include the script in your HTML's <head>.
<script src="//cdn.storerocket.io/widget.js"></script>
2. Create a Div Container
Define a div in your functional component:
<div className="store-locator-widget"></div>
3. Initialize StoreRocket with useEffect
Use the useEffect hook for initialization after the component mounts:
import React, { useEffect } from 'react';
function StoreLocator() {
useEffect(() => {
const config = {
selector: ".store-locator-widget",
account: "<YOUR_ACCOUNT_ID>"
};
window.StoreRocket.init(config);
}, []);
return <div className="store-locator-widget"></div>;
}
(Note: Replace <YOUR_ACCOUNT_ID> with your actual StoreRocket project ID that you can find in this page.)