My Dashboard

Install on Angular

Add one PopupNeko script to the Angular application shell so it remains available across routes.

On this page
  1. Update src/index.html
  2. Keep it outside components
  3. Build and verify

Add PopupNeko to the HTML document that hosts your Angular application. This loads the embed once instead of recreating it inside a component.

Update src/index.html

Open your PopupNeko project's Install Script page and copy the generated embed. Paste it before the closing </head> tag in src/index.html.

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

Replace the placeholder with the project ID shown in your dashboard. Keep your existing document content intact.

Angular uses src/index.html as the application shell for a standard browser build. If your workspace uses a custom build target or server-rendering setup, add the script to the HTML template that produces the final document head.

Keep it outside components

Do not append the script from a component, lifecycle hook, or router subscription. A component-level installation can create duplicate script instances as Angular mounts views.

PopupNeko listens for pathname changes made through the History API and reinitializes for distinct paths. Query-string and hash-only changes do not count as separate targeting routes.

Build and verify

Build and deploy the Angular application, then open a matching page on the saved production domain. Return to Install Script and choose Verify Connection.

The verifier reads the returned HTML. If your deployment injects the script only after the Angular application starts, the popup may run in a browser while verification remains unsuccessful. Keep the embed in the generated document head where possible.

New projects target / and /pricing. Update Page targeting for your Angular routes, and use Troubleshooting if the installed popup remains hidden.