# 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>;
} ; Diese Bibliothek ist eine Reaktionsabstraktion von Intercomjs. react-use-intercom versucht, so eng wie eine Einzelabstraktion der "Vanilla" -Issprechungsfunktionalität zu bleiben.
Beachten Sie, dass viele Probleme mit den Vanilla -Intercomjs zusammenhängen könnten. Weitere Informationen finden Sie unter https://forum.intercom.com/s/, bevor Sie hier ein Problem melden.
IntercomProvider wird verwendet, um das window.Intercom zu initialisieren. INTERCOM -Instanz. Es stellt sicher, dass die Initialisierung nur einmal durchgeführt wird. Wenn Hörer übergeben werden, stellt der IntercomProvider sicher, dass diese beigefügt sind.
Platzieren Sie den IntercomProvider so hoch wie möglich in Ihrer Anwendung. Dadurch wird sichergestellt, dass Sie useIntercom überall anrufen können.
| Name | Typ | Beschreibung | erforderlich | Standard |
|---|---|---|---|---|
| Appid | Saite | App -ID Ihrer Intercom -Instanz | WAHR | |
| Kinder | React.Reactnode | Reagieren Kinder | WAHR | |
| Autoboot | boolean | Gibt an, ob die Intercom automatisch gebootet werden sollte. Wenn true keinen boot anrufen muss, ruft der IntercomProvider ihn für Sie an | FALSCH | FALSCH |
| onHide | () => void | ausgelöst, wenn sich der Bote versteckt | FALSCH | |
| Onshow | () => void | ausgelöst, wenn der Bote zeigt | FALSCH | |
| OnunreadCountChange | (Zahl) => void | Ausgelöst, wenn sich die aktuelle Anzahl ungelesener Nachrichten ändert | FALSCH | |
| ONUSEREMailSupplied | () => void | Ausgelöst, wenn ein Besucher seine E -Mail in den Messenger eingibt | FALSCH | |
| sollteinitialisieren | boolean | Gibt an, ob die Gegensprechanlage initialisiert werden sollte. Kann in mehrstufiger Umgebung verwendet werden | FALSCH | WAHR |
| Apibase | Saite | Wenn Sie Ihre Messenger -Anfragen über einen anderen Endpunkt als den Standard anfragen müssen. Im Allgemeinen ist dies nicht erforderlich. Format: https://${INTERCOM_APP_ID}.intercom-messenger.com (siehe: #96) | FALSCH | |
| initialisierte | Nummer | Gibt an, ob die Intercom -Initialisierung verzögert werden sollte, die Verzögerung in MS, Standardeinstellungen auf 0. Siehe #236 | FALSCH | |
| AutobootProps | Intercomprops | Übergeben Sie Eigenschaften, um die Methode zu boot , wenn autoBoot true ist | FALSCH |
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 >
) ;
} ;Wird verwendet, um alle mit Intercom gebündelten Methoden abzurufen. Diese basieren auf den offiziellen Intercom -Dokumenten. Einige zusätzliche Methoden wurden hinzugefügt, um die Bequemlichkeit zu verbessern.
Stellen Sie sicher, dass IntercomProvider beim Aufrufen useIntercom() um Ihre Komponente umwickelt ist.
Bemerkung - Sie können in derselben Komponente, in der IntercomProvider initialisiert wird, nicht useIntercom() .
| Name | Typ | Beschreibung |
|---|---|---|
| Isopen | boolean | Der Sichtbarkeitsstatus des Botens |
| Stiefel | (Requisiten ?: Intercomprops) => void | Boots die Intercom -Instanz, nicht benötigt, wenn autoBoot in IntercomProvider true ist |
| abschalten | () => void | schließt die Intercom -Instanz ab |
| Hardshutdown | () => void | Die gleiche Funktionalität wie shutdown , stellt jedoch sicher, dass die Gegensprecher Cookies, window.Intercom window.intercomSettings entfernt werden. |
| aktualisieren | (Requisiten ?: Intercomprops) => void | Aktualisiert die Intercom -Instanz mit den gelieferten Requisiten. Um ein "Ping" zu initiieren, rufen Sie update ohne Requisiten auf |
| verstecken | () => void | Versteckt den Messenger, ruft onHide an, wenn er an IntercomProvider zur Verfügung gestellt wird |
| zeigen | () => void | Zeigt den Messenger an, wird onShow anrufen, wenn er an IntercomProvider geliefert wird |
| Showmessages | () => void | Zeigt den Messenger mit der Nachrichtenliste an |
| zeigtenwMessage | (Inhalt ?: String) => void | Zeigt den Messenger so, als wäre gerade ein neues Gespräch geschaffen. Wenn content übergeben wird, wird der Meldungskomponist ausgefüllt |
| Getvisitorid | () => String | bekommt die Besucher -ID |
| Starttour | (Tourid: Nummer) => void | beginnt eine Tour, die auf der tourId basiert |
| Startcheckliste | (Checkliste: Nummer) => void | Startet eine Checkliste basierend auf der checklistId |
| TrackEvent | (Ereignis: String, Metadaten ?: Objekt) => void | gibt ein event mit optionalen metaData ein |
| Showartikel | (ArtikelID: String) => void | Öffnet den Messenger mit dem angegebenen Artikel von articleId |
| startet | (SurveyId: Anzahl) => void | Lösen Sie eine Umfrage im Messenger von surveyId aus |
| Showspace | (Raumname: Intercomspace) => void | Öffnet den Boten mit dem angegebenen Raum |
| Messen | (TicketID: Nummer) => void | Öffnet den Messenger mit dem angegebenen Ticket von ticketId |
| Showconversation | (ConversationID: Nummer) => void | Öffnet den Boten mit dem angegebenen Gespräch von 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>
< / >
) ;
} ; Alle Intercom-Standardattribute/Requisiten sind in react-use-intercom appId -Gehäuse (anstelle von app_id ). Siehe InterComProps, um zu sehen, welche Attribute Sie zum boot oder update übergeben können. Oder überprüfen Sie die Intercom -Dokumente, um alle verfügbaren Attribute/Requisiten anzuzeigen.
Bemerkung -Alle aufgelisteten Intercom-Attribute hier sind Schlangengehäuse, in react-use-intercom .
Möchten Sie immer noch benutzerdefinierte Attribute an Intercom weitergeben? Unabhängig davon, ob boot oder update verwendet wird, können Sie Ihre benutzerdefinierten Eigenschaften hinzufügen, indem Sie diese über customAttributes in der boot oder update übergeben.
Bemerkung - Die Schlüssel des customAttributes -Objekts sollten Schlangenschaden sein (so will Intercom sie). Sie werden roh an die Gegensprechanlage übergeben.
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) Kleiner Spielplatz, um die Funktionen von react-use-intercom zu präsentieren.
https://devrnt.github.io/react-use-intercom/#/usintercom
https://devrnt.github.io/react-use-intercom/#/useIntercomtour
Gehen Sie zu Beispielen, um einige Integrationen zu lesen (Gatsby, NextJs ...).
Alle möglichen vordefinierten Optionen, die an die Intercom-Instanz übergeben werden können, werden tippt. Wenn Sie also Intercomprops bestehen müssen, sind alle möglichen Eigenschaften nicht mehr in der Schachtel verfügbar. Diese Requisiten sind JavaScript "freundlich", also Kamelcase. Sie müssen die Requisiten nicht mit Tasten von Snake_Cased übergeben.
Bemerkung - Wenn Sie benutzerdefinierte Eigenschaften übergeben möchten, sollten Sie trotzdem Snake_Cased -Tasten verwenden.
Please wrap your component with IntercomProvider in der Konsole ein.Stellen Sie sicher, dass
IntercomProvidervor dem AufrufenuseIntercom()initialisiert wird. Sie müssen nur einmalIntercomProviderinitialisieren. Es wird empfohlen, in Ihrem AnwendungsbaumIntercomProviderso hoch wie möglich zu initialisieren.
Stellen Sie sicher, dass Sie in derselben Komponente, in der Sie
IntercomProviderinitialisiert haben, nichtuseIntercom().
Some invalid props were passed to IntercomProvider. Please check following props: [properties] in der Konsole.Stellen Sie sicher, dass Sie die richtigen Eigenschaften an den
IntercomProviderweitergeben. Überprüfen Sie InterConProvider, um alle Eigenschaften anzuzeigen. Beachten Sie, dass alle Eigenschaften inreact-use-intercommit Ausnahme der EigenschaftcustomAttributesimbootundupdatevonuseIntercomeine Kamelbeschichtung sind.
<IntercomProvider /> verwendet ein offizielles Intercom -Snippet und wird direkt bei der Last initialisiert. Im Hintergrund lädt dieser Snippet einen externen Code, mit dem die Gegensprechanlage funktioniert. All diese Magie geschieht bei der anfänglichen Last und in einigen Anwendungsfällen kann dies problematisch werden (z. B. wenn LCP Priorität ist).
Seit v1.2.0 ist es möglich, diese Initialisierung zu verzögern, indem initializeDelay in <IntercomProvider /> bestanden wird (es ist in Millisekunden). Die meisten Benutzer müssen sich jedoch nicht damit anlegen.
Referenz siehe #236 und https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-loading-intercom-on-my-site-toce-the-js-load
