Salesforceのフローを起動するTwilio Flexプラグインを作ってみた

1. はじめに

こんにちは。ISID CIT事業部の熊倉です。
本記事ではTwilio Flexプラグインを利用し、Salesforce Integrationの機能を拡張する方法について紹介したいと思います。
※ Twilio Advent Calendar 2022の20日目の記事になります

2. 実装の経緯

Twilio Flex の Salesforce Integration を使用することで、Salesforce 内で Twilio Flex を使用できます。
着電があった際にどのオブジェクトを検索するか/ポップアップするかといった動作もカスタマイズでき、設定はSalesforceの ソフトフォンレイアウト から行います。

画面ポップ設定から「電話番号をキーにして検索をした結果、レコードが存在しなかった」時の動作を設定できるのですが、色々確認している中で『フローにポップ』という選択肢を発見しました。

「最近のアプデで複雑な画面フローも作れるようになったし、着信をトリガーにしてポップアップすると面白そう！」と思い、『フローにポップ』を設定したところ...

フローに渡す変数を指定できません

（どのフローを起動するかだけ選択できます）

　
　
フローに電話番号を渡して→顧客を検索して→画面フローで表示させたい（画面フローの詳細についてはこちらが詳しいのでご参考ください）と思っていたので、なんとかフローに値を渡せないか色々ググったところ、Twilioのブログで以下のような記事を発見しました。

上記ブログでは標準のSalesforce Integrationを拡張する方法について紹介しております。
内容を要約すると、
「標準機能を拡張するためには、ネイティブでロードされるOpen CTIとは別に『直接Open CTIのAPIを叩くプラグイン』を作成する必要がある」と記載がありました。

ということなので、そのようなプラグインを作ってみた、というのが今回の記事になります。

（上記ブログではGitHubのソースも公開しており、それをフローに限定してシンプルに書き直したといった内容になります）

▶︎ 参考 - Salesforce Open CTIとは

Salesforce Open CTI は、サードパーティのコンタクトセンターソリューションとSalesforceを統合するためのJavaScriptのAPIです。Salesforce Open CTI を使用することで、ローカルのPCに特別なアプリのインストールをすることなく、Salesforce内で直接ソフトフォンから電話をかけることが出来ます。

詳しくは、以下のドキュメントをご参考ください。

• Service Cloud - Salesforce Open CTI
• Open CTI 開発者ガイド

3. 実装してみる

では、実際に『直接Open CTIのAPIを叩く』Twilio Flex プラグインを開発したいと思います。

3.1 SalesforceのOpen CTIをロードする

まず、Twilio Flexプラグイン内でSalesforce Open CTIをロードします。

Salesforce Open CTIはscriptタグからロードする必要があるため、少し遠回りな実装になってしまいますが、
「Open CTIのURLを指定したscriptタグを作成し、Documentに追加」してあげる必要があります。

上記処理を行うソースコードを用意しました。

utils.ts

export const loadScript = async (url: string) =>
  new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = url;
    script.type = "text/javascript";
    document.head.appendChild(script);
    script.addEventListener("load", resolve);
    script.addEventListener("error", reject);
  });

loadScriptの引数でSalesforce Open CTIのURLを渡し、ロードが完了したらResolveする、といった処理を行っています。
　
　

続いて、上記メソッドをコールするコントローラも用意します。
OpenCTIControllerというコントローラを用意し、そこで「Open CTIのロード」「Open CTIのメソッドをコール」（次に説明します）を行う、といった想定で次のようなソースコードを作成しました。

OpenCTIController.ts

export const getOpenCTIAdaptar = async () => {
  const sfdcBaseUrl = window.location.ancestorOrigins[0];
  const sfdcUrl = `${sfdcBaseUrl}/support/api/${process.env.FLEX_APP_SF_API_VER}/lightning/opencti_min.js`;
  // openctiをロード
  await loadScript(sfdcUrl);
  const openCTI = window.sforce.opencti as OpenCTI;
  return openCTI;
};

sfdcUrlにSalesforce Open CTIのURLを指定し、先ほど作成したloadScriptを非同期で呼び出します。
ロードが完了したら、windowからSalesforce Open CTIのアダプターが取得できますので、それをreturnする、といった処理内容になります。

　
Salesforce Open CTIは自身のSalesforce環境から取得することができます。
ロードするURLはSalesforce Classic環境とLightning Experiece環境で分かれております。

<!-- Salesforce Classic: -->
<script src="https://MyDomainName--PackageName.vf.force.com/support/api/56.0/interaction.js" type="text/javascript"></script>

<!-- Lightning Experiece: -->
<script src="https://MyDomainName--PackageName.vf.force.com/support/api/56.0/lightning/opencti_min.js" type="text/javascript"></script>

Salesforce ClassicとLightning ExperieceはURL以外にも叩けるメソッドが異なっていたり、処理自体も互換性がなかったりするので、ご自身の環境に併せて選択していただけると良いかと思います。
今回はLightning Experienceのみ利用想定でソースコードを記述しました。

3.2 Open CTIのAPIをコールするメソッドを用意

Open CTIのロード、アダプターの取得まで出来ましたので、次にフローを呼びだすメソッドを記述します。

Open CTIで叩けるメソッドの一覧は次のドキュメントから確認できます。
https://developer.salesforce.com/docs/atlas.ja-jp.api_cti.meta/api_cti/sforce_api_cti_methods_intro_lightning.htm

今回はフローを呼び出したいので、使用するメソッドはscreenPop()になります。

3.1で取得したアダプターからscreenPop()を叩くようなソースコードを用意してみます。

OpenCTIController.ts

export const screenPop = (openCTI: OpenCTI, task: any) => {
  //日本の国番号を変換
  const phoneNum = task.attributes.from.replace("+81", 0);
  openCTI.screenPop({
    type: openCTI.SCREENPOP_TYPE.FLOW,
    params: {
      // FlowのAPI名
      flowDevName: "CallCenterFlow",
      // Flowの引数
      flowArgs: [
        {
          name: "IncomingPhoneNumber",
          type: "String",
          value: `${phoneNum}`,
        },
      ],
    },
    callback: (response) => {
      console.log(response.success);
    },
  });
};

screenPop()では「どの画面をポップアップするか」を指定できます。
今回はフローを起動したいので、opencti.SCREENPOP_TYPE.FLOWを指定しました。
フローを設定した場合、パラメータで「どのフローに」「何の値を渡すか」を指定できます。
上記ソースコードは、 API参照名CallCenterFlowというフローにあるString型のIncomingPhoneNumberという変数にphoneNumの値を渡しているという処理を記載しています。

これらフロー/変数については私が想定したものですので、ご参考いただく際は自身の環境に合わせて変更していただければと思います。

3.3 TwilioのActionsにイベントリスナーを追加する

最後に、TwilioのActionsと3.2で作成したメソッドを紐づけます。
今回は、フローを起動したいタイミングを「Twilioのタスクを受領した時（電話を受け取った時）」としたかったので、次のようにソースコードを記述しました。

SalesforceOpenCTIPlugin.ts

~~~
  async init(flex: typeof Flex, manager: Flex.Manager) {
    const openCTI = await OpenCTIAdaptar.getOpenCTIAdaptar();
    //タスクを受領した際に、ポップアップ
    flex.Actions.addListener("beforeAcceptTask", (payload) => {
      if (payload.task !== null) {
        console.log("BeforeAcceptTask");
        OpenCTIAdaptar.screenPop(openCTI, payload.task);
      }
    });
  }
~~~

Twilio Flexでイベントリスナーを追加できるActionは星の数ほどあるので、こちらも設計に合わせて変更してください。
https://assets.flex.twilio.com/docs/releases/flex-ui/2.0.2/ui-actions/Actions/

4. 完成イメージ

Flex プラグインが完成したので、最後にSalesforceの動きを確認します。

作成したFlex Pluginをデプロイ&リリースし（詳しくは高橋さんの記事をご参考ください！）、Salesforce内で起動したTwilio Flexでタスクを受領する（電話を受け取る）と...

フローが起動されました！

　

（ちなみに、ソースコード内で指定していたCallCenterFlowは 「着信した電話番号をキーに取引先責任者を検索し、その情報の更新（および新規作成）とケースの新規作成を1つの画面で行える」 という画面フローになっています）

5. 最後に

本記事で紹介したプラグインは以下リポジトリから参照できます。
https://github.com/ISID/twilio-flex-salesforce-opencti

リポジトリは以下のように2つのフォルダに大きく分かれております。

• plugin-salesforce-openctiフォルダ
  • Twilio Flex プラグイン
• salesforce-screenflowフォルダ
  • SFDX プラグイン

plugin-salesforce-openctiフォルダでは本記事で紹介したTwilio Flexプラグインについて格納されており、
salesforce-screenflowフォルダではデモで作成したCallCenterFlowが格納されております。
それぞれTwilio Flex環境、Salesforce環境にデプロイしていただくことで今回の記事で紹介した内容をご確認いただけます。

ISIDではTwilio / Twilio Flex導入の他にSalesforceの導入も行っております。CRMと密に連携したコンタクトセンターを構築したい方は是非ご相談ください！
ソリューションページもございますのでこちらも参照していただけると幸いです。
https://www.isid.co.jp/solution/twilio.html

ここまで読んでいただきありがとうございました。