サポートタイムズ

サポートタイムズはカスタマーサポートの“今”を届けるメディアです。(Powered by CallConnect)

Twitter Facebook

Intercom 内チャットに独自の要素を埋め込む方法

f:id:selfree:20230711152403p:plain

顧客メッセージプラットフォームの Intercom は、開発者に向けて様々な拡張機能を提供しています。本記事では Intercom 拡張の一つである、Intercom Canvas Kit をご紹介します。

Canvas Kit とは

Canvas Kit とは、Intercom チャット内に独自のフォームやコンテンツを埋め込むことのできる拡張機能です。

例えば、Intercom 内でお客様とチャットをしている中で、実際にお会いする MTG 日時の候補を Intercom 内で掲示し、お客様に都合の良い時間をクリックで選んでいただくようなフォームを作成できます。Intercom 側でどの情報を入力したのかを管理できるため、個別面談のために独自の予約フォームなどを用意する必要がなくなります。

このように、Intercom チャット内で特定の項目を聞く必要のあるケースで Canvas Kit は特に役立ちます。Canvas Kit はそれだけではなく、Sheets 機能を使うことで独自の HTML ページを Intercom 内に埋め込む(iframe)ことも可能です。チャットだけでは説明しきれない項目を、Google Meet app に案内し、ビデオ通話で話をするなどの使い方が考えられます。

※ まずは Canvas Kit で開発をする前に、本当に開発の必要があるのかは検討する価値があります。既に、Intercom App Store では、Canvas Kit で作られた様々なアプリが公開されており、自社が求めるアプリがないか探してみることをお勧めします。

Canvas Kit 入門

それでは Canvas Kit の実装方法について概要を説明します。

Intercom でのアクションの中で、どのケースで Canvas Kit を有効にする/しないかを設定できます。Intercom アプリを作成後、[Configure] > [Canvas Kit] に移ると以下のようなケースで利用できることがわかります。

f:id:selfree:20230711152359p:plain

ユーザーやビジターでの利用: アプリ内メッセージへ挿入、顧客との会話の中へ挿入、メッセンジャーのホームスクリーンに設置、ボットのフォローアクションとして利用

チームメイトでの利用 会話詳細に追加

まず初期化リクエストを Intercom から、指定した URL へ送信します。こちらも利用ケースに応じて様々なタイミングで初期化できます。

  • 会話の返信に追加
  • オペレーターフローに追加
  • メッセージに追加
  • メッセンジャー Home に追加
  • 会話詳細に追加

[Configure] > [Canvas Kit] で利用するケースを設定した後、Intercom から送信先の URL を指定することになります。指定した URL へリクエストが渡ってきたら、特定のレスポンス JSON を返す必要があります。

ここで返す JSON で、フォームをどのように形成するかを指定できます。ラベルやボタン、テキストエリア、チェックボックスなどを自由に選んで構築できます。色や大きさなどもある程度は選択できるようになっています。詳細は Canvas Kit Components を参照ください。Intercom 側で Canvas Kit Builder が提供されていますので、JSON をいじりながら最終的にどのようなフォームになるのかを確認することができます。

その他、拡張オプションを以下に掲示します。

Live Canvas を利用することで、ユーザーのリクエストに関係なく、カードが見られた時点でコードを実行させることができます。ユーザーに最新の情報を提供する必要のある場合に利用できます。

Sheets を利用することで、完全独自の iframe オブジェクトを Intercom 内に埋め込むことができます。埋め込まれた iframe 側で Intercom 側の情報を取得・操作できるような SDK も提供されており、幅広い実装と密な Intercom 連携を実現することが可能です。

終わりに

本記事では Intercom Canvas Kit の使い所と、大まかな概要を日本語で説明しました。Intercom Canvas Kit の詳細は、英語となりますが以下のドキュメントページに掲載されています。

developers.intercom.com

開発者フレンドリーな Intercom でより効率的なサポートを実現していただければと思います。