Intercom · Nuxt 脚本

Intercom 是一个客户消息平台，可帮助您建立更好的客户关系。

Nuxt 脚本提供了一个 useScriptIntercom 组合函数和一个无头 Facade 组件 ScriptIntercom 组件来与 Intercom 交互。

ScriptIntercom

The ScriptIntercom 组件是一个无头 Facade 组件，包装了 useScriptIntercom 组合函数，提供了一种简单、性能优化的方式在您的 Nuxt 应用中加载 Intercom。

它通过利用元素事件触发器进行了性能优化，只有在特定元素事件发生时才加载 Intercom。

默认情况下，它将在 click DOM 事件上加载。

演示

点击加载

点击右侧按钮将加载 Intercom 脚本

组件 API

查看 Facade 组件 API 以获取完整的属性、事件和插槽。

属性

trigger: 加载 intercom 的触发事件。默认值为 click。查看元素事件触发器以获取更多信息。
app-id: Intercom 应用 ID。
api-base: Intercom API 基础 URL。
name: 用户的姓名。
email: 用户的电子邮件。
user-id: 用户 ID。
alignment: Messenger 的对齐方式 left 或 right。默认值为 right。
horizontal-padding: Messenger 的水平填充。默认值为 20。
vertical-padding: Messenger 的垂直填充。默认值为 20。

查看配置模式以获取完整详细信息。

事件

The ScriptIntercom 组件在 Intercom 加载时发出一个 ready 事件。

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

该组件公开了一个 intercom 实例，您可以访问底层的 Intercom API。

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

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

插槽

该组件默认情况下提供最少的 UI，只有足够的功能和可访问性。有一些插槽可以让你根据需要自定义地图。

default

默认插槽用于显示始终可见的内容。

awaitingLoad

该插槽用于在 Intercom 未加载时显示内容。

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

loading

该插槽用于在 Intercom 加载时显示内容。

提示：默认情况下，您应该使用 ScriptLoadingIndicator 以实现可访问性和用户体验。

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

useScriptIntercom

The useScriptIntercom 组合函数使您能够对 Intercom 在站点上的加载时间和方式进行精细控制。

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

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

请遵循注册表脚本指南以了解有关高级用法的更多信息。

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)
}

配置模式

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()),
})

示例

仅在生产环境中使用 Intercom。

<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

在您的 Nuxt 应用中显示性能优化的 Crisp。

Google Tag Manager

在您的 Nuxt 应用中使用 Google Tag Manager。