Emovart Docs
Mobile SDK

How to Add Emovart to Your React Native Mobile App

Put your Emovart help center inside your React Native app with a lightweight WebView screen — complete with deep links to articles, contact pre-fill, and content updates that never wait for app review.

Last updated on July 9, 2026

Overview

Emovart's mobile integration is deliberately lightweight. Instead of bundling a heavy native library, you render your existing help center — the same site that lives at https://your-slug.emovart.studio — inside a WebView screen in your React Native app. Users get what looks and feels like a native help section, while the content is served live from Emovart.

This architecture has one huge advantage: your help content never goes through app review. Update an article in Notion, press Resync in the console (or let the automatic resync pick it up), and every user sees the new version the next time they open the help screen — on iOS and Android at the same time.

The pattern works with both Expo and bare React Native projects, and the only dependency is the community-standard react-native-webview package.

Help center inside an app
Help center inside an app

Prerequisites

Before you start, make sure you have:

  • A live Emovart site. Create one under Settings → Help Centers on emovart.studio, connect Notion with the one-click OAuth flow, pick your root page, and sync. Your site URL looks like https://your-slug.emovart.studio (a connected custom domain works just as well).
  • A React Native app — Expo or bare workflow, any reasonably recent version.
  • Your usual tooling — Node.js, Metro, and Xcode or Android Studio for device builds.

Prefer watching over reading? This short walkthrough covers the whole setup end to end:

Setup Steps

1. Prepare Your Content

Your in-app help is only as good as the articles behind it. In Notion, organize your root page into collections (categories), optional sub collections, and articles — the same structure you would use for any Emovart site. Give each article a fully-italic first paragraph so it gets a clean subtitle in lists and search results.

Then open your site in a phone browser and click around. If it reads well there, it will read well inside your app. Short paragraphs, clear headings, and reasonably sized images go a long way on small screens.

2. Install the SDK

Emovart's mobile SDK is a pattern rather than a package: the only dependency you add is react-native-webview.

# npm
npm install react-native-webview

# yarn
yarn add react-native-webview

On Expo, use expo install so the version matches your SDK. On bare React Native, install the iOS pods after adding the package:

# Expo projects
npx expo install react-native-webview

# Bare React Native — link the native module on iOS
cd ios && pod install

Rebuild the app once after installing. The package ships native code, so a hot reload alone will not pick it up.

3. Add Emovart to Your App

Create a small screen component that wraps your help center URL. This is the entire integration — roughly twenty lines that you own and can shape however you like:

// src/screens/EmovartHelpCenter.tsx
import React from "react";
import { SafeAreaView, StyleSheet } from "react-native";
import { WebView } from "react-native-webview";

const HELP_CENTER_URL = "https://your-slug.emovart.studio";

export default function EmovartHelpCenter({ route }) {
  // Optional deep link, e.g. "/getting-started/creating-your-first-project"
  const path = route?.params?.path ?? "/";

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        source={{ uri: `${HELP_CENTER_URL}${path}?embed=1` }}
        startInLoadingState
        allowsBackForwardNavigationGestures
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#ffffff" },
});

The ?embed=1 flag switches your site into app view: the header and footer are hidden so only the content shows, which feels far more native on a phone.

Now register the screen with your navigator. React Navigation is shown here, but any navigation library works the same way:

// App.tsx
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import EmovartHelpCenter from "./src/screens/EmovartHelpCenter";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* ...your existing screens... */}
        <Stack.Screen
          name="HelpCenter"
          component={EmovartHelpCenter}
          options={{ title: "Help & Support" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

4. Open the Help Center

You can now open help from anywhere — a Help button, a settings row, an empty state, an error dialog:

import { Button } from "react-native";
import { useNavigation } from "@react-navigation/native";

function HelpButton() {
  const navigation = useNavigation();

  return (
    <Button
      title="Get Help"
      onPress={() => navigation.navigate("HelpCenter")}
    />
  );
}

Because the screen accepts a path param, you can also deep-link straight to a collection or a single article. Paths mirror your site's URL structure, which comes from your Notion page titles:

// Open the help center home
navigation.navigate("HelpCenter");

// Jump straight to one article
navigation.navigate("HelpCenter", {
  path: "/getting-started/creating-your-first-project",
});

// Or open a whole collection
navigation.navigate("HelpCenter", { path: "/billing" });

Deep links shine for contextual help: point your billing screen at the billing collection, your import flow at the import guide, and so on. Users land on the answer instead of the front door.

Configuration Options

Customizing the Experience

Everything about the in-app experience is controlled by the URL you load — there are no native config files or build flags to manage. Your branding travels with the site automatically: the logo and brand color you set in the Emovart console apply inside the WebView too, so the help screen matches your product with zero extra work.

App View Configuration

These are the pieces you combine when building the URL:

  • Base URL — https://your-slug.emovart.studio, or your custom domain if you have connected one.
  • Path — / for the home view, or /<collection>/<article-slug> to deep-link into your content.
  • `?embed=1` — hides the site header and footer for a clean app view. Recommended for nearly every mobile integration.
  • Pre-fill parameters — pass the signed-in user's details for the contact form (covered below).

Theme Selection

You have two presentation styles, depending on how much of the website experience you want to keep.

The Emovart theme loads your site as-is: branded header, search bar, category cards, and breadcrumbs. It is the quickest option and gives users the exact help center they would see in a browser:

Emovart theme home view
Emovart theme home view
Emovart theme collection view
Emovart theme collection view
Emovart theme article view
Emovart theme article view

The minimal theme — the ?embed=1 app view — strips the site chrome so only the content and its navigation essentials remain. Pair it with your own native header and most users will never guess the screen isn't native:

Minimal theme home view
Minimal theme home view
Minimal theme collection view
Minimal theme collection view
Minimal theme article view
Minimal theme article view

Pre-filling Contact Information

If your site shows a contact form, you can pre-fill the visitor's name and email so signed-in users never have to type details your app already knows. A small helper keeps the URL building in one place:

// src/lib/helpUrl.ts
const HELP_CENTER_URL = "https://your-slug.emovart.studio";

export function buildHelpUrl(path = "/", user?) {
  const params = [
    "embed=1",
    user?.name && `prefill_name=${encodeURIComponent(user.name)}`,
    user?.email && `prefill_email=${encodeURIComponent(user.email)}`,
  ]
    .filter(Boolean)
    .join("&");

  return `${HELP_CENTER_URL}${path}?${params}`;
}

Pass the generated URL to the WebView. When the user opens the contact form from inside the help center, their details are already filled in:

import { buildHelpUrl } from "../lib/helpUrl";

const uri = buildHelpUrl("/", {
  name: "Ada Lovelace",
  email: "ada@example.com",
});

<WebView source={{ uri }} startInLoadingState />;

Implementation Examples

Here are the two patterns we see most often in production apps.

Pattern 1 — a Help & Support row in Settings. Most apps expose help from their settings screen. Each row navigates to the help screen, optionally deep-linking into a relevant section:

// src/screens/SettingsScreen.tsx (excerpt)
import { Text, TouchableOpacity, View } from "react-native";
import { useNavigation } from "@react-navigation/native";

export default function SettingsScreen() {
  const navigation = useNavigation();

  return (
    <View>
      <TouchableOpacity onPress={() => navigation.navigate("HelpCenter")}>
        <Text>Help & Support</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() =>
          navigation.navigate("HelpCenter", { path: "/billing" })
        }
      >
        <Text>Billing questions</Text>
      </TouchableOpacity>
    </View>
  );
}

Prefer a sheet over a full screen? Present the same WebView inside a modal so users never leave their current context:

// src/components/HelpModal.tsx
import { Modal, SafeAreaView, Button } from "react-native";
import { WebView } from "react-native-webview";

export default function HelpModal({ visible, onClose }) {
  return (
    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
      <SafeAreaView style={{ flex: 1 }}>
        <Button title="Done" onPress={onClose} />
        <WebView
          source={{ uri: "https://your-slug.emovart.studio/?embed=1" }}
          startInLoadingState
        />
      </SafeAreaView>
    </Modal>
  );
}
Help entry in settings
Help entry in settings

Pattern 2 — a fully styled help screen. Match the navigation header to your brand color so the hand-off from app to help center is seamless:

<Stack.Screen
  name="HelpCenter"
  component={EmovartHelpCenter}
  options={{
    title: "Help & Support",
    headerStyle: { backgroundColor: "#1D4A36" }, // your brand color
    headerTintColor: "#ffffff",
  }}
/>

For extra polish, keep visitors inside your help center and hand any external links to the system browser:

import { Linking } from "react-native";

const HELP_CENTER_URL = "https://your-slug.emovart.studio";

function handleRequest(request) {
  if (!request.url.startsWith(HELP_CENTER_URL)) {
    Linking.openURL(request.url); // open outside links in Safari/Chrome
    return false;
  }
  return true;
}

<WebView
  source={{ uri: `${HELP_CENTER_URL}/?embed=1` }}
  onShouldStartLoadWithRequest={handleRequest}
/>;
Customized in-app help screen
Customized in-app help screen

Kickstart Your Mobile Help Content

Not sure what to write first? Structure your Notion root page around the questions mobile users actually ask. A proven starting skeleton: Getting Started, Account & Billing, Features, Troubleshooting, and FAQ.

Mobile help center template
Mobile help center template

What should each collection cover? Getting Started walks a new user from install to their first success. Account & Billing handles sign-in, subscriptions, and receipts — the highest-traffic support topics in most apps. Features documents each major screen of your product. Troubleshooting collects fixes for the errors your support inbox sees most often, and FAQ catches everything that doesn't fit elsewhere. Five to ten articles are plenty for launch; you can grow the tree in Notion at any time without touching your app.

Managing Content

Updating Articles

This is where the WebView approach pays off. Edit any article in Notion, then press Resync in Settings → Help Centers — or simply wait for the automatic periodic resync. The moment the sync finishes, the updated article is live inside your app. No new build, no release train, no store review.

Analytics & Optimization

Open the Insights tab in the console to see how your in-app help performs. Site analytics show which articles get read, the "Did this answer your question?" reactions under every article tell you which ones actually help, and search intents reveal what visitors typed into the search bar. Searches that return no results are a gift — each one is an article your mobile users are asking you to write.

Troubleshooting

Common Issues

  • Blank white screen. Open the exact URL in the phone's browser first. If it fails there too, check the slug and the device's network; if it loads fine, double-check the string you pass to source={{ uri }}.
  • Nothing renders after installing the package. react-native-webview includes native code — run pod install and make a fresh iOS build, or a new Gradle build on Android. A Metro reload is not enough.
  • The full website chrome is showing. Make sure the initial URL includes ?embed=1 and that the query string didn't get lost while concatenating a path.
  • External links open inside the help screen. Add an onShouldStartLoadWithRequest handler and forward non-help-center URLs to Linking.openURL (see Pattern 2 above).
  • The Android back button closes the whole screen. Keep a ref on the WebView and call goBack() from a BackHandler listener while the WebView reports canGoBack.
  • Content looks out of date. Trigger a manual Resync in the console, then close and reopen the help screen.

Documentation

For WebView-specific props and platform quirks — cookies, permissions, file uploads, and more — the react-native-webview documentation is the source of truth. For everything about the help center itself (content structure, syncing, branding, search), browse the rest of these docs at docs.emovart.studio.

Next Steps

Need more help with your integration? Use the Contact button on this site and include your platform (iOS or Android), your react-native-webview version, and the URL you are loading — we're happy to dig in.

Was this article helpful?