DeskCrew
DeskCrew is a support widget combining live chat, AI answers from your knowledge base, a help centre and a changelog.
Use useScriptDeskCrew() for direct SDK calls, or
<ScriptDeskCrew> for a custom chat launcher.
Nuxt Config Setup
Add this to your nuxt.config.ts to load DeskCrew globally. Alternatively you can use the useScriptDeskCrew composable for more control.
export default defineNuxtConfig({
scripts: {
registry: {
deskcrew: {
trigger: 'onNuxtReady',
}
}
}
})useScriptDeskCrew()
The useScriptDeskCrew composable lets you have fine-grain control over when and how DeskCrew is loaded on your site.
const { proxy } = useScriptDeskCrew()Please follow the Registry Scripts guide to learn more about advanced usage.
Example
Using DeskCrew in a component.
<script setup lang="ts">
const { proxy } = useScriptDeskCrew()
// noop in development, ssr
// just works in production, client
function handleAction() {
// use proxy methods here
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template><ScriptDeskCrew>
The headless facade holds back the DeskCrew widget until its
element trigger fires. It listens for
click by default, so a visitor who never opens chat downloads none of the widget.
Component API
See the Facade Component API for full props, events, and slots.
With environment variables
export default defineNuxtConfig({
scripts: {
registry: {
deskcrew: { trigger: 'onNuxtReady' },
}
},
runtimeConfig: {
public: {
scripts: {
deskcrew: {
widgetKey: '', // NUXT_PUBLIC_SCRIPTS_DESKCREW_WIDGET_KEY
board: '', // NUXT_PUBLIC_SCRIPTS_DESKCREW_BOARD
},
},
},
},
})NUXT_PUBLIC_SCRIPTS_DESKCREW_WIDGET_KEY=<YOUR_PUBLIC_KEY>
NUXT_PUBLIC_SCRIPTS_DESKCREW_BOARD=<YOUR_BOARD_SLUG>Events
The component emits ready once the widget has mounted its launcher, and error if the script
fails to load.
Slots
awaitingLoad, loading, error and the default slot behave as documented for facade
components.
useScriptDeskCrew()
export function useScriptDeskCrew<T extends DeskCrewApi>(_options?: DeskCrewInput) {}widgetKeystring required The DeskCrew public widget key, for example `pub_xxxxxxxx`. Rendered as the `data-key` attribute. Find it in the DeskCrew dashboard under Install.
boardstringThe workspace board slug, lowercase letters, numbers and dashes only. Rendered as the `data-board` attribute. Required for the help centre, changelog and embedded portal surfaces; the chat launcher works without it.
colorstringAccent colour as a 6 digit hex value, for example `#4f46e5`. Rendered as the `data-color` attribute. Overrides the accent configured on the workspace.
position'left' | 'right' = 'right'Which side of the viewport the launcher sits on. Rendered as the `data-position` attribute.
greetingstringGreeting text shown in the widget header, overriding the workspace default. Rendered as the `data-greeting` attribute.
launcher'logo'Render the workspace logo in the launcher bubble instead of the default icon. Rendered as the `data-launcher` attribute.
Identifying a visitor
Identity is a signed token minted by your own backend, so it is a runtime call rather than a
nuxt.config option. Everything in nuxt.config is a deploy-time constant, and baking one
visitor's token into a build would hand that identity to every other visitor.
<script setup lang="ts">
const { proxy } = useScriptDeskCrew({ widgetKey: 'pub_xxxxxxxx' })
const { data } = await useFetch('/api/deskcrew-token')
watchEffect(() => {
if (data.value?.token)
proxy.identify({ token: data.value.token })
})
</script>Other surfaces
embed(), changelog() and surveys() each mount a surface. Call each at most once per
page: a second call logs a warning and does nothing.
src, so this script does not support bundling or
first-party mode. It loads directly from deskcrew.io.