Steps to Inject User Data into Beamer script in React

  • Published on Jun 11, 2025
  • 2 minute(s) read
Prev Next

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: '[email protected]'
    };
    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 = "[email protected]";
  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 start or yarn start.
  • Now, Beamer will be instantiated with the user-specific data (email and name) passed dynamically.
Related articles