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 الاحتفاظ بقدر ما هو تجريد واحد على واحد لوظيفة "الفانيليا" الداخلية.

لاحظ أن الكثير من المشكلات يمكن أن تكون مرتبطة بـ Vanilla intercomjs. يرجى الاطلاع على https://forum.intercom.com/s/ قبل الإبلاغ عن مشكلة هنا.

الروابط

• API
• ملعب
• أمثلة
• TypeScript
• استكشاف الأخطاء وإصلاحها
• متقدم

API

• Intercomprovider
• UseIntercom
• intercomprops

Intercomprovider

يتم استخدام IntercomProvider لتهيئة window.Intercom مثيل intercom. يتأكد من أن التهيئة تتم مرة واحدة فقط. إذا تم تمرير أي مستمعين ، فسيتأكد IntercomProvider من إرفاقها.

ضع IntercomProvider بأكبر قدر ممكن في طلبك. سيؤكد هذا أنه يمكنك استدعاء useIntercom في أي مكان.

الدعائم

اسم	يكتب	وصف	مطلوب	تقصير
appid	خيط	معرف التطبيق لمثيل الاتصال الداخلي الخاص بك	حقيقي
أطفال	React.ReactNode	رد فعل الأطفال	حقيقي
autoboot	منطقية	يشير إلى ما إذا كان ينبغي تشغيل الاتصال الداخلي تلقائيًا. إذا لم true حاجة للاتصال boot ، فسيتصل بها IntercomProvider	خطأ شنيع	خطأ شنيع
onhide	() => باطلة	نشأ عندما يختبئ الرسول	خطأ شنيع
onshow	() => باطلة	نشأ عندما يظهر الرسول	خطأ شنيع
onUnreadCountchange	(رقم) => باطل	يتم تشغيله عندما يتغير العدد الحالي من الرسائل غير المقروءة	خطأ شنيع
onuseremailsupplied	() => باطلة	يتم تشغيله عندما يدخل زائر بريده الإلكتروني إلى الرسول	خطأ شنيع
anhustinitialize	منطقية	يشير إلى ما إذا كان ينبغي تهيئة الاتصال الداخلي. يمكن استخدامها في البيئة متعددة الأعراق	خطأ شنيع	حقيقي
Apibase	خيط	إذا كنت بحاجة إلى توجيه طلبات الرسول الخاصة بك من خلال نقطة نهاية مختلفة عن الافتراضي. بشكل عام ، هذا غير مطلوب. التنسيق: https://${INTERCOM_APP_ID}.intercom-messenger.com (انظر: #96)	خطأ شنيع
pitchlizedelay	رقم	يشير إلى ما إذا كان يجب تأخير تهيئة الاتصال الداخلي ، يكون التأخير في مرض التصلب العصبي المتعدد ، والافتراضات إلى 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 >
  ) ;
} ;

UseIntercom

تستخدم لاسترداد جميع الطرق المجمعة مع الاتصال الداخلي. وتستند هذه إلى مستندات الاتصال الداخلي الرسمي. تمت إضافة بعض الطرق الإضافية لتحسين الراحة.

تأكد من أن IntercomProvider ملفوف حول المكون الخاص بك عند استدعاء useIntercom() .

ملاحظة - لا يمكنك استخدام useIntercom() في نفس المكون حيث تتم تهيئة IntercomProvider .

API

اسم	يكتب	وصف
isopen	منطقية	حالة رؤية الرسول
التمهيد	(الدعائم؟: intercomprops) => void	قم بتعبئة مثيل الاتصال الداخلي ، غير مطلوب إذا كان autoBoot في IntercomProvider true
اغلق	() => باطلة	يغلق مثيل الاتصال الداخلي
Hardshutdown	() => باطلة	نفس الوظيفة مثل shutdown ، ولكنها تتأكد من إزالة ملفات تعريف الارتباط الداخلية ، window.Intercom و window.intercomSettings .
تحديث	(الدعائم؟: intercomprops) => void	يقوم بتحديث مثيل الاتصال الداخلي مع الدعائم المقدمة. لبدء "ping" ، update الاتصال بدون الدعائم
يخفي	() => باطلة	يخفي الرسول ، وسوف يتصل onHide إذا تم توفيره إلى IntercomProvider
يعرض	() => باطلة	يعرض الرسول ، سوف يدعو onShow إذا تم توفيره إلى IntercomProvider
Showmessages	() => باطلة	يعرض الرسول مع قائمة الرسائل
shownewmessage	(المحتوى؟: سلسلة) => باطلة	يُظهر الرسول كما لو أن محادثة جديدة تم إنشاؤها للتو. إذا تم تمرير content ، فسوف يملأ ملحن الرسالة
getVisitorId	() => سلسلة	يحصل على معرف الزائر
ابدأ	(Tourid: Number) => void	تبدأ جولة على أساس tourId
StartCheckList	(قائمة مراجعة: رقم) => باطل	تبدأ قائمة مرجعية بناءً على checklistId
tracevent	(الحدث: سلسلة ، بيانات التعريف؟: كائن) => باطل	يقدم event مع metaData اختيارية
عرض الجسيمات	(مقاليد: سلسلة) => باطلة	يفتح الرسول مع المقالة المحددة من articleId
starturvey	(مساح: رقم) => باطل	قم بإجراء مسح في Messenger by surveyId
Simplace	(Spacename: intercomspace) => void	يفتح الرسول بالمساحة المحددة
Showticket	(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

جميع السمات/الدعائم الافتراضية الداخلية يتم غلاف الجمل ( appId بدلاً من app_id ) في react-use-intercom ، راجع InterComprops لمعرفة السمات التي يمكنك تمريرها boot أو update . أو تحقق من مستندات الاتصال الداخلي لمعرفة جميع السمات/الدعائم المتاحة.

الملاحظة -جميع سمات الاتصال الداخلي المدرجة هنا هي ثعبان ، في react-use-intercom هذه هي جمل غلاف.

سمات مخصصة

ما زلت تريد تمرير سمات مخصصة إلى الاتصال الداخلي؟ سواء تم استخدام boot أو update ، يمكنك إضافة خصائصك المخصصة عن طريق تمريرها من خلال customAttributes في طريقة boot أو update .

الملاحظة - يجب أن تكون مفاتيح كائن 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

يتم كتابة جميع الخيارات المحتملة المحددة مسبقًا لتمريرها إلى مثيل الاتصال الداخلي. لذلك كلما اضطررت لتمرير InterComprops ، ستكون جميع الخصائص الممكنة متاحة خارج الصندوق. هذه الدعائم هي JavaScript "ودية" ، لذلك 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 مغلفة ، باستثناء خاصية customAttributes في طريقة boot update من useIntercom .

متقدم

تأخير تهيئة

يستخدم <IntercomProvider /> مقتطفًا رسميًا داخليًا ويتم تهيئته مباشرة عند الحمل. في الخلفية ، سيتم تحميل هذا المقتطف بعض التعليمات البرمجية الخارجية التي تجعل العمل الداخلي. يحدث كل هذا السحر في الحمل الأولي وفي بعض حالات الاستخدام يمكن أن يصبح هذا مشكلة (على سبيل المثال عندما يكون LCP الأولوية).

منذ V1.2.0 ، من الممكن تأخير هذا التهيئة عن طريق تمرير initializeDelay في <IntercomProvider /> (إنه بالمللي ثانية). ومع ذلك ، لن يحتاج معظم المستخدمين إلى العبث بهذا.

للاطلاع على المرجع ، راجع #236 و https://forum.intercom.com/s/question/0d52g00004wxwls/can-i-delay-load-