Embedding Beamer Script in Vanilla React
Embedding the Beamer script in your React application can be done differently based on whether you’re using a vanilla React setup or a Vite + React setup or Nextjs. This guide will help you integrate Beamer with your Vanilla React setup.
For a vanilla React setup, you need to embed the Beamer script in the public/index.html
file. This file serves as the main HTML template for your React application.
Step 1: Locate the public/index.html
File:
- Open your React project directory.
- Navigate to the
public
folder. - Open the
index.html
file.
Step 2: Embed the Beamer Script:
Add the following script tags inside the <head>
section of the index.html
file:
<!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', filter: 'example-filter' }; </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>
Step 3: Save and Run:
- Save the changes to the
index.html
file. - Start your React application using
npm start
oryarn start
.
Step 4: Click Here to know about How to Inject User Data into Beamer script in React.
Was this helpful?
Help us help you more