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.

Intercom

View source

Nuxt Config Setup

The simplest way to load Intercom globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptIntercom composable. 

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

useScriptIntercom()

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

const { proxy } = useScriptIntercom()

proxy.Intercom('show')

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

First-Party Mode

This script supports First-Party Mode which routes all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    firstParty: true,
    registry: {
      intercom: { app_id: 'YOUR_APP_ID'}
    }
  }
})

Example

Using Intercom only in production while using the proxy to send events. 

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

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

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 basic 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 displays content that will always be visible.

awaitingLoad

This slot displays 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

This slot displays 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 loads 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.

app_idstring required

Your Intercom app ID.

api_base'https://api-iam.intercom.io' | 'https://api-iam.eu.intercom.io' | 'https://api-iam.au.intercom.io'

The regional API base URL. Choose based on your Intercom data hosting region.

namestring

The name of the logged-in user.

emailstring

The email address of the logged-in user.

user_idstring

A unique identifier for the logged-in user.

alignment'left' | 'right' = 'right'

The horizontal alignment of the Intercom messenger launcher.

horizontal_paddingnumber = 20

The horizontal padding (in px) of the messenger launcher from the edge of the page.

vertical_paddingnumber = 20

The vertical padding (in px) of the messenger launcher from the bottom of the page.

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.