Help by DeltaBreen for Angular

The support form, a logged-in user's own tickets, the Help button and your help articles as Angular components, for Angular 12 and every version since, in an NgModule app or a standalone one, with or without server-side rendering. They draw Help's own elements and load our hosted script once, so your site gets our fixes without a release of yours. No dependencies besides Angular.

npm install @deltabreen/help-angular

The form

Provide Help once for the app, with your site's key, and import DeltaHelpModule where you use the components.

A standalone app (Angular 15 and later):

// app.config.ts
import { provideDeltaHelp } from '@deltabreen/help-angular'

export const appConfig = { providers: [provideDeltaHelp({ siteKey: 'pk_live_…' })] }

// support.component.ts
import { Component } from '@angular/core'
import { DeltaHelpModule } from '@deltabreen/help-angular'

@Component({
  selector: 'app-support',
  standalone: true,
  imports: [DeltaHelpModule],
  template: `<deltahelp-form subject="Book a call" [fields]="{ order_id: 'A-100' }" (helpSent)="sent($event.number)"></deltahelp-form>`,
})
export class SupportComponent {
  sent(number: number) {
    console.log(number)
  }
}

An NgModule app (Angular 12 and later):

import { DeltaHelpModule, provideDeltaHelp } from '@deltabreen/help-angular'

@NgModule({
  imports: [BrowserModule, DeltaHelpModule],
  providers: [provideDeltaHelp({ siteKey: 'pk_live_…' })],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Your site's key is on its Install tab in the portal. Use the test key (pk_test_…) while you try things out: it works on any page, localhost too. The live key works only on your site's verified domains and its test domains.

| Component | Tag | Element | Inputs beside accent, labels, lang, siteKey | Outputs | |---|---|---|---|---| | SupportForm | <deltahelp-form> | <db-help-form> | subject (on its own, or words to start it with), [suggest]="false", fields, login, thanks | helpSent, helpError, helpArticle, helpAnswered | | MyTickets | <deltahelp-tickets> | <db-help-tickets> | login | helpReplied, helpClosed (they marked one solved), helpRated, helpUnread, helpView | | HelpButton | <deltahelp-button> | <db-help-launcher> | position="left", login | helpSent, helpUnread | | HelpArticles | <deltahelp-articles> | <db-help-articles> | section, inline, contact | helpArticle, helpAnswered |

login is where "Log in to send a message" and "Log in to see your tickets" lead, on a site that takes messages only from logged-in users: your login page, best with a way back (login="/login?return=/support"). thanks is your own thank-you page, opened once a message is sent; {number} in it becomes the ticket's number (thanks="/thank-you/?ticket={number}").

Each output is the element's help:… event, with its detail as $event. labels takes any of the element's words by name, as { title: 'Talk to us', emailHint: 'Your work email' }; the names are in the embed's guide.

Each tag is a block that holds its element, so give it room as you would the element: deltahelp-form { min-height: 32rem; }. The element's parts and custom properties are styled from your global stylesheet, as db-help-form::part(button) { … }.

Logged-in users

Your server signs a short token that says who is logged in, with the secret from your site's Install tab (see @deltabreen/help-server). Give an address on your own site that answers with it, and 204 for a guest:

provideDeltaHelp({ siteKey: 'pk_live_…', identityUrl: '/help-token' })

Or say who it is from your own code, as people log in and out:

constructor(help: DeltaHelpService) {
  this.auth.user$.subscribe((user) => help.identify(user ? () => fetch('/help-token').then((r) => r.text()) : null))
}

A function is asked each time the form needs a fresh token.

Without the form

constructor(private help: DeltaHelpService) {}

const api = await this.help.ready      // the script's API once it has started
await api.submit({ email, body })      // rejects with a HelpError that has a stable `code`
this.help.unread                       // the replies the logged-in user hasn't read: {{ help.unread | async }}
this.help.setContext({ plan: 'pro' })  // facts for your team; setFields for the form's own fields

context and fields in provideDeltaHelp say the same once, for every page.

Server-side rendering

On the server each component draws its empty tag and the script is not loaded; the browser adds both. help.ready never resolves there, and help.unread says 0.

Proving your domain

Check your site on the Install tab reads your home page as your server sends it, before any script runs. A component adds nothing there, so put the <meta name="deltabreen-help" content="…"> line from the Install tab in src/index.html, inside <head>, or use the DNS record or the file from the same step.

Angular versions

One release serves Angular 12 and every version since. It is published in the form Angular 12's compiler writes for a library, which every later Angular reads, and each release is built and run with Angular 12.0.0 and the newest Angular before it goes out. Angular 11 and older cannot read it. Since Angular 12 has no standalone components, the components are declared in DeltaHelpModule, which a standalone component imports.

Content-Security-Policy

script-src  https://help.deltabreen.eu
connect-src https://help.deltabreen.eu