# 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>;
} ; Perpustakaan ini adalah abstraksi bereaksi dari intercomjs. react-use-intercom mencoba untuk tetap sedekat abstraksi satu-satu dari fungsionalitas interkom "vanilla".
Perhatikan bahwa banyak masalah dapat dikaitkan dengan vanilla intercomjs. Silakan lihat https://forum.intercom.com/s/ sebelum melaporkan masalah di sini.
IntercomProvider digunakan untuk menginisialisasi instance window.Intercom . Itu memastikan inisialisasi hanya dilakukan sekali. Jika ada pendengar yang dilewati, IntercomProvider akan memastikan ini terlampir.
Tempatkan IntercomProvider setinggi mungkin dalam aplikasi Anda. Ini akan memastikan Anda dapat menghubungi useIntercom di mana saja.
| nama | jenis | keterangan | diperlukan | bawaan |
|---|---|---|---|---|
| appid | rangkaian | ID Aplikasi Instance Interkom Anda | BENAR | |
| anak-anak | React.reactnode | Bereaksi anak -anak | BENAR | |
| Autoboot | Boolean | menunjukkan apakah interkom harus di -boot secara otomatis. Jika true tidak perlu menelepon boot , IntercomProvider akan memanggilnya untuk Anda | PALSU | PALSU |
| On -Hide | () => batal | dipicu saat utusan bersembunyi | PALSU | |
| Onshow | () => batal | dipicu saat messenger menunjukkan | PALSU | |
| OnunreadCountChange | (angka) => batal | dipicu saat jumlah pesan yang belum dibaca saat ini berubah | PALSU | |
| onuseremailsupplied | () => batal | dipicu saat pengunjung memasukkan email mereka ke dalam messenger | PALSU | |
| harus sinisialisasi | Boolean | menunjukkan apakah interkom harus diinisialisasi. Dapat digunakan dalam lingkungan bertingkat | PALSU | BENAR |
| apibase | rangkaian | Jika Anda perlu merutekan permintaan messenger Anda melalui titik akhir yang berbeda dari default. Secara umum, ini tidak diperlukan. Format: https://${INTERCOM_APP_ID}.intercom-messenger.com (Lihat: #96) | PALSU | |
| inisialisasi | nomor | Menunjukkan apakah inisialisasi interkom harus ditunda, keterlambatan ada di MS, default ke 0. Lihat #236 | PALSU | |
| Autobootprops | Interkomprops | Lulus Metode Properti untuk boot Saat autoBoot true | PALSU |
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 >
) ;
} ;Digunakan untuk mengambil semua metode yang dibundel dengan interkom. Ini didasarkan pada dokumen interkom resmi. Beberapa metode tambahan ditambahkan untuk meningkatkan kenyamanan.
Pastikan IntercomProvider melilit komponen Anda saat memanggil useIntercom() .
Komentar - Anda tidak dapat menggunakan useIntercom() dalam komponen yang sama di mana IntercomProvider diinisialisasi.
| nama | jenis | keterangan |
|---|---|---|
| isopen | Boolean | status visibilitas utusan |
| boot | (alat peraga?: intercomprops) => void | Booting instance interkom, tidak diperlukan jika autoBoot di IntercomProvider true |
| penutupan | () => batal | Mematikan contoh interkom |
| Hardshutdown | () => batal | Fungsi yang sama dengan shutdown , tetapi pastikan cookie interkom, window.Intercom dan window.intercomSettings dilepas. |
| memperbarui | (alat peraga?: intercomprops) => void | memperbarui instance interkom dengan alat peraga yang disediakan. Untuk memulai 'ping', hubungi update tanpa alat peraga |
| bersembunyi | () => batal | Menyembunyikan Messenger, akan menelepon onHide jika dipasok ke IntercomProvider |
| menunjukkan | () => batal | Menunjukkan messenger, akan menelepon onShow jika disediakan ke IntercomProvider |
| Showmessages | () => batal | Menampilkan messenger dengan daftar pesan |
| Ditampilkan WeWMessage | (konten?: string) => void | Menunjukkan pembawa pesan seolah -olah percakapan baru baru saja dibuat. Jika content dilewatkan, itu akan mengisi komposer pesan |
| getVisitorID | () => string | Mendapat ID Pengunjung |
| startTour | (tourid: number) => void | memulai tur berdasarkan tourId |
| startchecklist | (checkListId: number) => void | memulai daftar periksa berdasarkan checklistId |
| TrackEvent | (acara: string, metadata?: objek) => void | mengirimkan event dengan metaData opsional |
| Showartikel | (artikelId: string) => void | Membuka Messenger dengan artikel yang ditentukan oleh articleId |
| starturvey | (Surveyid: Number) => void | Memicu survei di messenger oleh surveyId |
| menunjukkan ruang | (Nama ruang angkasa: intercomspace) => void | Membuka messenger dengan ruang yang ditentukan |
| showticket | (TicketId: Number) => void | Membuka Messenger dengan tiket yang ditentukan oleh ticketId |
| ShowConversation | (ConversgonicId: Number) => void | Membuka Messenger dengan percakapan yang ditentukan oleh 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>
< / >
) ;
} ; Semua atribut/props default interkom adalah unta cased ( appId bukannya app_id ) di react-use-intercom , lihat intercomprop untuk melihat atribut apa yang dapat Anda lewati untuk boot atau update . Atau periksa dokumen Intercom untuk melihat semua atribut/alat peraga yang tersedia.
Komentar -Semua atribut interkom yang terdaftar di sini adalah ular cased, dalam react-use-intercom ini adalah unta cased.
Masih ingin meneruskan atribut khusus ke interkom? Apakah boot atau update digunakan, Anda dapat menambahkan properti kustom Anda dengan meneruskannya melalui customAttributes dalam metode boot atau update .
KATAAN - Kunci objek customAttributes harus dikelilingi ular (beginilah Intercom menginginkannya). Mereka diteruskan secara mentah ke interkom.
const { boot } = useIntercom ( ) ;
boot ( {
name : 'Russo' ,
customAttributes : { custom_attribute_key : 'hi there' } ,
} ) Taman bermain kecil untuk memamerkan fungsionalitas react-use-intercom .
https://devrnt.github.io/react-use-intercom/#/useintercom
https://devrnt.github.io/react-use-intercom/#/useIntercomTour
Pergi ke contoh untuk memeriksa beberapa integrasi (Gatsby, Nextjs ...).
Semua opsi yang mungkin ditentukan sebelumnya untuk diteruskan ke instance Intercom diketik. Jadi, setiap kali Anda harus melewati interkompr, semua properti yang mungkin akan tersedia di luar kotak. Alat peraga ini adalah JavaScript 'Friendly', jadi Camelcase. Tidak perlu melewati alat peraga dengan tombol Snake_cased.
Komentar - Jika Anda ingin melewati properti khusus, Anda masih harus menggunakan kunci Snake_cased.
Please wrap your component with IntercomProvider di konsol.Pastikan
IntercomProviderdiinisialisasi sebelum memanggiluseIntercom(). Anda hanya perlu menginisialisasiIntercomProvidersekali. Disarankan untuk menginisialisasiIntercomProvidersetinggi mungkin di pohon aplikasi Anda.
Pastikan Anda tidak menelepon
useIntercom()dalam komponen yang sama di mana Anda menginisialisasiIntercomProvider.
Some invalid props were passed to IntercomProvider. Please check following props: [properties] di konsol.Pastikan Anda menyerahkan properti yang benar ke
IntercomProvider. Periksa Intercomprovider untuk melihat semua properti. Pikiran bahwa semua properti dalamreact-use-intercomcased unta, kecuali untuk properticustomAttributesdalam metodebootdanupdatedariuseIntercom.
<IntercomProvider /> menggunakan cuplikan interkom resmi dan secara langsung diinisialisasi pada beban. Di latar belakang cuplikan ini akan memuat beberapa kode eksternal yang membuat interkom berfungsi. Semua keajaiban ini terjadi pada beban awal dan dalam beberapa kasus penggunaan ini bisa menjadi masalah (misalnya ketika LCP adalah prioritas).
Karena v1.2.0 dimungkinkan untuk menunda inisialisasi ini dengan lulus initializeDelay di <IntercomProvider /> (dalam milidetik). Namun sebagian besar pengguna tidak perlu mengacaukan ini.
Untuk referensi, lihat #236 dan https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-loading-intom-on-on-site-to-reduce-the-js-load
