Intercom · Nuxt Scripts

Intercom is a customer messaging platform that helps you build better customer relationships.

Nuxt Scripts provides a useScriptIntercom composable and a headless Facade Component ScriptIntercom component to interact with Intercom.

ScriptIntercom

The ScriptIntercom component is headless Facade Component wrapping the useScriptIntercom composable, providing a simple, performance optimized way to load Intercom in your Nuxt app.

It's optimized for performance by leveraging the Element Event Triggers, only loading Intercom when specific elements events happen.

By default, it will load on the click DOM event.

Demo

Click to load

Clicking the button to the right will load the Intercom script

Component API

See the Facade Component API for full props, events, and slots.

Props

trigger: The trigger event to load intercom. Default is click. See Element Event Triggers for more information.
app-id: The Intercom app id.
api-base: The Intercom API base URL.
name: The name of the user.
email: The email of the user.
user-id: The user id.
alignment: The alignment of the messenger left or right. Default is right.
horizontal-padding: The horizontal padding of the messenger. Default is 20.
vertical-padding: The vertical padding of the messenger. Default is 20.

See the Config Schema for full details.

Events

The ScriptIntercom component emits a single ready event when Intercom is loaded.

const emits = defineEmits<{
  ready: [intercom: Intercom]
}>()

<script setup lang="ts">
function onReady(intercom) {
  console.log('Intercom is ready', intercom)
}
</script>

<template>
  <ScriptIntercom @ready="onReady" />
</template>

Intercom API

The component exposes a intercom instance that you can access the underlying Intercom API.

<script setup lang="ts">
const intercomEl = ref()
onMounted(() => {
  intercomEl.value.intercom.do('chat:open')
})
</script>

<template>
  <ScriptIntercom ref="intercomEl" />
</template>

Slots

The component provides minimal UI by default, only enough to be functional and accessible. There are a number of slots for you to customize the maps however you like.

default

The default slot is used to display content that will always be visible.

awaitingLoad

The slot is used to display content while Intercom is not loading.

<template>
  <ScriptIntercom>
    <template #awaitingLoad>
    <div style="width: 54px; height: 54px; border-radius: 54px; cursor: pointer; background-color: #1972F5;">
      chat!
    </div>
    </template>
  </ScriptIntercom>
</template>

loading

The slot is used to display content while Intercom is loading.

Tip: You should use the ScriptLoadingIndicator by default for accessibility and UX.

<template>
  <ScriptIntercom>
    <template #loading>
      <div class="bg-blue-500 text-white p-5">
        Loading...
      </div>
    </template>
  </ScriptIntercom>
</template>

useScriptIntercom

The useScriptIntercom composable lets you have fine-grain control over when and how Intercom is loaded on your site.

const { proxy } = useScriptIntercom({
  app_id: 'YOUR_APP_ID'
})

// examples
proxy.Intercom('show')
proxy.Intercom('update', { name: 'John Doe' })

Please follow the Registry Scripts guide to learn more about advanced usage.

IntercomApi

export interface IntercomApi {
  Intercom: ((event: 'boot', data?: Input<typeof IntercomOptions>) => void)
  & ((event: 'shutdown') => void)
  & ((event: 'update', options?: Input<typeof IntercomOptions>) => void)
  & ((event: 'hide') => void)
  & ((event: 'show') => void)
  & ((event: 'showSpace', spaceName: 'home' | 'messages' | 'help' | 'news' | 'tasks' | 'tickets' | string) => void)
  & ((event: 'showMessages') => void)
  & ((event: 'showNewMessage', content?: string) => void)
  & ((event: 'onHide', fn: () => void) => void)
  & ((event: 'onShow', fn: () => void) => void)
  & ((event: 'onUnreadCountChange', fn: () => void) => void)
  & ((event: 'trackEvent', eventName: string, metadata?: Record<string, any>) => void)
  & ((event: 'getVisitorId') => Promise<string>)
  & ((event: 'startTour', tourId: string | number) => void)
  & ((event: 'showArticle', articleId: string | number) => void)
  & ((event: 'showNews', newsItemId: string | number) => void)
  & ((event: 'startSurvey', surveyId: string | number) => void)
  & ((event: 'startChecklist', checklistId: string | number) => void)
  & ((event: 'showTicket', ticketId: string | number) => void)
  & ((event: 'showConversation', conversationId: string | number) => void)
  & ((event: 'onUserEmailSupplied', fn: () => void) => void)
  & ((event: string, ...params: any[]) => void)
}

Config Schema

export const IntercomOptions = object({
  app_id: string(),
  api_base: optional(union([literal('https://api-iam.intercom.io'), literal('https://api-iam.eu.intercom.io'), literal('https://api-iam.au.intercom.io')])),
  name: optional(string()),
  email: optional(string()),
  user_id: optional(string()),
  // customizing the messenger
  alignment: optional(union([literal('left'), literal('right')])),
  horizontal_padding: optional(number()),
  vertical_padding: optional(number()),
})

Example

Using Intercom only in production.

<script setup lang="ts">
const { proxy } = useScriptIntercom()

// noop in development, ssr
// just works in production, client
function showIntercom() {
  proxy.Intercom('show')
}
</script>

<template>
  <div>
    <button @click="showIntercom">
      Chat with us
    </button>
  </div>
</template>

Crisp

Show performance-optimized Crisp in your Nuxt app.

Google Tag Manager

Use Google Tag Manager in your Nuxt app.