Add Sumly to a Capacitor or Ionic app
There is no Capacitor SDK yet. The app can post screens to Sumly's events API itself, with the public key and RevenueCat's app user id, from your router's change of page.
Not yet run in a real app. This is the plain events API, not an SDK: there is no queue, so a screen sent while offline is lost unless your app keeps it and sends it later.
Step by step
- 1
In Sumly, open Visitors and copy your project's public key (
sl_…). - 2
Add the small function below: it posts a screen to
https://sumly.dev/api/v1/eventswith the key as a Bearer token and RevenueCat's app user id ((await Purchases.getAppUserID()).appUserID) asuser_id. Sumly's API answers apps on any origin, so plain fetch works. - 3
Call it on each change of page: Angular's
NavigationEnd, Vue Router'safterEachor React Router'suseLocation. The screens show on the project's Sources list.
The platform comes from Capacitor; on the web, use the website script instead.
import { Capacitor } from '@capacitor/core';
import { Purchases } from '@revenuecat/purchases-capacitor';
export async function sumlyScreen(screen: string) {
if (!Capacitor.isNativePlatform()) return;
const { appUserID } = await Purchases.getAppUserID();
await fetch('https://sumly.dev/api/v1/events', {
method: 'POST',
headers: { Authorization: 'Bearer sl_your_key', 'Content-Type': 'application/json' },
body: JSON.stringify({ events: [{ type: 'screen', screen, user_id: appUserID, platform: Capacitor.getPlatform() }] }),
});
}
Or let your coding assistant do it
Paste this into Claude Code, Cursor or Codex in your project. It fits the code to how your project is built, asks you for the dashboard steps and leaves the keys to you.
See what it says
Set up Capacitor and Ionic for Sumly in this project.
Sumly (https://sumly.dev) shows revenue next to the visits and app users it came from. The full guide is https://sumly.dev/install/capacitor; read it if anything below is unclear.
Steps:
1. In Sumly, open Visitors and copy your project's public key (`sl_…`).
2. Add the small function into Sumly: it posts a screen to `https://sumly.dev/api/v1/events` with the key as a Bearer token and RevenueCat's app user id (`(await Purchases.getAppUserID()).appUserID`) as `user_id`. Sumly's API answers apps on any origin, so plain fetch works.
3. Call it on each change of page: Angular's `NavigationEnd`, Vue Router's `afterEach` or React Router's `useLocation`. The screens show on the project's Sources list.
sumly.ts: The platform comes from Capacitor; on the web, use the website script instead.
```
import { Capacitor } from '@capacitor/core';
import { Purchases } from '@revenuecat/purchases-capacitor';
export async function sumlyScreen(screen: string) {
if (!Capacitor.isNativePlatform()) return;
const { appUserID } = await Purchases.getAppUserID();
await fetch('https://sumly.dev/api/v1/events', {
method: 'POST',
headers: { Authorization: 'Bearer sl_your_key', 'Content-Type': 'application/json' },
body: JSON.stringify({ events: [{ type: 'screen', screen, user_id: appUserID, platform: Capacitor.getPlatform() }] }),
});
}
```
Routers: Whichever your app uses.
```
// Angular
this.router.events.subscribe((e) => { if (e instanceof NavigationEnd) sumlyScreen(e.urlAfterRedirects); });
// Vue Router
router.afterEach((to) => sumlyScreen(to.path));
// React Router
const location = useLocation();
useEffect(() => { sumlyScreen(location.pathname); }, [location]);
```
Keep in mind: Do not load the website script inside the app: its pages would count as a website on localhost, not as an app. With CapacitorHttp turned on in capacitor.config, the same fetch goes through the native network layer; nothing else changes.
How to work:
- Look at how this project is built first, and fit the code to its framework and its way of doing things; the examples above are a starting point, not something to paste as is.
- Steps that happen in a dashboard (Sumly, or Capacitor and Ionic's own) are mine: tell me exactly what to click, then wait for me.
- Keys the code needs belong in environment variables, never in the code or the repository. Never ask me to paste a secret key into this chat; tell me which variable to set.
- Change only what this needs, show me the changes before you commit, and tell me how to check that it works.
- sl_your_key stands for the project's public key; it is on the Visitors page in Sumly. Ask me for it.
Consent
With no SDK, consent is your app's to keep: send nothing until the person agrees, where your app asks first.
Purchases
Purchases come from RevenueCat, Adapty or Superwall, not from your app. Send as user_id the person they know: RevenueCat's app user id, or the id you pass to Adapty or Superwall to identify the user. Each purchase then shows the screens and the source that came before it.
Your own domain
Optional: send to /api/v1/events on your own address instead, the one your site's script uses (one DNS record on Visitors, on Starter and Growth).
Good to know
- Do not load the website script inside the app: its pages would count as a website on localhost, not as an app.
- With CapacitorHttp turned on in capacitor.config, the same fetch goes through the native network layer; nothing else changes.
From Capacitor and Ionic's own documentation, checked 4 November 2026: capacitorjs.com/docs/core-apis/web, capacitorjs.com/docs/apis/http, github.com/RevenueCat/purchases-capacitor, router.vuejs.org/guide/advanced/navigation-guards.html .
Other apps
Try it with your own projects
Sign in with Google or a code by e-mail and connect your first project. Free for one project, and 14 days of a paid plan with no card.
Start freeOr look around first: open the live demo.