Help by DeltaBreen for Vue

A helpdesk on your own site: the support form, a logged-in user's own tickets, the Help button and your help articles as Vue components, for Vue 3 and Nuxt. 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 Vue.

npm install @deltabreen/help-vue

The form

// main.js
import { createApp } from 'vue'
import { createDeltaHelp } from '@deltabreen/help-vue'
import App from './App.vue'

createApp(App).use(createDeltaHelp({ siteKey: 'pk_live_…' })).mount('#app')

<!-- Support.vue -->
<script setup>
import { SupportForm } from '@deltabreen/help-vue'
</script>

<template>
  <SupportForm subject="Book a call" :fields="{ order_id: 'A-100' }" @sent="({ number }) => console.log(number)" />
</template>

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 | Element | Props beside accent, labels, lang, site-key | Events | |---|---|---|---| | SupportForm | <db-help-form> | subject (on its own, or words to start it with), :suggest="false", fields, login, thanks | sent, error, article, answered | | MyTickets | <db-help-tickets> | login | replied, closed (they marked one solved), rated, unread, view (the ticket open in it, null for the list) | | HelpButton | <db-help-launcher> | position="left", login | sent, unread | | HelpArticles | <db-help-articles> | section, inline, contact | article, answered |

Each event is the element's help:… event, with its detail as the argument. class and style go on the element itself. 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.

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.

Nuxt

// plugins/deltahelp.js
import { createDeltaHelp } from '@deltabreen/help-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createDeltaHelp({ siteKey: 'pk_live_…' }))
})

Then use the components in any page. On the server each draws an empty place, and the script loads in the browser.

For Vue 3.3 and later. On 3.3 and 3.4 an app that is unmounted keeps waiting for the script, which matters only on a page that mounts a second app with Help after it.

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 the plugin an address on your own site that answers with it, and 204 for a guest:

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

Or hand it over yourself when someone logs in or out:

const help = useDeltaHelp()
help.identify(() => fetch('/help-token').then((r) => r.text()))   // asked each time the form needs a fresh token
help.identify(null)                                                // logged out

Without the form

import { useDeltaHelp, useUnread } from '@deltabreen/help-vue'

const help = useDeltaHelp()
const api = await help.ready                // the script's API once it has started
await api.submit({ email, body })           // rejects with a HelpError that has a stable `code`
const unread = useUnread()                  // a ref: replies the logged-in user hasn't read

help.api is a ref that is null until the script has started. context and fields on the plugin, or help.setContext and help.setFields, are facts for your team, and values for the form's own fields on every form.

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 index.html (in Nuxt, app.head in nuxt.config), or use the DNS record or the file from the same step.

Content-Security-Policy

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