# 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>;
} ; Cette bibliothèque est une abstraction de réact d'intercomjs. react-use-intercom essaie de rester aussi près qu'une abstraction individuelle de la fonctionnalité d'interphone "Vanilla".
Notez que de nombreux problèmes pourraient être liés aux intercomjs de vanille. Veuillez consulter https://forum.intercom.com/s/ avant de signaler un problème ici.
IntercomProvider est utilisé pour initialiser l'instance window.Intercom . Il s'assure que l'initialisation n'est effectuée qu'une seule fois. Si des auditeurs sont passés, l' IntercomProvider s'assurera que ceux-ci sont attachés.
Placez l' IntercomProvider aussi haut que possible dans votre application. Cela s'assurera que vous pouvez appeler useIntercom n'importe où.
| nom | taper | description | requis | défaut |
|---|---|---|---|---|
| appid | chaîne | ID d'application de votre instance d'interphone | vrai | |
| enfants | React.reactnode | Réagir les enfants | vrai | |
| autobot | booléen | indique si l'interphone doit être automatiquement démarré. Si true pas besoin d'appeler boot , l' IntercomProvider l'appellera pour vous | FAUX | FAUX |
| au-dessus de | () => void | déclenché lorsque le messager se cache | FAUX | |
| insertion | () => void | déclenché lorsque le messager montre | FAUX | |
| onUnReadCountchange | (nombre) => void | déclenché lorsque le nombre actuel de messages non lus change | FAUX | |
| onUseremailSupplié | () => void | déclenché lorsqu'un visiteur entre dans leur e-mail dans le messager | FAUX | |
| devrait-être en insignifiant | booléen | indique si l'interphone doit être initialisée. Peut être utilisé dans un environnement à plusieurs états | FAUX | vrai |
| apibase | chaîne | Si vous devez acheminer vos demandes de messager via un point de terminaison différent de la valeur par défaut. D'une manière générale, cela n'est pas nécessaire. Format: https://${INTERCOM_APP_ID}.intercom-messenger.com (voir: # 96) | FAUX | |
| InitializedElay | nombre | Indique si l'initialisation de l'interphone doit être retardée, le retard est en ms, par défaut. Voir # 236 | FAUX | |
| autobootprops | Entreproversés | Passer les propriétés à la méthode boot lorsque autoBoot est true | FAUX |
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 >
) ;
} ;Utilisé pour récupérer toutes les méthodes regroupées avec interphone. Ceux-ci sont basés sur les documents d'interphone officiels. Certaines méthodes supplémentaires ont été ajoutées pour améliorer la commodité.
Assurez-vous que IntercomProvider est enroulé autour de votre composant lors de l'appel useIntercom() .
Remarque - Vous ne pouvez pas utiliser useIntercom() dans le même composant où IntercomProvider est initialisé.
| nom | taper | description |
|---|---|---|
| isopen | booléen | Le statut de visibilité du messager |
| botte | (accessoires ?: Intercomprops) => void | Bottes l'instance d'interphone, non nécessaire si autoBoot dans IntercomProvider est true |
| fermer | () => void | Arrête l'instance d'interphone |
| hardshutdown | () => void | Même fonctionnalité que shutdown , mais s'assure que les cookies d'intercom, window.Intercom et window.intercomSettings sont supprimés. |
| mise à jour | (accessoires ?: Intercomprops) => void | met à jour l'instance d'interphone avec les accessoires fournis. Pour initier un «ping», appelez update sans accessoires |
| cacher | () => void | cache le messager, appellera onHide si cela est fourni à IntercomProvider |
| montrer | () => void | montre le Messenger, appellera sur onShow s'il est fourni à IntercomProvider |
| émission | () => void | Affiche le messager avec la liste des messages |
| émissaire | (Contenu ?: String) => void | montre le messager comme si une nouvelle conversation venait d'être créée. Si content est passé, il remplira le compositeur du message |
| getVisitorId | () => chaîne | Obtient l'ID du visiteur |
| starttour | (tourid: numéro) => void | commence une tournée basée sur le tourId |
| startchecklist | (CheckListId: Number) => void | démarre une liste de contrôle basée sur la checklistId |
| trackevent | (événement: chaîne, métadonnées ?: Objet) => void | soumet un event avec metaData en option |
| showarticle | (ArticleId: String) => void | Ouvre le messager avec l'article spécifié par articleId |
| staripurvey | (enquête: numéro) => void | Déclencher une enquête dans le messager par surveyId |
| espace spectacle | (SpaceName: Intercomspace) => void | Ouvre le messager avec l'espace spécifié |
| showticket | (TicketId: numéro) => void | Ouvre le messager avec le billet spécifié par ticketId |
| Conconversement de show | (ConversationId: numéro) => void | Ouvre le messager avec la conversation spécifiée par 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>
< / >
) ;
} ; Tous les attributs / accessoires par défaut d'intercom sont Camel BasEd ( appId au lieu d' app_id ) dans react-use-intercom , voir Intercomprops pour voir quels attributs vous pouvez passer pour boot ou update . Ou consultez les documents d'interphone pour voir tous les attributs / accessoires disponibles.
Remarque - Tous les attributs d'interphone répertoriés ici sont un boîtier de serpent, dans react-use-intercom ce sont des boîtiers de chameau.
Vous souhaitez toujours transmettre des attributs personnalisés à l'interphone? Que boot ou update soit utilisé, vous pouvez ajouter vos propriétés personnalisées en les transmettant via customAttributes dans la méthode boot ou update .
Remarque - Les clés de l'objet customAttributes doivent être en tube de serpent (c'est ainsi que l'interphone les veut). Ils sont transmis bruts à l'interphone.
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) Petit terrain de jeu pour présenter les fonctionnalités de react-use-intercom .
https://devrnt.github.io/react-use-intercom/#/useintercom
https://devrnt.github.io/react-use-intercom/#/useintercomtour
Accédez à des exemples pour découvrir certaines intégrations (Gatsby, NextJS ...).
Toutes les options prédéfinies possibles pour passer à l'instance interphone sont tapées. Ainsi, chaque fois que vous devez passer les intercomprops, toutes les propriétés possibles seront disponibles dans la boîte. Ces accessoires sont «amicaux» JavaScript , donc CamelCase. Pas besoin de passer les accessoires avec des touches Snake_Cased.
Remarque - Si vous souhaitez passer des propriétés personnalisées, vous devez toujours utiliser des touches Snake_Caslé.
Please wrap your component with IntercomProvider dans la console.Assurez-vous que
IntercomProviderest initialisé avant d'appeleruseIntercom(). Il vous suffit d'initialiserIntercomProviderune seule fois. Il est conseillé d'initialiserIntercomProvideraussi élevé que possible dans votre arborescence d'application.
Assurez-vous que vous n'appelez pas
useIntercom()dans le même composant où vous avez initialiséIntercomProvider.
Some invalid props were passed to IntercomProvider. Please check following props: [properties] dans la console.Assurez-vous que vous passez les propriétés correctes à l'
IntercomProvider. Vérifiez Intercomprovider pour voir toutes les propriétés. Pensez que toutes les propriétés dereact-use-intercomsont Camel Basée, à l'exception de la propriétécustomAttributesdans la méthodebootetupdatedeuseIntercom.
<IntercomProvider /> utilise un extrait d'interphone officiel et est directement initialisé sur charge. En arrière-plan, cet extrait chargera un code externe qui fait fonctionner Interphone. Toute cette magie se produit sur la charge initiale et dans certains cas d'utilisation, cela peut devenir problématique (par exemple, lorsque le LCP est prioritaire).
Depuis V1.2.0, il est possible de retarder cette initialisation en passant initializeDelay dans <IntercomProvider /> (c'est en millisecondes). Cependant, la plupart des utilisateurs n'auront pas besoin de jouer avec cela.
Pour référence, voir # 236 et https://forum.intercom.com/s/question/0d52g0000004wxwls/can-i-delay-loading-intercom-on-my-site-to-reduce-the-js-loadload
