Help by DeltaBreen for React Native

A helpdesk in your app: the support form and a user's own tickets, with your team's replies, on a screen of your React Native or Expo app. It shows Help's own form in a web view, so your app gets our fixes without a release of yours, and hands its events back to your code.

npx expo install @deltabreen/help-react-native react-native-webview   # an Expo app
npm install @deltabreen/help-react-native react-native-webview         # any other, then: cd ios && pod install

On your website's page

Make a page on your website that holds only the form and the user's own tickets, at an address like https://acme.com/app-support (your site's Install tab has it, with your key, when the site is a Mobile app). Then show it:

import { HelpScreen } from '@deltabreen/help-react-native'

export function Support({ token }) {
  return <HelpScreen page="https://acme.com/app-support" token={token} style={{ flex: 1 }} onSent={({ number }) => console.log(number)} />
}

Your website's verified domain is what lets your live key work, as it does on the website itself. Links to your site stay in the app; anything else, like a file in one of your team's replies, opens in the phone's browser.

The form's button for adding a file opens the phone's own picker. On an iPhone it offers Take Photo, and iOS closes an app that opens the camera without saying why. Add NSCameraUsageDescription to your app's Info.plist, with the words iOS should show when it asks; in Expo, in app.json:

{ "expo": { "ios": { "infoPlist": { "NSCameraUsageDescription": "To send a photo to support." } } } }

Logged-in users

A user who is logged in to your app writes in without typing their email, and sees their own tickets and your replies. Your server signs a short token that says who they are, with your site's secret (the guide has the code). Ask your server for one each time the screen opens and pass it as token; it is handed to the page before its scripts run. Without one, the form treats them as a guest.

Your app has no website

Leave page out and give your site's key: the screen carries the page itself. In the portal, choose My app has no website for the site. Your live key then works for people logged in to your app, and, if you switch it on, for anyone with your app, by a key made for the phone the first time support opens:

// npx expo install expo-secure-store expo-crypto
import * as Crypto from 'expo-crypto'
import * as SecureStore from 'expo-secure-store'
import { HelpScreen, useDeviceKey } from '@deltabreen/help-react-native'

export function Support({ token }) {
  const deviceKey = useDeviceKey(SecureStore, Crypto.getRandomBytes)
  return <HelpScreen siteKey="pk_live_…" token={token} deviceKey={token ? undefined : deviceKey} style={{ flex: 1 }} />
}

useDeviceKey makes the key once and keeps it in the store you give it (anything with getItem and setItem works too); it is null until it has been read, and the screen waits for it. A new phone, or the app installed again, starts fresh. We recommend signing your users in through your own server where you can: a key inside an app can be taken out of it, and only logged-in users can't be made up.

With no website, show picks the form, the tickets or both (the default), and lang, accent, labels, subject and fields are the elements' own, as in the embed's guide.

pageCss is your own CSS for that page, after ours: its background and type, and the form through its custom properties and parts. Put a screen of tickets elsewhere with a second screen, show="tickets":

<HelpScreen siteKey="pk_live_…" show="form" pageCss="body { background: #0f1115; color: #e8e8e8 } db-help-form { --dbh-accent: #7c5cff; --dbh-radius: 14px }" />
<HelpScreen siteKey="pk_live_…" show="tickets" pageCss="db-help-tickets::part(ticket-preview) { opacity: .6 }" />

Events

| Prop | When | |---|---| | onSent | A message was sent: { number } | | onError | It could not be: { code } | | onReplied | They replied to a ticket: { number } | | onClosed | They marked a ticket solved: { number } | | onRated | They rated one: { number, stars } | | onUnread | How many of your team's replies they haven't read: { unread } | | onView | The ticket they opened, or null for the list: { ticket } |

To tell people of a reply while the screen is closed, a webhook (Pro and higher) can send your app's own notification.

Your own web view

helpPage({ siteKey, … }) is the page an app with no website shows, and helpScript({ token, deviceKey }) what runs before its scripts: give them to your own web view (injectedJavaScriptBeforeContentLoaded), and its events arrive as postMessage JSON with deltahelp naming each. webViewProps passes anything else to ours.