# 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 es una abstracción React de Intercomjs. react-use-intercom intenta mantener tan cerca como una abstracción individual de la funcionalidad de intercomunicador "vainilla".
Tenga en cuenta que muchos problemas podrían estar relacionados con los Intercomjs de vainilla. Consulte https://forum.intercom.com/s/ antes de informar un problema aquí.
IntercomProvider se usa para inicializar la instancia window.Intercom . Se asegura de que la inicialización solo se realice una vez. Si se aprueba algún oyente, el IntercomProvider se asegurará de que estén adjuntos.
Coloque el IntercomProvider lo más alto posible en su aplicación. Esto se asegurará de que pueda llamar useIntercom en cualquier lugar.
| nombre | tipo | descripción | requerido | por defecto |
|---|---|---|---|---|
| aplicar | cadena | ID de aplicación de su instancia de intercomunicador | verdadero | |
| niños | React.reactnode | Reaccionar niños | verdadero | |
| autónboot | booleano | indica si el intercomunicador debe iniciarse automáticamente. Si true no es necesario llamar boot , el IntercomProvider lo llamará por usted | FALSO | FALSO |
| en el suelo | () => nulo | activado cuando el mensajero se esconde | FALSO | |
| show | () => nulo | desencadenado cuando muestra el mensajero | FALSO | |
| OnunreadCountChange | (número) => nulo | activado cuando cambia el número actual de mensajes no leídos | FALSO | |
| o onuserEmailsupplied | () => nulo | activado cuando un visitante ingresa su correo electrónico al mensajero | FALSO | |
| Debería inicio | booleano | indica si el intercomunicador debe ser inicializado. Se puede usar en entorno de múltiples cuadros | FALSO | verdadero |
| apibase | cadena | Si necesita enrutar sus solicitudes de mensajería a través de un punto final diferente al valor predeterminado. En términos generales, esto no es necesario. Formato: https://${INTERCOM_APP_ID}.intercom-messenger.com (ver: #96) | FALSO | |
| InicializedLay | número | Indica si la inicialización del intercomunicador debe retrasarse, el retraso está en MS, el valor predeterminado es 0. Consulte #236 | FALSO | |
| autopropiedades | Intercompopes | Pasar propiedades para boot el método cuando autoBoot es 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 >
) ;
} ;Se utiliza para recuperar todos los métodos incluidos con el intercomunicador. Estos se basan en los documentos oficiales de intercomunicador. Se agregaron algunos métodos adicionales para mejorar la conveniencia.
Asegúrese de que IntercomProvider esté envuelto en su componente cuando llame useIntercom() .
Observación : no puede usar useIntercom() en el mismo componente donde se inicializa IntercomProvider .
| nombre | tipo | descripción |
|---|---|---|
| isopener | booleano | El estado de visibilidad del mensajero |
| bota | (Props?: Intercomprops) => Void | Bots la instancia de intercomunicación, no necesaria si autoBoot en IntercomProvider es true |
| cerrar | () => nulo | apaga la instancia de intercomunicador |
| rígido | () => nulo | La misma funcionalidad que shutdown , pero se asegura de que se eliminen las cookies de intercomunicador, window.Intercom y window.intercomSettings . |
| actualizar | (Props?: Intercomprops) => Void | Actualiza la instancia de intercomunicador con los accesorios suministrados. Para iniciar un 'ping', update de llamadas sin accesorios |
| esconder | () => nulo | Oculta al mensajero, llamará onHide si se suministra a IntercomProvider |
| espectáculo | () => nulo | Muestra el Messenger, llamará onShow si se suministra a IntercomProvider |
| showmessages | () => nulo | muestra el mensajero con la lista de mensajes |
| Se muestra | (contenido?: cadena) => Void | Muestra al mensajero como si se hubiera creado una nueva conversación. Si se pasa content , completará el compositor de mensajes |
| getVisitorID | () => cadena | Obtiene la identificación del visitante |
| parada de inicio | (Tourid: número) => nulo | Comienza una gira basada en el tourId |
| startchecklist | (CheckListid: Number) => Void | inicia una lista de verificación basada en la checklistId |
| triquivador | (evento: cadena, metadatos?: objeto) => Void | Envía un event con metaData opcionales |
| showarticle | (ArtículoD: String) => Void | abre el mensajero con el artículo especificado por articleId |
| comienzo | (SurveyD: Number) => Void | Desencadenar una encuesta en el mensajero de surveyId |
| exposiciones | (Spacename: Intercomspace) => Void | Abre el mensajero con el espacio especificado |
| rocío | (TicketId: número) => nulo | Abre el mensajero con el boleto especificado de ticketId |
| showconversation | (conversación: número) => nulo | Abre el mensajero con la conversación 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 los atributos/accesorios predeterminados de intercomunicación son Camel Cased ( appId en lugar de app_id ) en react-use-intercom , consulte Intercomprops para ver qué atributos puede pasar para boot o update . O consulte los documentos de intercomunicación para ver todos los atributos/accesorios disponibles.
Observación : todos los atributos de intercomunicador enumerados aquí son Snake Cased, en react-use-intercom estos son Camel Cased.
¿Todavía quieres pasar atributos personalizados al intercomunicador? Ya sea que se utilice boot o update , puede agregar sus propiedades personalizadas pasandolas a través de customAttributes en el método boot o update .
Observación : las claves del objeto customAttributes deben estar cubiertos de serpientes (así es como el intercomunicador los quiere). Se pasan crudamente al intercomunicador.
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) Pequeño parque infantil para mostrar las funcionalidades de react-use-intercom .
https://devrnt.github.io/react-use-intercom/#/useintercom
https://devrnt.github.io/react-useintercom/#/useintercomtour
Vaya a ejemplos para ver algunas integraciones (Gatsby, Nextjs ...).
Se escriben todas las opciones predefinidas posibles para pasar a la instancia de intercomunicador. Entonces, siempre que tenga que pasar IntercomProps, todas las propiedades posibles estarán disponibles fuera de la caja. Estos accesorios son JavaScript 'Friendly', así que Camelcase. No es necesario pasar los accesorios con las teclas Snake_Cased.
Comentario : si desea pasar propiedades personalizadas, aún debe usar claves Snake_Caseed.
Please wrap your component with IntercomProvider en la consola.Asegúrese de que
IntercomProviderse inicialice antes de llamaruseIntercom(). Solo necesita inicializarIntercomProvideruna vez. Se recomienda inicializarIntercomProviderde lo más alto posible en su árbol de aplicación.
Asegúrese de no llamar
useIntercom()en el mismo componente donde inicializóIntercomProvider.
Some invalid props were passed to IntercomProvider. Please check following props: [properties] en la consola.Asegúrese de pasar las propiedades correctas al
IntercomProvider. Verifique el Intercomprovider para ver todas las propiedades. Tenga en cuenta que todas las propiedades enreact-use-intercomson de camello, excepto la propiedadcustomAttributesen el métodobootyupdatedeuseIntercom.
<IntercomProvider /> utiliza un fragmento de intercomunicador oficial y se inicializa directamente en la carga. En segundo plano, este fragmento cargará algún código externo que haga que el intercomunicador funcione. Toda esta magia ocurre en la carga inicial y en algunos casos de uso esto puede volverse problemático (por ejemplo, cuando LCP es prioridad).
Desde V1.2.0, es posible retrasar esta inicialización pasando initializeDelay en <IntercomProvider /> (está en milisegundos). Sin embargo, la mayoría de los usuarios no necesitarán meterse con esto.
Para referencia, consulte #236 y https://forum.intercom.com/s/question/0d52g0000004wxwls/can-i-delay-loading-intercom-on-site-to-reduce-the-js-load
