react use intercom

특징

• 후크
• TypeScript로 작성되었습니다
• 문서화 된 자기 설명 방법
• 외부 라이브러리가없는 작은 크기
• SSR 환경 보호 (Nextjs, Gatsby)
• 기존 인터콤 인스턴스에 연결하는 데 호환됩니다 (세그먼트로로드)

설치

 # pnpm
pnpm add react-use-intercom

# npm
npm install react-use-intercom

# yarn
yarn add react-use-intercom

QuickStart

 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>;
} ; 

문맥

이 라이브러리는 intercomjs의 반응 추상화입니다. react-use-intercom "바닐라"인터콤 기능의 일대일 추상화만큼 가깝게 유지하려고합니다.

많은 문제가 바닐라 intercomjs와 관련이있을 수 있습니다. 여기에서 문제를보고하기 전에 https://forum.intercom.com/s/를 참조하십시오.

모래밭

• API
• 운동장
• 예
• TypeScript
• 문제 해결
• 고급의

API

• 인터콤 프로보더
• useIntercom
• 인터콤

인터콤 프로보더

IntercomProvider window.Intercom 인스턴스를 초기화하는 데 사용됩니다. 초기화는 한 번만 수행됩니다. 청취자가 통과되면 IntercomProvider 가이를 첨부해야합니다.

응용 프로그램에서 IntercomProvider 최대한 높게 배치하십시오. 이렇게하면 어디서나 useIntercom 호출 할 수 있습니다.

소품

이름	유형	설명	필수의	기본
Appid	끈	인터콤 인스턴스의 앱 ID	진실
어린이들	React.reactNode	아이들에게 반응합니다	진실
자가	부울	인터콤을 자동으로 부팅 해야하는지 여부를 나타냅니다. true 이라면 boot 호출 할 필요가 없다면 IntercomProvider 가 당신을 위해 전화 할 것입니다.	거짓	거짓
온거지	() => void	메신저가 숨어있을 때 트리거되었습니다	거짓
ONSHOW	() => void	메신저가 표시 할 때 트리거되었습니다	거짓
OnUnreadCountChange	(번호) => void	읽지 않은 메시지 수가 변경 될 때 트리거됩니다	거짓
OnusereMailsupplied	() => void	방문자가 메신저에 이메일을 입력 할 때 트리거	거짓
봐야합니다	부울	인터콤을 초기화 해야하는지 여부를 나타냅니다. 다단계 환경에서 사용할 수 있습니다	거짓	진실
apibase	끈	메신저 요청을 기본값과 다른 엔드 포인트를 통해 라우팅 해야하는 경우. 일반적으로 이것은 필요하지 않습니다. 형식 : https://${INTERCOM_APP_ID}.intercom-messenger.com ( #96 참조)	거짓
초기화	숫자	인터콤 초기화가 지연되어야하는지, 지연은 MS에, 기본값은 0으로 나타납니다. #236 참조.	거짓
autobootprops	인터콤	autoBoot true 때 boot 방법으로 속성을 전달하십시오	거짓

예

 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 >
  ) ;
} ;

useIntercom

인터콤과 번들로 연결된 모든 메소드를 검색하는 데 사용됩니다. 이들은 공식 인터콤 문서를 기반으로합니다. 편의성을 향상시키기 위해 몇 가지 추가 방법이 추가되었습니다.

useIntercom() 호출 할 때 IntercomProvider 구성 요소를 감싸도록하십시오.

비고 - IntercomProvider 초기화되는 동일한 구성 요소에서 사용에 useIntercom() 사용할 수 없습니다.

API

이름	유형	설명
Isopen	부울	메신저의 가시성 상태
신병	(props? : intercomprops) => void	IntercomProvider 의 autoBoot true 이라면 Intercom 인스턴스를 부팅합니다.
일시 휴업	() => void	인터콤 인스턴스를 종료합니다
Hardshutdown	() => void	shutdown 와 동일한 기능이지만 Intercom 쿠키, window.Intercom 및 window.intercomSettings 가 제거되어 있는지 확인하십시오.
업데이트	(props? : intercomprops) => void	제공된 소품으로 인터콤 인스턴스를 업데이트합니다. '핑'을 시작하려면 소품없이 update 호출하십시오
숨다	() => void	Messenger를 숨기고 IntercomProvider 에 제공되면 onHide 호출합니다.
보여주다	() => void	Messenger를 표시하고 IntercomProvider 에 제공되면 onShow 호출합니다.
Showmessages	() => void	메시지 목록이있는 메신저를 표시합니다
Showmessage	(content? : string) => void	새로운 대화가 방금 만들어진 것처럼 메신저를 보여줍니다. content 전달되면 메시지 작곡가가 작성됩니다.
getvisitorid	() => 문자열	방문자 ID를 얻습니다
스타트 투어	(worid : 숫자) => 무효	tourId 기반으로 투어를 시작합니다
startCheckList	(CheckListId : 숫자) => 무효	checklistId 기반으로 점검 목록을 시작합니다
trackevent	(이벤트 : 문자열, 메타 데이터? : 객체) => void	선택 metaData 있는 event 제출합니다
쇼어티클	(articleId : String) => void	articleId 의 지정된 기사로 메신저를 엽니 다
스타트 루비	(SurveyId : number) => void	surveyId 에 의해 메신저에서 설문 조사를 시작하십시오
쇼 공간	(SpaceName : intercomspace) => void	지정된 공간으로 메신저를 엽니 다
쇼티켓	(TicketId : 숫자) => void	ticketId 의 지정된 티켓으로 메신저를 엽니 다
쇼 콘버션	(ConfertionId : 숫자) => 무효	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>
    < / >
  ) ;
} ;

인터콤

모든 Intercom 기본 속성/소품은 react-use-intercom 에서 Camel Cased ( appId 대신 app_id )입니다. Intercomprops를 참조하여 boot 또는 update 로 전달할 수있는 속성을 확인하십시오. 또는 인터콤 문서에서 사용 가능한 모든 속성/소품을 확인하십시오.

비고 -여기에 react-use-intercom 모든 Intercom 속성은 뱀 케이스입니다.

사용자 정의 속성

여전히 사용자 정의 속성을 인터콤에 전달하고 싶습니까? boot 또는 update 사용 여부에 관계없이 boot 또는 update 메소드에서 customAttributes 를 통과하여 사용자 정의 속성을 추가 할 수 있습니다.

비고 - customAttributes 객체의 열쇠는 뱀 케이스 여야합니다 (이것은 인터콤이 원하는 방식입니다). 그들은 원시적으로 인터콤으로 전달됩니다.

 const { boot } = useIntercom ( ) ;

boot ( { 
 name : 'Russo' ,
 customAttributes : { custom_attribute_key : 'hi there' } ,
} ) 

운동장

react-use-intercom 의 기능을 보여주는 작은 놀이터.

useIntercom

https://devrnt.github.io/react-use-intercom/#/useintercom

useIntercom (인터콤 투어 포함)

https://devrnt.github.io/react-use-intercom/#/useintercomtour

예

몇 가지 통합 (Gatsby, Nextjs ...)을 확인하려면 예제로 이동하십시오.

TypeScript

인터콤 인스턴스로 전달할 수있는 모든 사전 정의 옵션이 입력됩니다. 따라서 인터콤 프롭을 통과해야 할 때마다 가능한 모든 속성을 상자 밖으로 사용할 수 있습니다. 이 소품은 JavaScript '친화적'이므로 Camelcase입니다. snake_cased 키로 소품을 전달할 필요가 없습니다.

비고 - 사용자 정의 속성을 통과하려면 여전히 Snake_cased 키를 사용해야합니다.

문제 해결

• 콘솔에서 Please wrap your component with IntercomProvider .

useIntercom() 호출하기 전에 IntercomProvider 초기화되어 있는지 확인하십시오. IntercomProvider 한 번만 초기화하면됩니다. 응용 프로그램 트리에서 IntercomProvider 가능한 한 높은 초기화하는 것이 좋습니다.

IntercomProvider 초기화 한 동일한 구성 요소에서 useIntercom() 호출하지 않도록하십시오.

• Some invalid props were passed to IntercomProvider. Please check following props: [properties] 콘솔에서 Some invalid props were passed to IntercomProvider. Please check following props: [properties] .

올바른 속성을 IntercomProvider 에게 전달하십시오. intercomprovider를 확인하여 모든 속성을 확인하십시오. react-use-intercom 의 모든 속성은 boot 의 customAttributes 속성 및 useIntercom 의 update 방법을 제외하고는 낙타 케이스입니다.

고급의

초기화 지연

<IntercomProvider /> 공식 인터콤 스 니펫을 사용하며로드시 직접 초기화됩니다. 백그라운드 에서이 스 니펫은 인터콤이 작동하는 외부 코드를로드합니다. 이 모든 마법은 초기 부하에서 발생하며 일부 사용 사례에서는 문제가 될 수 있습니다 (예 : LCP가 우선 순위 일 때).

v1.2.0이므로 <IntercomProvider /> (밀리 초)에 initializeDelay 전달 하여이 초기화를 지연시킬 수 있습니다. 그러나 대부분의 사용자는 이것을 엉망으로 만들 필요가 없습니다.

참조는 #236 및 https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-loading--my-my-site-site--reduce-the-js-load를 참조하십시오