`@mushi-mushi/capacitor`

The Mushi Mushi Capacitor plugin for Ionic and Capacitor apps (@capacitor/core 6 or later). The web fallback uses @mushi-mushi/core so the plugin works in WebView previews; native iOS and Android delegate to the standalone Mushi Mushi SDKs so a hybrid app gets the same shake-to-report and screenshot UX as a pure-native app.

Install


npm install @mushi-mushi/capacitor
npx cap sync

Configure


import { Mushi } from '@mushi-mushi/capacitor'
 
await Mushi.configure({
  projectId: 'YOUR_PROJECT_ID',
  apiKey:    'YOUR_PUBLIC_API_KEY',
  // Optional. iOS, Android and the web fallback all default to the hosted
  // Mushi Mushi API; set it only for a self-hosted deployment.
  endpoint:  'https://dxptnwrhwsqckaftyymj.supabase.co/functions/v1/api',
 
  triggerMode: 'shake',         // default; 'shake' | 'button' | 'both' | 'none'
  captureScreenshot: true,      // base64 JPEG of the screen, via the native bridge
  triggerInsetPreset: 'tabBarSafe',  // or 'dockSafe'
  // useNativeWidget: true       // present the native iOS/Android bottom sheet
})

Full config options are documented in MushiCapacitorPluginConfig.

Submit a report


await Mushi.report({
  description: 'Lesson screen renders blank after deep link',
  category:    'bug',
  metadata:    { lessonId: 'l_42' },
})


await Mushi.showWidget({ category: 'visual' })
await Mushi.flushQueue()
await Mushi.setUser({ user: { id: 'u_42', email: 'me@example.com' } }) // { user: null } on logout
await Mushi.setMetadata({ key: 'build', value: '2026.4.29' })
 
const sub = await Mushi.addListener('reportSubmitted', (e) => {
  console.log('Report accepted:', e)
})

Position the trigger above your tab bar / dock

Use a preset (triggerInsetPreset: 'tabBarSafe' for a 72 dp lift, or 'dockSafe' for a 96 dp lift) or pass your own offsets. With neither, the button sits 96 from the bottom and 20 from the side. The side key is trailing / leading on iOS and end / start on Android, so set both for a cross-platform app:


await Mushi.configure({
  /* ... */
  triggerInset: { bottom: 88, trailing: 16, end: 16 },
})

Considering a move to React Native? The Capacitor → React Native migration guide covers the plugin map, the API mapping (Mushi.configure → <MushiProvider>, Mushi.report → useMushiReport()), CI/CD on GitHub Actions + Fastlane, and how to keep the same Mushi Mushi project / API key across both clients during the cutover.

See Quickstart → Capacitor for the end-to-end setup, and Capacitor bottom-dock notes for native shell integration tips.

@mushi-mushi/capacitor

Install

Configure

Submit a report

Programmatic widget + listeners

Position the trigger above your tab bar / dock

`@mushi-mushi/capacitor`