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

เร็ว

 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 พยายามที่จะให้ใกล้เคียงกับการเป็นนามธรรมแบบตัวต่อตัวของฟังก์ชั่นอินเตอร์คอม "วานิลลา"

โปรดทราบว่าปัญหามากมายอาจเกี่ยวข้องกับวานิลลาอินเตอร์คอม โปรดดู https://forum.intercom.com/s/ ก่อนรายงานปัญหาที่นี่

ลิงค์

• API
• สนามเด็กเล่น
• ตัวอย่าง
• ตัวพิมพ์ใหญ่
• แก้ไขปัญหา
• ขั้นสูง

API

• ผู้ให้บริการ
• ใช้งาน
• Intercomprops

ผู้ให้บริการ

IntercomProvider ใช้เพื่อเริ่มต้นอินสแตนซ์ของ window.Intercom ทำให้แน่ใจว่าการเริ่มต้นจะเสร็จสิ้นเพียงครั้งเดียว หากมีผู้ฟังผ่าน IntercomProvider จะทำให้แน่ใจว่าสิ่งเหล่านี้แนบมา

วาง IntercomProvider ให้สูงที่สุดเท่าที่จะทำได้ในแอปพลิเคชันของคุณ สิ่งนี้จะทำให้แน่ใจว่าคุณสามารถโทร useIntercom ได้ทุกที่

อุปกรณ์ประกอบฉาก

ชื่อ	พิมพ์	คำอธิบาย	ที่จำเป็น	ค่าเริ่มต้น
ทำให้ดีขึ้น	สาย	ID แอพของอินสแตนซ์อินเตอร์คอมของคุณ	จริง
เด็ก	react.reactnode	ตอบโต้เด็ก	จริง
มีหนอนหนังสือ	บูลีน	ระบุว่าอินเตอร์คอมควรบูตโดยอัตโนมัติหรือไม่ หาก true จำเป็นต้องโทรหา boot IntercomProvider จะเรียกมันว่าคุณ	เท็จ	เท็จ
บนเส้นผม	() => โมฆะ	ถูกกระตุ้นเมื่อผู้ส่งสารซ่อนตัว	เท็จ
บนแสดง	() => โมฆะ	ทริกเกอร์เมื่อผู้ส่งสารแสดง	เท็จ
onunreadCountchange	(หมายเลข) => โมฆะ	ทริกเกอร์เมื่อจำนวนข้อความที่ยังไม่ได้อ่านปัจจุบันเปลี่ยนไป	เท็จ
onuseremailsupplied	() => โมฆะ	ทริกเกอร์เมื่อผู้เข้าชมป้อนอีเมลไปยังผู้ส่งสาร	เท็จ
ควรจัดตั้ง	บูลีน	ระบุว่าควรเริ่มต้นอินเตอร์คอมหรือไม่ สามารถใช้ในสภาพแวดล้อมที่มีหลายขั้นตอน	เท็จ	จริง
apibase	สาย	หากคุณต้องการกำหนดเส้นทางคำขอของผู้ส่งสารของคุณผ่านจุดสิ้นสุดอื่นจากค่าเริ่มต้น โดยทั่วไปการพูดไม่จำเป็น รูปแบบ: https://${INTERCOM_APP_ID}.intercom-messenger.com (ดู: #96)	เท็จ
เริ่มต้น	ตัวเลข	ระบุว่าการเริ่มต้นอินเตอร์คอมควรล่าช้าหรือไม่การหน่วงเวลาอยู่ใน MS ค่าเริ่มต้นเป็น 0 ดู #236	เท็จ
Autobootprops	Intercomprops	ผ่านคุณสมบัติไปยังวิธี boot เมื่อ autoBoot เป็น true	เท็จ

ตัวอย่าง

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

ใช้งาน

ใช้เพื่อดึงวิธีการทั้งหมดที่รวมกับอินเตอร์คอม สิ่งเหล่านี้ขึ้นอยู่กับเอกสารอินเตอร์คอมอย่างเป็นทางการ มีการเพิ่มวิธีการพิเศษบางอย่างเพื่อปรับปรุงความสะดวก

ตรวจสอบให้แน่ใจว่า IntercomProvider ถูกห่อหุ้มส่วนประกอบของคุณเมื่อโทร useIntercom()

หมายเหตุ - คุณไม่สามารถใช้ useIntercom() ในส่วนประกอบเดียวกันกับที่ IntercomProvider เริ่มต้น

API

ชื่อ	พิมพ์	คำอธิบาย
Isopen	บูลีน	สถานะการมองเห็นของผู้ส่งสาร
รองเท้าบูท	(อุปกรณ์ประกอบฉาก?: intercomprops) => โมฆะ	บู๊ทอินสแตนซ์อินเตอร์คอมไม่จำเป็นหาก autoBoot ใน IntercomProvider เป็น true
การปิดเครื่อง	() => โมฆะ	ปิดอินสแตนซ์อินเตอร์คอม
Hardshutdown	() => โมฆะ	ฟังก์ชั่นเดียวกับ shutdown แต่ตรวจสอบให้แน่ใจว่าคุกกี้อินเตอร์คอม, window.Intercom และ window.intercomSettings จะถูกลบออก
อัปเดต	(อุปกรณ์ประกอบฉาก?: intercomprops) => โมฆะ	อัปเดตอินสแตนซ์อินเตอร์คอมด้วยอุปกรณ์ประกอบฉากที่ให้มา หากต้องการเริ่มต้น 'ping' ให้ update การโทรโดยไม่มีอุปกรณ์ประกอบฉาก
ซ่อน	() => โมฆะ	ซ่อนผู้ส่งสารจะโทรหา onHide หากส่งไปยัง IntercomProvider
แสดง	() => โมฆะ	แสดงผู้ส่งสารจะโทรหา onShow หากส่งไปยัง IntercomProvider
การแสดง	() => โมฆะ	แสดงผู้ส่งสารพร้อมรายการข้อความ
การแสดงผล	(เนื้อหา?: สตริง) => โมฆะ	แสดงให้เห็นถึงผู้ส่งสารราวกับว่ามีการสร้างบทสนทนาใหม่ หาก content ผ่านไปมันจะเติมเต็มในนักแต่งเพลง
getVisitorId	() => สตริง	รับรหัสผู้เข้าชม
starttour	(tourid: number) => โมฆะ	เริ่มทัวร์ตาม tourId
StartCheckList	(ตรวจสอบรายการ: หมายเลข) => โมฆะ	เริ่มรายการตรวจสอบตาม checklistId
trackEvent	(เหตุการณ์: สตริง, ข้อมูลเมตา?: วัตถุ) => โมฆะ	ส่ง event ด้วย metaData เสริม
การแสดง	(บทความ: สตริง) => โมฆะ	เปิดผู้ส่งสารด้วยบทความที่ระบุโดย articleId
ผู้เริ่มต้น	(SurveyId: หมายเลข) => โมฆะ	กระตุ้นการสำรวจใน The Messenger โดย surveyId
การแสดง	(spacename: Intercomspace) => โมฆะ	เปิดผู้ส่งสารด้วยพื้นที่ที่ระบุ
นักแสดง	(TicketId: หมายเลข) => โมฆะ	เปิดผู้ส่งสารด้วยตั๋วที่ระบุโดย ticketId
การแสดง	(บทสนทนา: หมายเลข) => โมฆะ	เปิดผู้ส่งสารด้วยการสนทนาที่ระบุโดย 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>
    < / >
  ) ;
} ;

Intercomprops

แอตทริบิวต์/อุปกรณ์ประกอบฉากเริ่มต้นของอินเตอร์คอมทั้งหมดคืออูฐ cased ( appId แทน app_id ) ใน react-use-intercom ดู Intercomprops เพื่อดูว่าคุณสามารถผ่าน boot หรือ update หรือตรวจสอบเอกสารอินเตอร์คอมเพื่อดูแอตทริบิวต์/อุปกรณ์ประกอบฉากที่มีอยู่ทั้งหมด

หมายเหตุ -แอตทริบิวต์อินเตอร์คอมที่ระบุไว้ทั้งหมดที่นี่คือ cased งูใน react-use-intercom เหล่านี้คืออูฐ

คุณลักษณะที่กำหนดเอง

ยังต้องการส่งผ่านแอตทริบิวต์ที่กำหนดเองไปยังอินเตอร์คอมหรือไม่? ไม่ว่าจะใช้ boot หรือ update คุณสามารถเพิ่มคุณสมบัติที่กำหนดเองของคุณได้โดยส่งผ่านสิ่งเหล่านี้ผ่าน customAttributes ในวิธี boot หรือ update

หมายเหตุ - กุญแจของวัตถุ customAttributes ควรเป็น cased งู (นี่คือวิธีที่อินเตอร์คอมต้องการพวกเขา) พวกเขาถูกส่งผ่านไปยังอินเตอร์คอม

 const { boot } = useIntercom ( ) ;

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

สนามเด็กเล่น

สนามเด็กเล่นขนาดเล็กเพื่อแสดงฟังก์ชันการทำงานของ react-use-intercom

ใช้งาน

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

useIntercom (พร้อมทัวร์อินเตอร์คอม)

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

ตัวอย่าง

ไปที่ตัวอย่างเพื่อตรวจสอบการบูรณาการบางอย่าง (Gatsby, nextjs ... )

ตัวพิมพ์ใหญ่

ตัวเลือกที่กำหนดไว้ล่วงหน้าทั้งหมดที่เป็นไปได้ทั้งหมดเพื่อส่งผ่านไปยังอินสแตนซ์อินเตอร์คอมจะถูกพิมพ์ ดังนั้นเมื่อใดก็ตามที่คุณต้องผ่าน intercomprops คุณสมบัติที่เป็นไปได้ทั้งหมดจะมีให้ออกนอกกรอบ อุปกรณ์ประกอบฉากเหล่านี้เป็น JavaScript 'Friendly' ดังนั้น Camelcase ไม่จำเป็นต้องผ่านอุปกรณ์ประกอบฉากด้วยคีย์ Snake_Cased

หมายเหตุ - หากคุณต้องการผ่านคุณสมบัติที่กำหนดเองคุณควรใช้ปุ่ม Snake_Cased

แก้ไขปัญหา

• ฉันเห็น Please wrap your component with IntercomProvider ในคอนโซล

ตรวจสอบให้แน่ใจว่า IntercomProvider เริ่มต้นก่อนที่จะเรียกใช้ useIntercom() คุณจะต้องเริ่มต้น IntercomProvider หนึ่งครั้งเท่านั้น ขอแนะนำให้เริ่มต้น IntercomProvider ให้สูงที่สุดเท่าที่จะทำได้ในแผนผังแอปพลิเคชันของคุณ

ตรวจสอบให้แน่ใจว่าคุณไม่ได้เรียกใช้ useIntercom() ในส่วนประกอบเดียวกันกับที่คุณเริ่มต้น IntercomProvider

• ฉันเห็น Some invalid props were passed to IntercomProvider. Please check following props: [properties] ในคอนโซล

ตรวจสอบให้แน่ใจว่าคุณผ่านคุณสมบัติที่ถูกต้องไปยัง IntercomProvider ตรวจสอบ Intercomprovider เพื่อดูคุณสมบัติทั้งหมด โปรดทราบว่าคุณสมบัติทั้งหมดใน react-use-intercom เป็นอูฐ cased ยกเว้นคุณสมบัติ customAttributes ในวิธี boot และ update จาก useIntercom

ขั้นสูง

การเริ่มต้นล่าช้า

<IntercomProvider /> ใช้ตัวอย่างอินเตอร์คอมอย่างเป็นทางการและเริ่มต้นโดยตรงเมื่อโหลด ในพื้นหลังตัวอย่างนี้จะโหลดรหัสภายนอกบางอย่างที่ทำให้อินเตอร์คอมทำงานได้ เวทมนตร์ทั้งหมดนี้เกิดขึ้นกับโหลดเริ่มต้นและในบางกรณีการใช้งานสิ่งนี้อาจกลายเป็นปัญหา (เช่นเมื่อ LCP เป็นลำดับความสำคัญ)

เนื่องจาก v1.2.0 เป็นไปได้ที่จะชะลอการเริ่มต้นนี้โดยผ่าน initializeDelay ใน <IntercomProvider /> (เป็นมิลลิวินาที) อย่างไรก็ตามผู้ใช้ส่วนใหญ่ไม่จำเป็นต้องยุ่งกับเรื่องนี้

สำหรับการอ้างอิงดู #236 และ https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-loading-intercom-on-my-site-to-reduce-the-js-load