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.

Script Stats

Transfer
3.6 KB
Decoded
7.4 KB
Loading
Dynamic
First-Party
Supported
Bundling
Supported
Privacy
Some data collected
Tracked Data
User Identity Events

<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.

With Environment Variables

If you prefer to configure your app ID using environment variables.

nuxt.config.ts
export default defineNuxtConfig({
  scripts: {
    registry: {
      intercom: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        intercom: {
          app_id: '', // NUXT_PUBLIC_SCRIPTS_INTERCOM_APP_ID
        },
      },
    },
  },
})
.env
NUXT_PUBLIC_SCRIPTS_INTERCOM_APP_ID=<YOUR_APP_ID>

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>
Edit this page
Markdown For LLMs

Instagram Embed

Server-side rendered Instagram embeds with zero client-side API calls.

Lemon Squeezy

Use Lemon Squeezy in your Nuxt app.