# 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
