---
title: "Embedding Beamer Script in Vite + React"
slug: "embedding-beamer-script-in-vite-react"
updated: 2025-10-08T16:41:19Z
published: 2025-10-08T16:41:19Z
canonical: "help.userflow.com/embedding-beamer-script-in-vite-react"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.userflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding Beamer Script in Vite + React

Embedding the 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:

```plaintext
<!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](/beamer/docs/steps-to-inject-user-data-into-beamer-script-in-react)