---
title: "Intercom · Nuxt Scripts"
meta:
description: "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
"og:description": "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
"og:title": "Intercom · Nuxt Scripts"
---
```
Nuxt Scripts on GitHub
**Scripts**# **Intercom**[Copy for LLMs](https://scripts.nuxt.com/scripts/intercom.md) [**~~Intercom~~**](https://www.intercom.com/) is a customer messaging platform that helps you build better customer relationships. Nuxt Scripts provides a [`useScriptIntercom()`](#usescriptintercom) composable and a headless Facade Component [``](#scriptintercom) component to interact with Intercom.**Intercom**[**~~View source ~~**](https://github.com/nuxt/scripts/blob/main/packages/script/src/runtime/registry/intercom.ts) ## Nuxt Config Setup Add this to your `nuxt.config.ts` to load Intercom globally. Alternatively you can use the **~~useScriptIntercom~~** composable for more control.```
export default defineNuxtConfig({
scripts: {
registry: {
intercom: {
app_id: 'YOUR_APP_ID',
trigger: 'onNuxtReady',
}
}
}
})
``` This config automatically enables **~~first-party mode ~~** (bundle + proxy). See below to customise. ## 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 ~~**](https://scripts.nuxt.com/docs/guides/registry-scripts) guide to learn more about advanced usage. ## First-Party Mode: Privacy Focused Proxy No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Intercom, works with ad blockers). [**~~Learn more. ~~**](https://scripts.nuxt.com/docs/guides/first-party)**Mode**Bundle Proxy**Privacy**User IP addresses are anonymised. Other request data passes through.```
export default defineNuxtConfig({
scripts: {
// ✅ First-party mode: bundled + proxied
registry: {
intercom: {
app_id: 'YOUR_APP_ID',
trigger: 'onNuxtReady',
},
},
},
})
```## Example Using Intercom in a component with the proxy to send events .```
```## [``](https://scripts.nuxt.com/scripts/intercom) The [``](https://scripts.nuxt.com/scripts/intercom) component is headless Facade Component wrapping the [`useScriptIntercom()`](#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~~**](https://scripts.nuxt.com/docs/guides/script-triggers#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~~**](https://scripts.nuxt.com/docs/guides/facade-components#facade-components-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: { trigger: 'onNuxtReady' },
}
},
// 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=
```### Events The [``](https://scripts.nuxt.com/scripts/intercom) component emits a single `ready` event when Intercom loads.```
const emits = defineEmits<{
ready: [intercom: Intercom]
}>()
``````
```### Intercom API The component exposes an `intercom` instance (the return value of `useScriptIntercom()`) that you can use to call the Intercom API.```
```### 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.```
chat!
```**loading** This slot displays content while Intercom is loading. Tip: You should use the `ScriptLoadingIndicator` by default for accessibility and UX.```
Loading...
```## [`useScriptIntercom()`](https://scripts.nuxt.com/scripts/intercom) The [`useScriptIntercom()`](https://scripts.nuxt.com/scripts/intercom) 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~~**](https://scripts.nuxt.com/docs/guides/registry-scripts) guide to learn more about advanced usage.`**app_id**``string`** 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.`**name**``string` The name of the logged-in user.`**email**``string` The email address of the logged-in user.`**user_id**``string` A unique identifier for the logged-in user.`**alignment**``'left' | 'right'` = 'right' The horizontal alignment of the Intercom messenger launcher.`**horizontal_padding**``number` = 20 The horizontal padding (in px) of the messenger launcher from the edge of the page.`**vertical_padding**``number` = 20 The vertical padding (in px) of the messenger launcher from the bottom of the page. ## Example Using Intercom only in production.```
```[~~Edit this page~~](https://github.com/nuxt/scripts/edit/main/docs/content/scripts/intercom.md) [~~Markdown For LLMs~~](https://scripts.nuxt.com/scripts/intercom.md) [**Instagram Embed** Server-side rendered Instagram embeds with zero client-side API calls.](https://scripts.nuxt.com/scripts/instagram-embed) [**Lemon Squeezy** Use Lemon Squeezy in your Nuxt app.](https://scripts.nuxt.com/scripts/lemon-squeezy)**On this page **- [](#scriptintercom) - [useScriptIntercom()](#usescriptintercom) - [Example](#example)