@8xresearch/research-widget

Run an 8xResearch interview inside your React Native app.

Your app shows a small floating pill. Tapping it opens the interview in a WebView over your app; the respondent talks to the AI interviewer and returns to where they were. You install this once. Which study it offers — and whether it offers one at all — is decided by our server on every launch, so new studies reach your users without another app release.

Install

npm install @8xresearch/research-widget
npx expo install react-native-webview @react-native-async-storage/async-storage

Permissions

Both entries must be in app.json before you build, or the microphone prompt never appears. Nothing beyond React Native itself is needed to request them — the widget uses PermissionsAndroid on Android, and on iOS the system prompt is raised by the WebView's own capture request:

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSMicrophoneUsageDescription": "Used for voice interviews you choose to start."
      }
    },
    "android": { "permissions": ["RECORD_AUDIO", "MODIFY_AUDIO_SETTINGS"] }
  }
}

Mount it once, at the root

Wrap your navigator once, so it survives screen changes and scales back when the interview opens. The children stay mounted when the widget is loading, hidden, minimized, or has no study.

import { EightxResearch } from "@8xresearch/research-widget";

export default function App() {
  return (
    <EightxResearch productKey="ab12cd34ef56gh78i9">
      <YourNavigator />
    </EightxResearch>
  );
}

The previous sibling mount remains supported. It presents the sheet and dim backdrop, but cannot scale the host app because the widget does not own those views. Put your full-screen navigator inside EightxResearch for the reference scale and rounded corners. Host touches are blocked and host accessibility is hidden only while the sheet is open. Reduced motion removes the large transform.

The sheet is only for the screens before the interview (the question, consent, any screener). Once the conversation starts, the interview shows as a small panel floating in the corner, 280pt wide and clear of bottomInset, and your app stays fully usable around it: nothing is scaled, dimmed or blocked. Collapsed, it is just the orb in that same corner.

Updates without a new release

You install this package once. Which study it offers, every screen of the interview, and from 0.7.0 the widget's frame (orb size, corner distance, the floating panel's size, and whether a running interview floats or uses the sheet) all come from our server on each launch. Design changes reach your users without a package update or an app release. Every value is checked and clamped before use, and the package keeps working with its built-in defaults if the server cannot be reached.

For actual backdrop blur, install a native blur adapter in the host app. The SDK does not require Expo. With Expo SDK 57, install expo-blur and supply both renderers; Android requires BlurTargetView around the content to blur:

import { useCallback, useRef, type ReactNode } from "react";
import { View, StyleSheet } from "react-native";
import { BlurTargetView, BlurView } from "expo-blur";
import { EightxResearch } from "@8xresearch/research-widget";

function App() {
  const target = useRef<View | null>(null);
  const renderHost = useCallback(
    (children: ReactNode) => (
      <BlurTargetView ref={target} style={{ flex: 1 }}>
        {children}
      </BlurTargetView>
    ),
    []
  );
  const renderBackdrop = useCallback(
    () => (
      <BlurView
        style={StyleSheet.absoluteFill}
        intensity={40}
        tint="default"
        blurTarget={target}
        blurMethod="dimezisBlurView"
      />
    ),
    []
  );
  return (
    <EightxResearch
      productKey="ab12cd34ef56gh78i9"
      renderHost={renderHost}
      renderBackdrop={renderBackdrop}
    >
      <YourNavigator />
    </EightxResearch>
  );
}

The SDK paints the dark scrim over the supplied blur. Without an adapter, the scrim still works. See examples/expo-widget/App.tsx for the running host.

Props

| Prop | Required | What it does | | ------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | productKey | yes | Your product's public key, from the 8xResearch Setup page. Safe to ship in an app bundle — it names a product and nothing more. | | origin | no | Where 8xResearch lives. Defaults to https://8xresearch.com. | | children | no | Host app content to keep mounted and scale/round when the sheet opens. | | renderHost / renderBackdrop | no | Host blur adapter. renderHost wraps children; renderBackdrop paints a full-screen blur behind the SDK scrim. | | bottomInset | no | Height of your own tab bar or bottom chrome, so the launcher sits above it. Use this rather than wrapping the component in a shorter container: the wrapper also becomes the sheet's box, and the sheet then cannot take itself off screen. | | position | no | bottom-right (default) or bottom-left. | | color | no | Overrides the study's brand colour. | | onStart / onComplete / onClose | no | Called when the respondent starts, finishes, or puts the interview down. | | onFailure | no | Called with { reason, retryable } when an interview cannot continue. |

What it does on its own

• Wears the clear-glass pane you chose on the Setup page — light or dark, tinted with your brand colour — so the launcher and the interview sit on your app rather than on top of it. Change it in the dashboard and every installed app follows on its next launch.
• Shows nothing at all when the product has no live study, when the respondent has completed one, for three days after "ask me later", and forever after "don't ask again".
• Remembers an unfinished interview and returns the respondent to it rather than starting a second one.
• Keeps working offline for up to 24 hours on a previously fetched answer.
• Never blocks your app: if anything fails, the pill simply does not appear.

Known limitations

Filled in from device testing — see the OTA build plan's B1 matrix.

| Device | OS | Voice | Notes | | --------- | --- | ----- | ----- | | pending | | | |

Where voice is unavailable, the interview page offers text instead, so a study still completes.