ホーム>プログラミング関連>AI ソースコード
ダウンロード

特徴

  • フック
  • 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 「バニラ」インターコム機能の1対1の抽象化と同じくらい近くに留めようとします。

多くの問題がバニラインターコムジに関連している可能性があることに注意してください。ここで問題を報告する前に、https：//forum.intercom.com/s/をご覧ください。

リンク

  • API
  • 遊び場
  • 例
  • タイプスクリプト
  • トラブルシューティング
  • 高度な

API

  • 相互プロバイダー
  • use intercom
  • Intercomprops

相互プロバイダー

IntercomProviderは、 window.Intercomインスタンスの初期化に使用されます。初期化が一度だけ行われることを確認します。リスナーが渡された場合、 IntercomProviderはこれらが添付されていることを確認します。

アプリケーションでは、 IntercomProviderをできるだけ高く配置します。これにより、 useIntercomどこにでも呼び出すことができます。

小道具

名前タイプ説明必須デフォルト
appid弦インターコムインスタンスのアプリID真実
子供たちReact.Reactnode子供を反応します真実
オートブートブールインターコムを自動的に起動するかどうかを示します。 true場合、 bootを呼び出す必要がない場合、 IntercomProviderはあなたのためにそれを呼び出します間違い間違い
オンハイド（）=> voidメッセンジャーが隠れているときにトリガーされます間違い
ショー（）=> voidメッセンジャーが表示されたときにトリガーされます間違い
onunreadCountChange （number）=> void未読メッセージの現在の数が変更されたときにトリガーされます間違い
onuseremailsupplied （）=> void訪問者がメッセンジャーにメールを入力したときにトリガーされます間違い
イニタイアル化する必要がありますブールインターコムを初期化するかどうかを示します。複数の環境で使用できます間違い真実
アピバーゼ弦デフォルトとは異なるエンドポイントを介してメッセンジャーリクエストをルーティングする必要がある場合。一般的に言えば、これは必要ありません。
形式： https://${INTERCOM_APP_ID}.intercom-messenger.com （＃96を参照）		間違い
initializedelay番号インターコムの初期化を遅延させるか、遅延がMSで、デフォルトは0になります。＃236を参照してください。間違い
AutoBootProps Intercomprops 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 >
  ) ;
} ;

use intercom

Intercomにバンドルされたすべてのメソッドを取得するために使用されます。これらは、公式のインターコムドキュメントに基づいています。利便性を向上させるためにいくつかの追加の方法が追加されました。

useIntercom()呼び出すときに、 IntercomProviderコンポーネントに巻き付けられていることを確認してください。

備考IntercomProvider初期化されているのと同じコンポーネントでuseIntercom()を使用することはできません。

API

名前タイプ説明
Isopenブールメッセンジャーの視認性ステータス
ブート（小道具？：intercomprops）=> voidインターコムインスタンスを起動します。 IntercomProviderのautoBoot trueである場合は必要ありません
シャットダウン（）=> voidインターコムインスタンスをシャットダウンします
ハードシュートダウン（）=> void shutdownと同じ機能ですが、インターコムCookie、 window.Intercom 、 window.intercomSettingsが削除されていることを確認します。
アップデート（小道具？：intercomprops）=> void供給された小道具でインターコムインスタンスを更新します。 「ping」を開始するには、小道具なしでupdate呼び出します
隠れる（）=> voidメッセンジャーを隠し、 IntercomProviderに供給されるとonHide電話します
見せる（）=> void IntercomProviderを表示しますonShow
showmessages （）=> voidメッセージリストにメッセンジャーを表示します
shownewmessage （content？：文字列）=> void新しい会話が作成されたように、メッセンジャーに表示されます。 contentが渡されると、メッセージ作曲家が記入されます
getvisitorid （）=>文字列訪問者IDを取得します
starttour （TourID：number）=> void tourIdに基づいてツアーを開始します
StartCheckList （CheckListID：number）=> void checklistIdに基づいてチェックリストを開始します
Trackevent （イベント：文字列、メタデータ？：オブジェクト）=> voidオプションのmetaDataを使用してeventを提出します
showarticle （articleId：string）=> void articleIdによって指定された記事でメッセンジャーを開きます
StartSurvey （SurveyID：number）=> void surveyIdによるメッセンジャーの調査をトリガーします
ショースペース（spaceName：intercompace）=> void指定されたスペースでメッセンジャーを開きます
ショーチケット（TicketID：number）=> void ticketIdで指定されたチケットでメッセンジャーを開きます
Conversation （ConversationID：number）=> void 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

すべてのIntercomデフォルトの属性/プロップは、 react-use-intercomのCamel Cased（ app_idの代わりにappId ）です。Intercompropsを参照して、 bootまたはupdateに渡すことができる属性を確認してください。または、Intercomドキュメントをチェックして、利用可能なすべての属性/プロップを確認してください。

備考- リストされているインターコム属性はすべてヘビのケースであり、 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の機能を紹介するための小さな遊び場。

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 。

useIntercom()を呼び出す前に、 IntercomProviderが初期化されていることを確認してください。 IntercomProviderを1回初期化するだけです。アプリケーションツリーでできるだけ高くIntercomProviderすることをお勧めします。

IntercomProvider初期化したのと同じコンポーネントでuseIntercom()を呼び出していないことを確認してください。

  • 私はSome invalid props were passed to IntercomProvider. Please check following props: [properties]コンソール。

正しいプロパティをIntercomProviderに渡すことを確認してください。相互プロバイダーをチェックして、すべてのプロパティを確認します。 react-use-intercomのすべてのプロパティは、 useIntercomのbootおよびupdate方法のcustomAttributesプロパティを除き、Camel Casedであることに注意してください。

高度な

遅延初期化

<IntercomProvider />は、公式のインターコムスニペットを使用し、負荷時に直接初期化されます。バックグラウンドでは、このスニペットはインターコムを機能させる外部コードをロードします。この魔法はすべて初期負荷で発生し、一部のユースケースでは、これは問題になる可能性があります（例えば、LCPが優先される場合）。

v1.2.0以来<IntercomProvider /> （ミリ秒単位）でinitializeDelayを渡すことにより、この初期化を遅らせることができます。ただし、ほとんどのユーザーはこれを台無しにする必要はありません。

参照については、＃236およびhttps://forum.intercom.com/s/question/0d52g004wxwls/can-i-delay-loading-intercom-on-my-site-to-js-loadを参照してください

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて