# 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>;
} ; Esta biblioteca é uma abstração do React of Intercomjs. react-use-intercom tenta manter o mais próximo que uma abstração individual da funcionalidade de intercomunicação "baunilha".
Observe que muitos problemas podem estar relacionados aos intercomóticos de baunilha. Consulte https://forum.intercom.com/s/ antes de relatar um problema aqui.
IntercomProvider é usado para inicializar a instância window.Intercom . Ele garante que a inicialização seja feita apenas uma vez. Se algum ouvinte for aprovado, o IntercomProvider garantirá que eles estejam anexados.
Coloque o IntercomProvider o mais alto possível em seu aplicativo. Isso garantirá que você possa chamar useIntercom em qualquer lugar.
| nome | tipo | descrição | obrigatório | padrão |
|---|---|---|---|---|
| Appid | corda | ID do aplicativo da sua instância do intercomunicador | verdadeiro | |
| crianças | React.reactNode | Reagir crianças | verdadeiro | |
| Autoboot | booleano | indica se o intercomunicador deve ser inicializado automaticamente. Se true não precisar chamar IntercomProvider boot | falso | falso |
| ONHIDE | () => vazio | acionado quando o mensageiro se esconde | falso | |
| ONSWOW | () => vazio | acionado quando o mensageiro mostra | falso | |
| OnunreadCountChange | (número) => vazio | acionado quando o número atual de mensagens não lidas muda | falso | |
| onUserEmailsuplied | () => vazio | acionado quando um visitante entra em seu e -mail no mensageiro | falso | |
| deve univer | booleano | indica se o interfone deve ser inicializado. Pode ser usado em um ambiente multiestado | falso | verdadeiro |
| Apibase | corda | Se você precisar rotear suas solicitações de mensagens por meio de um terminal diferente do padrão. De um modo geral, isso não é necessário. Formato: https://${INTERCOM_APP_ID}.intercom-messenger.com (consulte: #96) | falso | |
| InitializedElay | número | Indica se a inicialização do interfone deve ser atrasada, o atraso está em MS, padrão para 0. Consulte #236 | falso | |
| AutoBootProps | Intercomprópsia | Passe as propriedades para o método boot quando autoBoot é true | falso |
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 >
) ;
} ;Usado para recuperar todos os métodos agrupados com o interfone. Estes são baseados nos documentos oficiais do Intercom. Alguns métodos extras foram adicionados para melhorar a conveniência.
Certifique -se de que IntercomProvider esteja envolvido em torno do seu componente ao chamar useIntercom() .
Observação - você não pode usar useIntercom() no mesmo componente em que IntercomProvider é inicializado.
| nome | tipo | descrição |
|---|---|---|
| isopen | booleano | o status de visibilidade do mensageiro |
| bota | (adereços?: intercomprops) => void | Botas autoBoot instância true IntercomProvider |
| desligar | () => vazio | desliga a instância do intercomunicador |
| Hardshutdown | () => vazio | A mesma funcionalidade do shutdown , mas garante que os cookies do intercomunicador, window.Intercom e window.intercomSettings sejam removidos. |
| atualizar | (adereços?: intercomprops) => void | Atualiza a instância do Intercom com os adereços fornecidos. Para iniciar um 'ping', ligue update sem adereços |
| esconder | () => vazio | esconde o mensageiro, chamará onHide se for fornecido para IntercomProvider |
| mostrar | () => vazio | Mostra o Mensageiro, ligará para onShow se for fornecido para IntercomProvider |
| showmessages | () => vazio | Mostra o mensageiro com a lista de mensagens |
| mostrouWMessage | (conteúdo?: string) => void | mostra o mensageiro como se uma nova conversa fosse criada. Se content for passado, ele preencherá o compositor de mensagens |
| getvisitorId | () => string | recebe o ID do visitante |
| StartTour | (Tourid: Número) => Void | Inicia um passeio baseado no tourId |
| StartCheckList | (CheckListId: número) => void | Inicia uma lista de verificação baseada na checklistId |
| Trackevent | (evento: string, metadados?: objeto) => void | Envie um event com metaData opcionais |
| ShowArticle | (ArtigoId: String) => void | abre o mensageiro com o artigo especificado por articleId |
| inicia | (SurveyId: número) => void | Acionar uma pesquisa no Mensageiro por surveyId |
| Showspace | (Spacename: Intercomspace) => void | Abre o mensageiro com o espaço especificado |
| ShowTicket | (ticketid: número) => void | Abre o mensageiro com o bilhete especificado por ticketId |
| ShowConversation | (conversão: número) => void | Abre o mensageiro com a conversa especificada por 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>
< / >
) ;
} ; Todos os atributos/adereços padrão do Intercom são Camel Cased ( appId em vez de app_id ) no react-use-intercom , consulte o IntercomProps para ver quais atributos você pode passar para boot ou update . Ou verifique os documentos do Intercom para ver todos os atributos/adereços disponíveis.
Observação -Todos os atributos do intercomunicador listados aqui são revestidos de cobra, no react-use-intercom esses são Camel Cased.
Ainda deseja passar os atributos personalizados para o interfone? Seja de boot ou update , você pode adicionar suas propriedades personalizadas passando -as através de customAttributes no método de boot ou update .
Observação - As chaves do objeto customAttributes devem ser revestidas de cobra (é assim que o Intercom os deseja). Eles são passados cruéis para o interfone.
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) Pequeno playground para mostrar as funcionalidades do react-use-intercom .
https://devrnt.github.io/react-use-intercom/#/useIntercom
https://devrnt.github.io/react-use-intercom/#/useIntercomtur
Vá para exemplos para conferir algumas integrações (Gatsby, NextJs ...).
Todas as possíveis opções predefinidas para passar para a instância do intercomunicador são digitadas. Portanto, sempre que você precisar passar o IntercomProps, todas as propriedades possíveis estarão disponíveis para fora da caixa. Esses adereços são JavaScript 'amigável', então Camelcase. Não há necessidade de passar os adereços com as teclas Snake_Cased.
Observação - Se você deseja passar por propriedades personalizadas, ainda deve usar as teclas Snake_Cased.
Please wrap your component with IntercomProvider no console.Verifique se
IntercomProvideré inicializado antes de chamaruseIntercom(). Você só precisa inicializarIntercomProvideruma vez. É aconselhável inicializarIntercomProvidero mais alto possível em sua árvore de aplicativos.
Certifique -se de que você não está chamando
useIntercom()no mesmo componente em que você inicializouIntercomProvider.
Some invalid props were passed to IntercomProvider. Please check following props: [properties] no console.Certifique -se de passar as propriedades corretas para o
IntercomProvider. Verifique o Intercomprovider para ver todas as propriedades. Lembre-se de que todas as propriedades doreact-use-intercomsão Camel Cased, exceto a propriedadecustomAttributesno método debooteupdatedouseIntercom.
<IntercomProvider /> usa um snippet intercomunal oficial e é inicializado diretamente na carga. Em segundo plano, este snippet carregará algum código externo que faz o intercomunicar funcionar. Toda essa mágica acontece na carga inicial e, em alguns casos de uso, isso pode se tornar problemático (por exemplo, quando o LCP é prioritário).
Como v1.2.0 é possível adiar essa inicialização passando initializeDelay em <IntercomProvider /> (está em milissegundos). No entanto, a maioria dos usuários não precisa mexer com isso.
Para referência, consulte #236 e https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-loading-intercom-on-my-site-to-reduce-the-js-load
