---
title: "Capacitor & Ionic"
description: "Capacitor and Ionic apps load from capacitor://localhost, so CanaryLytics needs the project's \"Allow local origins\" toggle enabled. data-domain stays your real domain."
last_updated: "2026-07-30"
---

# Capacitor & Ionic

Capacitor and Ionic apps load the web view from `capacitor://localhost` (or `ionic://localhost` on older setups). In both cases the page's **hostname is literally `localhost`**, even though this is a production app on someone's phone rather than a dev server.

Enable the project's **"Allow local origins"** toggle (dashboard → Settings) so ingest and the widget/SDK's CORS layer accept it. The toggle covers `localhost`, `127.0.0.1`, and `*.localhost` origins for the project.

```html
<script src="https://cdn.analytics.canarycoders.es/lytics.js" data-domain="myapp.com" defer></script>
```

`data-domain` should still be your real production domain (or whatever value you want events grouped under). The toggle is about which *Origin* is trusted, not what domain the snippet reports.

<Aside type="caution" title="This toggle is shared with dev">
  "Allow local origins" also governs plain `localhost` development traffic on this project (see [Localhost & development](/docs/environments/localhost/)). Turning it off to "clean up" dev noise will also silently stop ingestion from every Capacitor/Ionic install of this app. The two use cases share the same hostname and can't be told apart at the Origin-check level.
</Aside>

## Related

<CardGrid>
  <LinkCard title="Localhost & development" description="The other use case behind the same toggle." href="/docs/environments/localhost/" />
  <LinkCard title="Electron" description="The desktop equivalent, using custom protocol schemes instead." href="/docs/environments/electron/" />
</CardGrid>

## Sitemap

- [Docs sitemap](https://analytics.canarycoders.es/docs/sitemap.md)
- [Full documentation as a single file](https://analytics.canarycoders.es/llms-full.txt)