# Install GeoEngage on React

> Add the GeoEngage tag to the index.html of a React app built with Vite or Create React App. Route changes are detected.

A single-page React app serves every route from one HTML file. The tag goes in that file's `<head>`.

## Add the tag

1. Open the `index.html` your build serves:
   - **Vite:** `index.html` in the project root
   - **Create React App:** `public/index.html`
2. Paste the tag inside `<head>`, above your app's own `<script>`:

   ```html title="index.html"
   <!-- GeoEngage — place in <head>, above your content.
        Do not add async/defer: the widget must run before the page paints. -->
   <script
     src="https://cdn.geoengage.app/ge.js"
     data-api-key="YOUR_API_KEY"
     data-require-consent="false"
   ></script>
   ```

3. Build and deploy. From then on, rules change from the dashboard without a rebuild.

> [!WARNING]
> Don't add the tag from a component, whether with `useEffect`, React Helmet or a script-loading hook. By the time a component runs, React has already painted the page.

## Routing

React Router, TanStack Router and most other routers change the URL through the History API, which the widget follows. Nothing to set up. If yours works differently, see [Single-page apps](https://geoengage.app/docs/widget/single-page-apps).

Using Next.js? See [Install on Next.js](https://geoengage.app/docs/install/nextjs).

## Check it's working

Deploy, open your site in a private window, then follow [the checks](https://geoengage.app/docs/install#check-its-working).

---

Source: https://geoengage.app/docs/install/react