Intercom

Intercom provides an in-app messenger for customer conversations.

Use useScriptIntercom() for direct API calls, or <ScriptIntercom> for a custom messenger launcher.

export default defineNuxtConfig({
  scripts: {
    registry: {
      intercom: {
        app_id: 'YOUR_APP_ID',
        trigger: 'onNuxtReady',
      }
    }
  }
})

const { proxy } = useScriptIntercom()

proxy.Intercom('show')

export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      intercom: {
        app_id: 'YOUR_APP_ID',
        trigger: 'onNuxtReady',
      },
    },
  },
})

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

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

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

<ScriptIntercom>

The headless facade holds back Intercom until its element trigger fires. It listens for click by default.

Demo

Component API

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

useScriptIntercom({
  app_id: 'YOUR_APP_ID',
  api_base: 'https://api-iam.eu.intercom.io',
})

With environment variables

After you enable the registry entry, the module creates its public runtime-config fields. Set the app ID without adding a separate runtimeConfig block:

export default defineNuxtConfig({
  scripts: {
    registry: {
      intercom: { trigger: 'onNuxtReady' },
    }
  },
})

NUXT_PUBLIC_SCRIPTS_INTERCOM_APP_ID=<YOUR_APP_ID>

Events

The <ScriptIntercom> component emits ready after it mounts the messenger and error if the script fails to load.

const emits = defineEmits<{
  ready: [intercom: ReturnType<typeof useScriptIntercom>]
  error: []
}>()

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

<template>
  <ScriptIntercom app-id="YOUR_APP_ID" @ready="onReady" />
</template>

Intercom API

The component exposes its intercom instance, which is the return value of useScriptIntercom(). Call the Intercom JavaScript API through its proxy:

<script setup lang="ts">
const intercomEl = ref()

function showMessenger() {
  intercomEl.value?.intercom.proxy.Intercom('show')
}
</script>

<template>
  <ScriptIntercom ref="intercomEl" app-id="YOUR_APP_ID" trigger="immediate" />
  <button @click="showMessenger">
    Open chat
  </button>
</template>

Slots

Use the slots to build the launcher and its loading states.

default

The default slot displays content while the facade is visible.

awaitingLoad

This slot displays content while Intercom waits for its configured trigger.

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

loading

This slot displays content while Intercom is loading.

ScriptLoadingIndicator supplies a visible state and status label:

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

The component declares an error slot, but its loading branch currently wins whenever isReady is false, including after a load failure. Use the emitted error event to render a fallback outside the component until that branch order is fixed.

useScriptIntercom()

Use useScriptIntercom() when you need the command queue without the launcher component.

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

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

When an identified user signs out, call shutdown before another person uses the same browser. Intercom recommends this to clear the prior user's Messenger session:

proxy.Intercom('shutdown')

See Registry Scripts for trigger and loading options.

Example

Open Intercom from a button:

<script setup lang="ts">
const { proxy } = useScriptIntercom({
  app_id: 'YOUR_APP_ID',
})

function showIntercom() {
  proxy.Intercom('show')
}
</script>

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