Help by DeltaBreen for NativeScript

A helpdesk in your app: the support form and a user's own tickets, with your team's replies, on a screen of your NativeScript app, in plain NativeScript, Angular, Vue, Svelte or React. 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.

npm install @deltabreen/help-nativescript

On Android it adds androidx.webkit to your app, which keeps who the user is and the form's events to your own page's origin.

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 with HelpView:

<!-- Plain NativeScript: support-page.xml -->
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:help="@deltabreen/help-nativescript">
  <help:HelpView src="https://acme.com/app-support" token="{{ token }}" sent="{{ onSent }}" />
</Page>

In a framework, register the view once, then use it as any other:

// Angular, in main.ts; the component that shows it lists NO_ERRORS_SCHEMA in its schemas
import { registerElement } from '@nativescript/angular'
import { HelpView } from '@deltabreen/help-nativescript'
registerElement('HelpView', () => HelpView)
// <HelpView src="https://acme.com/app-support" [token]="token" (sent)="onSent($event)"></HelpView>

// Vue, in app.js
import { registerElement } from 'nativescript-vue'
import { HelpView } from '@deltabreen/help-nativescript'
registerElement('HelpView', () => HelpView)
// <HelpView src="https://acme.com/app-support" :token="token" @sent="onSent" />

// Svelte Native, in app.ts
import { registerNativeViewElement } from 'svelte-native/dom'
import { HelpView } from '@deltabreen/help-nativescript'
registerNativeViewElement('helpView', () => HelpView)
// <helpView src="https://acme.com/app-support" token={token} on:sent={onSent} />

// React NativeScript
import { registerElement } from 'react-nativescript'
import { HelpView } from '@deltabreen/help-nativescript'
registerElement('helpView', () => HelpView)
// <helpView src="https://acme.com/app-support" token={token} onSent={onSent} />

Give it the height it should fill, as any view: a row of a GridLayout with *, or the whole page. 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 that picker offers Take Photo, and iOS closes an app that opens the camera without saying why. Add this to App_Resources/iOS/Info.plist, with the words iOS should show when it asks:

<key>NSCameraUsageDescription</key>
<string>To send a photo to support.</string>

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 set it as token; it is handed to the page before its scripts run, and to no other site. Without one, the form treats them as a guest.

Your app has no website

Leave src out and give your site's key: the view 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:

import { deviceKey } from '@deltabreen/help-nativescript'

export const help = { siteKey: 'pk_live_…', deviceKey: deviceKey() }
// <help:HelpView siteKey="{{ help.siteKey }}" deviceKey="{{ help.deviceKey }}" />

deviceKey() makes the key once and keeps it in the app's settings. To keep it in the Keychain or the Keystore instead, hand it new SecureStorage() from @nativescript/secure-storage. Give a logged-in user's token instead where you have one: we recommend signing your users in through your own server where you can, since 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. A deviceKey of null waits: the page loads once it is set.

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 view, show="tickets":

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

Events

Each event's detail says what happened:

| Event | When | |---|---| | sent | A message was sent: { number } | | error | It could not be: { code } | | replied | They replied to a ticket: { number } | | closed | They marked a ticket solved: { number } | | rated | They rated one: { number, stars } | | unread | How many of your team's replies they haven't read: { unread } | | view | The ticket they opened, or null for the list: { ticket } |

helpView.on('unread', ({ detail }) => (badge.text = String(detail.unread)))

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, … }, { token, deviceKey }) is the page an app with no website shows, and helpScript({ token, deviceKey }) what runs before a website's page's scripts. The page's events arrive as JSON with deltahelp naming each, posted to window.webkit.messageHandlers.deltahelp on an iPhone or to window.DeltaHelpBridge on Android.