# pnpm
pnpm add react-use-intercom
# npm
npm install react-use-intercom
# yarn
yarn add react-use-intercom import * as React from 'react' ;
import { IntercomProvider , useIntercom } from 'react-use-intercom' ;
const INTERCOM_APP_ID = 'your-intercom-app-id' ;
const App = ( ) => (
< IntercomProvider appId = { INTERCOM_APP_ID } >
< HomePage / >
< / IntercomProvider >
) ;
// Anywhere in your app
const HomePage = ( ) => {
const { boot , shutdown , hide , show , update } = useIntercom ( ) ;
return < button onClick = { boot } > Boot intercom ! ☎️ < / button>;
} ; 该库是Intercomjs的反应抽象。 react-use-intercom试图保持与“ Vanilla”对讲功能的一对一抽象保持近距离。
请注意，很多问题可能与香草对话有关。请在此处报告问题之前，请参阅https://forum.intercom.com/s/。
IntercomProvider用于初始化window.Intercom实例。它确保初始化仅完成一次。如果通过了任何听众， IntercomProvider将确保将其附加在一起。
在应用程序中将编程间IntercomProvider尽可能高。这将确保您可以在任何地方调用useIntercom 。
| 姓名 | 类型 | 描述 | 必需的 | 默认 |
|---|---|---|---|---|
| 苹果 | 细绳 | 对讲机实例的应用程序ID | 真的 | |
| 孩子们 | React.ReactNode | 反应儿童 | 真的 | |
| Autoboot | 布尔 | 指示是否应自动启动对讲。如果true致电boot ，则IntercomProvider会为您打电话 | 错误的 | 错误的 |
| 在侧面 | （）=> void | 当信使皮时触发 | 错误的 | |
| onshow | （）=> void | Messenger显示时触发 | 错误的 | |
| OnunReadCountChange | （数字）=> void | 当当前未读消息的数量更改时触发 | 错误的 | |
| Onuseremailsuplied | （）=> void | 当访客将电子邮件输入使者时触发 | 错误的 | |
| 应当化 | 布尔 | 指示是否应初始化对讲机。可用于多息环境 | 错误的 | 真的 |
| apibase | 细绳 | 如果您需要通过与默认值不同的端点路由您的Messenger请求。一般来说，这是不需要的。 格式： https://${INTERCOM_APP_ID}.intercom-messenger.com （请参阅：＃96） | 错误的 | |
| 初始化 | 数字 | 指示对讲机初始化是否应延迟，延迟为MS，默认为0。请参见＃236 | 错误的 | |
| Autobootprops | 企业间 | 将属性传递给boot方法时，当autoBoot为true | 错误的 |
const App = ( ) => {
const [ unreadMessagesCount , setUnreadMessagesCount ] = React . useState ( 0 ) ;
const onHide = ( ) => console . log ( 'Intercom did hide the Messenger' ) ;
const onShow = ( ) => console . log ( 'Intercom did show the Messenger' ) ;
const onUnreadCountChange = ( amount : number ) => {
console . log ( 'Intercom has a new unread message' ) ;
setUnreadMessagesCount ( amount ) ;
} ;
const onUserEmailSupplied = ( ) => {
console . log ( 'Visitor has entered email' ) ;
} ;
return (
< IntercomProvider
appId = { INTERCOM_APP_ID }
onHide = { onHide }
onShow = { onShow }
onUnreadCountChange = { onUnreadCountChange }
onUserEmailSupplied = { onUserEmailSupplied }
autoBoot
>
< p > Hi there , I am a child of the IntercomProvider < / p >
< / IntercomProvider >
) ;
} ;用于检索与对讲机捆绑在一起的所有方法。这些基于官方对讲文档。添加了一些额外的方法来提高便利性。
在调用useIntercom()时，请确保将IntercomProvider缠绕在组件上。
备注- 您不能在初始化的IntercomProvider的同一组件中使用useIntercom() 。
| 姓名 | 类型 | 描述 |
|---|---|---|
| 等元 | 布尔 | 使者的可见性状态 |
| 引导 | （Props？：对抗Props）=> void | 启动对讲机实例，如果在IntercomProvider中的autoBoot为true ，则不需要 |
| 关闭 | （）=> void | 关闭对讲机实例 |
| 硬盘 | （）=> void | 与shutdown相同的功能，但要确保对Intercom cookie， window.Intercom和window.intercomSettings删除。 |
| 更新 | （Props？：对抗Props）=> void | 使用提供的道具更新对讲实例。要启动“ ping”，请在没有道具的情况下致电update |
| 隐藏 | （）=> void | 隐藏信使，如果供应给IntercomProvider onHide |
| 展示 | （）=> void | 显示Messenger，如果供应给IntercomProvider onShow |
| 展示 | （）=> void | 用消息列表显示使者 |
| 展示ewmessage | （内容？：字符串）=> void | 显示Messenger好像刚刚创建了新对话。如果content通过，它将填写消息作曲家 |
| getVisitorId | （）=>字符串 | 获取访客ID |
| Starttour | （TOURID：数字）=> void | 根据tourId开始巡回演出 |
| StartCheckList | （清单：编号）=> void | 根据checklistId启动清单 |
| Trackevent | （事件：字符串，元数据？：对象）=> void | 提交一个可选metaData的event |
| 弹药 | （Article Id：String）=> void | 用articleId的指定文章打开Messenger |
| Startervey | （SurveyId：number）=> void | 通过surveyId触发Messenger的调查 |
| 节目空间 | （间距：对间空间）=> void | 用指定的空间打开使者 |
| Showticket | （ticketid：number）=> void | 用ticketId的指定票证打开Messenger |
| 展示票面 | （对话：数字）=> void | 通过conversationId的指定对话打开Messenger |
import * as React from 'react' ;
import { IntercomProvider , useIntercom } from 'react-use-intercom' ;
const INTERCOM_APP_ID = 'your-intercom-app-id' ;
const App = ( ) => (
< IntercomProvider appId = { INTERCOM_APP_ID } >
< HomePage / >
< / IntercomProvider >
) ;
const HomePage = ( ) => {
const {
boot ,
shutdown ,
hardShutdown ,
update ,
hide ,
show ,
showMessages ,
showNewMessage ,
getVisitorId ,
startTour ,
startChecklist ,
trackEvent ,
showArticle ,
startSurvey ,
showSpace ,
showTicket ,
showConversation
} = useIntercom ( ) ;
const bootWithProps = ( ) => boot ( { name : 'Russo' } ) ;
const updateWithProps = ( ) => update ( { name : 'Ossur' } ) ;
const handleNewMessages = ( ) => showNewMessage ( ) ;
const handleNewMessagesWithContent = ( ) => showNewMessage ( 'content' ) ;
const handleGetVisitorId = ( ) => console . log ( getVisitorId ( ) ) ;
const handleStartTour = ( ) => startTour ( 123 ) ;
const handleStartChecklist = ( ) => startChecklist ( 456 ) ;
const handleTrackEvent = ( ) => trackEvent ( 'invited-friend' ) ;
const handleTrackEventWithMetaData = ( ) =>
trackEvent ( 'invited-frind' , {
name : 'Russo' ,
} ) ;
const handleShowArticle = ( ) => showArticle ( 123456 ) ;
const handleStartSurvey = ( ) => startSurvey ( 123456 ) ;
const handleShowSpace = ( ) => showSpace ( 'tasks' ) ;
const handleShowTicket = ( ) => showTicket ( 123 ) ;
const handleShowConversation = ( ) => showConversation ( 123 ) ;
return (
< >
< button onClick = { boot } > Boot intercom < / button >
< button onClick = { bootWithProps } > Boot with props < / button >
< button onClick = { shutdown } > Shutdown < / button >
< button onClick = { hardShutdown } > Hard shutdown < / button >
< button onClick = { update } > Update clean session < / button>
< button onClick = { updateWithProps } > Update session with props < / button>
< button onClick = { show } > Show messages < / button>
< button onClick = { hide } > Hide messages < / button>
< button onClick = { showMessages } > Show message list < / button>
< button onClick = { handleNewMessages } > Show new messages < / button>
< button onClick = { handleNewMessagesWithContent } >
Show new message with pre - filled content
< / button>
< button onClick = { handleGetVisitorId } > Get visitor id < / button>
< button onClick = { handleStartTour } > Start tour < / button>
< button onClick = { handleStartChecklist } > Start checklist < / button>
< button onClick = { handleTrackEvent } > Track event < / button>
< button onClick = { handleTrackEventWithMetaData } >
Track event with metadata
< / button>
< button onClick = { handleShowArticle } > Open article in Messenger < / button>
< button onClick = { handleStartSurvey } > Start survey in Messenger < / button>
< button onClick = { handleShowSpace } > Open space in Messenger < / button>
< button onClick = { handleShowTicket } > Open ticket in Messenger < / button>
< button onClick = { handleShowConversation } > Open conversation in Messenger < / button>
< / >
) ;
} ;react-use-intercom中的所有对讲默认属性/道具都是骆驼壳（ appId而不是app_id ），请参见InterComprops，以查看可以传递给boot或update属性。或检查对讲文档以查看所有可用属性/道具。
备注- 这里列出的所有对讲属性都是蛇壳，在react-use-intercom中，这些都是骆驼壳。
仍然想将自定义属性传递给对讲吗？无论是使用boot还是update ，您都可以通过在boot或update方法中通过customAttributes来添加自定义属性。
备注- customAttributes对象的钥匙应该是蛇壳（这就是对讲机想要的）。他们是原始传递给对讲机的。
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) 小型操场以展示react-use-intercom的功能。
https://devrnt.github.io/reeact-use-intercom/#/useintercom
https://devrnt.github.io/reeact-use-intercom/#/useintercomtour
去示例查看一些集成（Gatsby，NextJs ...）。
输入了所有可能的预定义的选项。因此，每当您必须通过对间规范时，所有可能的属性都将在开箱即用。这些道具是JavaScript “友好”，所以骆驼。无需使用Snake_casced键传递道具。
备注- 如果要通过自定义属性，则应使用Snake_ccced键。
Please wrap your component with IntercomProvider 。在调用
useIntercom()之前，请确保初始化编写IntercomProvider。您只需要初始化一次IntercomProvider的初始化。建议在您的应用程序树中初始化编制的IntercomProvider。
确保您不在初始化的
IntercomProvider中的同一组件中调用useIntercom()。
Some invalid props were passed to IntercomProvider. Please check following props: [properties]在控制台中。确保您将正确的属性传递给了
IntercomProvider。检查跨编程以查看所有属性。请注意，除了从useIntercom中的boot和update方法中的customAttributes属性外，react-use-intercom中的所有属性都是骆驼壳。
<IntercomProvider />使用官方对讲片段，并直接在负载上初始初始化。在背景中，该片段将加载一些使对讲机起作用的外部代码。所有这些魔术都发生在初始负载上，在某些用例中，这可能会变得有问题（例如，LCP优先级）。
由于v1.2.0，可以通过在<IntercomProvider />中传递initializeDelay （以毫秒为单位）来延迟此初始化。但是，大多数用户不需要对此感到困惑。
有关参考，请参见＃236和https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-i-delay-loading-intercom-oncom-on-my-site-site-site-site-site-site-site-to-reduce-the-js-load
