Steps to Inject User Data into Beamer script in React
Contents
Way 1: Lazy Loading Beamer and Updating User Data Dynamically
Modify the index.html File:
In your public/index.html file, configure Beamer to initialize lazily by adding the lazy: true parameter to the beamer_config object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your App Title</title>
<!-- Beamer Script -->
<script>
var beamer_config = {
product_id: "your_product_id",
lazy: true
};
</script>
<script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js" defer="defer"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>Update User Data and Initialize Beamer in React:
Once user data is available in your React application, you can call the Beamer.update() method to pass in the user details and initialize Beamer.
Example:
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
const userData = {
user_id: '1234',
user_firstname: 'Jane',
user_lastname: 'Doe',
user_email: 'jdoe@rollstack.com'
};
if (window.Beamer) {
window.Beamer.update(userData);
}
}, []);
return (
<div id="root">
{/* Your app content */}
</div>
);
}
export default App;Way 2: Inject User Data into Beamer Using React Helmet
Install React Helmet:
If you haven’t already installed react-helmet, you can do so using npm or yarn:
npm install react-helmet# oryarn add react-helmet
Locate the Component Where You Want to Embed Beamer:
You can add the Beamer script in the root component (e.g., App.jsx) or any other component that is rendered at the start of your application.
Import and Use React Helmet:
In the selected component, import Helmet from react-helmet and inject the Beamer script with the user-specific data.
import React from 'react';
import { Helmet } from 'react-helmet';
function App() {
// Replace these with actual user data
const userEmail = "user@example.com";
const userName = "John Doe";
return (
<>
<Helmet>
<script>
{`
var beamer_config = {
product_id: 'your_product_id',
user_email: '${userEmail}',
user_name: '${userName}'
};
`}
</script>
<script src="https://app.getbeamer.com/js/beamer-embed.js" defer="defer"></script>
</Helmet>
{/* Rest of your app */}
<div id="root">
{/* Your app content */}
</div>
</>
);
}
export default App;Run Your Application:
- Save the changes.
- Run your React application using
npm startoryarn start. - Now, Beamer will be instantiated with the user-specific data (email and name) passed dynamically.
Was this helpful?
Help us help you more
