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 or yarn start.

Click Here to know about How to Inject User Data into Beamer script in React.

Your Data Security and Privacy is our Priority.

At Beamer, we care about our customers’ data and this is how we protect it.

icons

Data Ownership

Your account and data belongs to you and will not be sold in any case. We can delete your account and data upon your request. Learn more

icons

Encryption

Beamer data is encrypted in transit (advanced TLS protocols and 2,048-bit keys or better) and at rest (using AES 256 encryption with integrity).

icons

Access

Customer data is always backed up and uptime is over 99.9%.

icons

GDPR

Beamer is GDPR Compliant and has the Data Processing Agreements in place. Learn more

icons

Penetration testing

Third party network, application and physical security tests are conducted regularly. Learn more