# 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>;
} ; Эта библиотека является абстракцией реагирования интерком. react-use-intercom пытается поддерживать себя так же близко, как абстракция индивидуальной функции «ванили».
Обратите внимание, что многие проблемы могут быть связаны с ванильными интерком. Пожалуйста, смотрите https://forum.intercom.com/s/, прежде чем сообщать о проблеме здесь.
IntercomProvider используется для инициализации экземпляра window.Intercom . Это гарантирует, что инициализация сделана только один раз. Если какие -либо слушатели будут пройдены, IntercomProvider позаботится о том, чтобы они были прикреплены.
Поместите IntercomProvider как можно больше в своем приложении. Это убедится, что вы можете позвонить в любом месте useIntercom .
| имя | тип | описание | необходимый | по умолчанию |
|---|---|---|---|---|
| аппдасир | нить | Идентификатор приложения вашего экземпляра Intercom | истинный | |
| дети | React.ReactNode | Реагировать детей | истинный | |
| Автобут | логический | Указывает, следует ли автоматически загружаться. Если true не нужно вызовать boot , IntercomProvider позвонит для вас | ЛОЖЬ | ЛОЖЬ |
| Онниция | () => void | вызвано, когда посланник прячется | ЛОЖЬ | |
| onshow | () => void | запускается, когда показывает мессенджер | ЛОЖЬ | |
| OnunReadCountChange | (номер) => void | запускается при изменении текущего количества непрочитанных сообщений | ЛОЖЬ | |
| OnuSereMailSupplied | () => void | запускается, когда посетитель входит в свою электронную почту в мессенджер | ЛОЖЬ | |
| Должен лижитизировать | логический | Указывает, следует ли инициализироваться интерком. Можно использовать в многостальной среде | ЛОЖЬ | истинный |
| апибаза | нить | Если вам нужно направить запросы Messenger через другую конечную точку, чем по умолчанию. Вообще говоря, это не нужно. Формат: https://${INTERCOM_APP_ID}.intercom-messenger.com (см.: #96) | ЛОЖЬ | |
| инициализированная | число | Указывает, должна ли инициализация интермона быть отложена, задержка находится в MS, по умолчанию на 0. См. #236 | ЛОЖЬ | |
| AutoBootProps | Intercomprops | Пропустите свойства метода 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 >
) ;
} ;Используется для извлечения всех методов, связанных с интерком. Они основаны на официальных документах по интерком. Некоторые дополнительные методы были добавлены для улучшения удобства.
Убедитесь, что IntercomProvider обернута вокруг вашего компонента при вызове useIntercom() .
Примечание - вы не можете использовать useIntercom() в том же компоненте, где инициализируется IntercomProvider .
| имя | тип | описание |
|---|---|---|
| изопен | логический | статус видимости посланника |
| ботинок | (реквизит?: Intercomprops) => void | Сапоги для экземпляра Intercom, не требуется, если autoBoot in IntercomProvider true |
| неисправность | () => void | выключает экземпляр интермо |
| Hardshutdown | () => void | Такая же функциональность, что и shutdown , но убедитесь, что файлы cookie -интерком, window.Intercom и window.intercomSettings удаляются. |
| обновлять | (реквизит?: Intercomprops) => void | Обновляет экземпляр Intercom с предоставленным реквизитом. Чтобы инициировать «пинг», вызовите update без реквизита |
| скрывать | () => void | Скрывает мессенджера, позвонит onHide если он будет поставлен в IntercomProvider |
| показывать | () => void | Показывает мессенджер, позвонит onShow если он будет поставлен в IntercomProvider |
| Showmessages | () => void | показывает мессенджера со списком сообщений |
| Показан | (Содержание?: String) => void | Показывает мессенджера, как будто был создан новый разговор. Если content пройден, он заполнит композитор сообщения |
| GetVisitorId | () => строка | Получает идентификатор посетителя |
| стартовое | (Tourid: номер) => void | начинает тур на основе tourId |
| startchecklist | (контрольный список: номер) => void | Запускает контрольный список на основе checklistId |
| Траквент | (Событие: строка, метаданные?: объект) => void | представляет event с дополнительными metaData |
| витрица | (articleid: string) => void | Открывает мессенджер с указанной статьей Bour articleId |
| запуска | (SurveyId: число) => void | Запустить опрос в Messenger с помощью surveyId |
| Showspace | (SpacEname: IntercomSpace) => void | Открывает мессенджера указанным пространством |
| ShowTicket | (TicketId: номер) => void | Открывает мессенджер указанный билет по ticketId |
| Showconversation | (разговор: число) => void | Открывает мессенджер с указанным разговором по conversationId |
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>
< / >
) ;
} ; Все атрибуты/репута Intercom по умолчанию представляют собой Camel Cassed ( appId вместо app_id ) в react-use-intercom , см. Intercomprops, чтобы увидеть, какие атрибуты вы можете пройти для boot или update . Или проверьте документы Intercom, чтобы увидеть все доступные атрибуты/реквизиты.
Замечание -все перечисленные атрибуты интерком здесь-это змеи, в react-use-intercom это верблюжь.
Все еще хотите передать пользовательские атрибуты в интерком? Независимо от того, используется ли boot или update , вы можете добавить свои пользовательские свойства, передавая их через customAttributes в методе boot или update .
Замечание - Ключи объекта customAttributes должны быть змеиными (так и хочет, чтобы Intercom хочет их). Они грубо переданы в интерком.
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) Небольшая игровая площадка, чтобы продемонстрировать функциональные возможности react-use-intercom .
https://devrnt.github.io/react-use-intercom/#/useintercom
https://devrnt.github.io/react-use-intercom/#/useintercomtour
Перейдите к примерам, чтобы проверить некоторые интеграции (Gatsby, Nextjs ...).
Все возможные предварительно определенные параметры для перехода к экземпляру Intercom печатаются. Поэтому всякий раз, когда вам приходится передавать Intercomprops, все возможные свойства будут доступны из коробки. Эти реквизиты являются JavaScript «дружественными», так что Camelcase. Не нужно передавать реквизит с помощью клавиш Snake_ced.
Замечание - если вы хотите пройти пользовательские свойства, вы все равно должны использовать клавиши Snake_ced.
Please wrap your component with IntercomProvider в консоли.Убедитесь, что
IntercomProviderинициализируется перед вызовомuseIntercom(). Вам нужно только инициализироватьIntercomProviderтолько один раз. Рекомендуется инициализироватьIntercomProviderкак можно высокий в дереве вашего применения.
Убедитесь, что вы не вызовите
useIntercom()в том же компоненте, где вы инициализировалиIntercomProvider.
Some invalid props were passed to IntercomProvider. Please check following props: [properties] в консоли.Убедитесь, что вы передаете правильные свойства в
IntercomProvider. Проверьте Intercomprovider, чтобы увидеть все свойства. Имейте в виду, что все свойства вreact-use-intercomявляются Camel Cassed, за исключением свойстваcustomAttributesв методеbootиupdateотuseIntercom.
<IntercomProvider /> использует официальный фрагмент интеркала и напрямую инициализируется нагрузкой. На заднем плане этот фрагмент загрузит какой -то внешний код, который заставляет работать интерком. Вся эта магия происходит при начальной нагрузке, и в некоторых случаях использования это может стать проблематичным (например, когда LCP является приоритетом).
Поскольку v1.2.0 можно отложить эту инициализацию путем передачи initializeDelay в <IntercomProvider /> (это в миллисекундах). Однако большинству пользователей не нужно будет связываться с этим.
Ссылка см. № 236 и https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-loading-intercom-on-my-site-to-recece-the-js-load
