Embedding Beamer Script in Vite + React

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

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 Vite + React setup.

For a Vite + React setup, you need to embed the Beamer script in the index.html file located in the root folder of your project.

Steps:

Locate the index.html file:

  • Open your Vite + React project directory.

  • Find the index.html file in the root of the project.

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>	<div id="root"></div></body></html>

Save and Run:

  • Save the changes to the index.html file.

  • Start your Vite + React application using npm run dev or yarn dev.‍‍

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

Related articles