My Dashboard

Install on React

Add the PopupNeko embed to the HTML document that hosts your React application.

On this page
  1. Add the embed to index.html
  2. Navigation and duplicate installs
  3. Build and verify

For a React application built with Vite, install the script in the project-root index.html. If you use Next.js, follow the Next.js guide instead.

Add the embed to index.html

Copy your script from Install Script in PopupNeko and place it in the existing HTML head. Keep your existing root element and application entry script unchanged.

index.html
<head>
  <!-- Keep your existing metadata and links. -->
  <script
    defer
    src="https://popupneko.com/script/popupneko.js"
    data-project-id="YOUR_PROJECT_ID"
  ></script>
</head>

Replace YOUR_PROJECT_ID with the dashboard value. Vite uses index.html as an application entry point; see its HTML entry documentation.

If your React build uses a different HTML template, add the same script to that document. You do not need to install an npm package or mount a PopupNeko React component.

The embed observes pathname changes through pushState, replaceState, and browser back/forward navigation. It reloads eligible activity and applies targeting for the new path.

Do not append the script from a page component or an effect that runs on every route. A single global embed avoids duplicate installation work and remains available throughout navigation. Hash-only routing is not supported for separate page-targeting rules; query/hash changes do not trigger a new pathname initialization.

Build and verify

Run your site's normal build and deployment process. Visit the production homepage and use Verify Connection in PopupNeko. This checks the delivered HTML, which is why the HTML-template approach is useful.

New projects target / and /pricing. Change Page targeting if needed. Use Allowed Domains for an online staging host; localhost is already allowed.