電話および Twilio Flex との統合
IBM Cloud
電話統合を使用すると、電話を介してお客様を支援し、Twilio Flex 内のライブ・エージェントに転送することができます。 アシスタントとの会話の途中で、お客様から人と話すように求められた場合は、Twilio Flex エージェントに直接会話を転送できます。
開始前に
この統合パターンを使用するには、以下が必要です。
- watsonx Assistant プラス・プランまたはエンタープライズ・プラン (電話統合に必要)
- 以下の製品を含む Twilio アカウント:
- Twilio Flex
- Twilio Voice with Programmable Voice API
- Twilio Studio
watsonx Assistant 電話統合の追加
既に電話統合をアシスタントに追加している場合は、このセクションをスキップできます。
電話統合を追加する必要がある場合は、以下の手順に従ってください。
-
アシスタントのメインページの 「重要なチャネル (Essential Channels)」 の下の 「統合 (Integrations)」 セクションに、 「電話 (Phone)」 のタイルが表示されます。
-
「電話」 タイルで、 「追加」 をクリックします。
-
ポップアップ・ウィンドウで、もう一度 「追加」 をクリックします。
-
外部プロバイダーの既存の電話番号を使用するを選択します。
-
電話統合のセットアップ・プロセスを完了します。 (詳しくは、「電話との統合」を参照してください。)
現時点では、これだけを行う必要があります。 電話統合の構成について詳しくは、「電話との統合」を参照してください。
Twilio Flex プロジェクトの追加
新規または既存の Twilio Flex プロジェクトが必要です。
Twilio Flex プロジェクトが必要な場合は、以下のステップを使用して作成できます。
-
プロジェクトのドロップダウン・メニューから、「新規プロジェクトの作成」をクリックします。 プロジェクトの名前を指定し、アカウント情報を確認します。
-
ウェルカムページで、新しいプロジェクトの Twilio 製品として Flex を選択します。 アンケートに回答し 、「Twilioの開始」 をクリックします。
Flex プロジェクトがプロビジョンされたら、 Twilio コンソールに戻ります。 ドロップダウンリストから正しいプロジェクトを選択したことを確認してください。
-
ナビゲーション・メニューで、「すべての製品 & サービス」アイコンをクリックします。
-
Twilio Programmable Voice> 設定> 一般をクリックします。
-
「拡張プログラマブル SIP 機能」の下で、スイッチを「有効」に切り替えます。
コール・フローの作成
電話統合とTwilio Flexプロジェクトの設定が完了したら、Twilio Studioでコールフローを作成し、アシスタントが使用する電話番号をプロビジョニング(またはポート)する必要があります。
コールフローを作成するには
-
ナビゲーション・メニューで、「すべての製品 & サービス」アイコンをクリックします。
-
「スタジオ」をクリックします。
-
「+」をクリックして、新規フローを作成します。
-
新しいフローに名前を付け 、「次へ」 をクリックします。
-
「最初からやり直す」 を選択し 、「次へ」 をクリックします。 「トリガー」 ウィジェットがフロー・キャンバスに表示されます。
-
「トリガー」ウィジェットをクリックします。
-
Webhook URL フィールドの値をメモします。 この値は、次のステップで必要になります。
電話番号の構成
-
ナビゲーション・メニューで、「すべての製品 & サービス」アイコンをクリックします。
-
電話番号をクリックします。
-
数値の管理で、アシスタントで使用する電話番号を構成します。 新しい番号を購入するには「数値の購入」を選択し、既存の電話番号を移植するには「ポート&ホスト」を選択します。
-
「アクティブな番号」リストで、新しい電話番号をクリックします。
-
「音声とファックス 」で、これらの設定を行います。
-
「以下を使用して構成」フィールドには、Webhook、TwiML Bins、Functions、Studio、または Proxy を選択します。
-
「呼び出し COMES IN」の場合は、Studio フローを選択します。 ドロップダウン・リストからフローを選択します。
-
「1 次ハンドラーが失敗しました」の場合は、Studio フローを選択します。 ドロップダウン・リストからフローを選択します。
-
-
watsonx Assistantに移動し、アシスタントの電話統合設定を開きます。
-
電話番号フィールドに、Flex Studioで設定した電話番号を入力します。
-
**「保存して終了」**をクリックします。
電話番号のテスト
Twilio Flex Flow エディターで「発言/再生」ウィジェットをトリガーして、電話番号がフローに接続されていることをテストできるようになりました。
-
「発言/再生」ウィジェットをフロー・キャンバスにドラッグします。
-
I'm alive.
のような単純な語句を使用して、「発言/再生」ウィジェットを構成します。 -
「トリガー」ウィジェットの「着信呼び出し」ノードを「発言/再生」ウィジェットに接続します。
-
電話番号に電話してください。 Twilio Flowがテストフレーズに反応するのを聞くことができます。
-
「発言/再生」ウィジェットを削除して、次のステップに進みます。
-
このテストが期待通りに動作しなかった場合は、電話番号の設定を再度確認し、フローに接続されていることを確認してください。
着信呼び出しを処理するための Twilio 関数の作成
Twilioの機能を使用して、アシスタントにインバウンドコールを転送するコールフローを設定する必要があります。 以下の手順を実行します。
-
ナビゲーション・メニューで、「すべての製品 & サービス」アイコンをクリックします。
-
「サービス」をクリックします。
-
**「サービスの作成」**をクリックします。 サービス名を指定し、「次へ」をクリックします。
-
「追加」>「関数の追加」をクリックして、サービスに新しい機能を追加します。 新しい関数に
/receive-call
という名前を付けます。 -
/receive-call
関数内のテンプレートを以下のコードに置き換えます。exports.handler = function(context, event, callback) { const VoiceResponse = require('twilio').twiml.VoiceResponse; const response = new VoiceResponse(); const dial = response.dial({ answerOnBridge: "true", referUrl: "/refer-handler" }); const calledPhoneNumber = event.Called; dial.sip(`sip:${calledPhoneNumber}@{sip_uri_hostname};secure=true`); return callback(null, response); }
{sip_uri_hostname}
を、アシスタントの電話統合SIP URIのホスト名部分(sips:
の後ろの部分)に置き換えてください。 注:TwilioはSIPS
のURIをサポートしていませんが、SIP URIに;secure=true
を追加することでセキュアなSIPトランキングをサポートしています。
-
保存 をクリックします。
-
「すべてデプロイ」をクリックします。
着信コールハンドラへのリダイレクト
Studio Flowエディターで TwiMLリダイレクトウィジェットを使用して、 /receive-call
前のセクションで作成した関数。
-
Studio フロー・キャンバスに「TwiML リダイレクト」ウィジェットを追加します。
-
着信呼び出しトリガーを「TwiML リダイレクト」ウィジェットに接続します。
-
前のセクションで作成した
/receive-call
機能の URLを TwiML に設定します。 -
これで、インバウンド呼び出しの受信時にフローが watsonx Assistant にリダイレクトされます。
-
リダイレクトが失敗した場合は、
/receive-call
関数をデプロイしたことを確認してください。
アシスタントからの転送を処理する Twilio 関数の作成
また、顧客がエージェントと話したいと希望した場合に備えて、アシスタントからTwilio Flexに転送された電話を処理するためのコールフローを設定する必要があります。 TwiML の後に Say/Play を使用して、 watsonx Assistantからフローにコールが転送されることを示します。 この時点では、ライブ・エージェントの呼び出しのキューイングなど、多くのオプションが使用可能です。これらのオプションについては、このセクションで説明します。
-
Say/Play ウィジェットをキャンバスに追加し、
Transfer from Watson complete
などの句を使用して構成します。 -
「TwiML リダイレクト」ウィジェットの 返品 ノードを「発言/再生」ウィジェットに接続します。
-
「トリガー」ウィジェットをクリックします。
-
Webhook URL フィールドから値をコピーします。 この値は、次のステップで必要になります。
-
「Twilio の機能 (Twilio Functions)」ページで、「追加」>「関数の追加」をクリックして、別の新しい機能をサービスに追加します。 この新しい関数に
/refer-handler
という名前を付けます。 -
/refer-handler
関数内のテンプレートを以下のコードに置き換えます。exports.handler = function(context, event, callback) { // This function handler will handle the SIP REFER back from the Phone Integration. // Before handing the call back to Twilio, it will extract the session history key from the // User-to-User header that's part of the SIP REFER Refer-To header. This session history key // is a string that is used to load the agent application in order to share the transcripts of the caller // with the agent. // See https://github.com/watson-developer-cloud/assistant-web-chat-service-desk-starter/blob/main/docs/AGENT_APP.md const VoiceResponse = require('twilio').twiml.VoiceResponse; const STUDIO_WEBHOOK_URL = '{webhook_url}'; let studioWebhookReturnUrl = `${STUDIO_WEBHOOK_URL}?FlowEvent=return`; const response = new VoiceResponse(); console.log("ReferTransferTarget: " + event.ReferTransferTarget); const referToSipUriHeaders = event.ReferTransferTarget.split("?")[1]; console.log(referToSipUriHeaders); if (referToSipUriHeaders) { const sanitizedReferToSipUriHeaders = referToSipUriHeaders.replace(">", ""); console.log("Custom Headers: " + sanitizedReferToSipUriHeaders); const sipHeadersList = sanitizedReferToSipUriHeaders.split("&"); const sipHeaders = {}; for (const sipHeaderSet of sipHeadersList) { const [name, value] = sipHeaderSet.split('='); sipHeaders[name] = value; } const USER_TO_USER_HEADER = 'User-to-User'; // Extracts the User-to-User header value const uuiData = sipHeaders[USER_TO_USER_HEADER]; if (uuiData) { const decodedUUIData = decodeURIComponent(uuiData); const sessionHistoryKey = decodedUUIData.split(';')[0]; // Passes the session history key back to Twilio Studio through a query parameter. studioWebhookReturnUrl = `${studioWebhookReturnUrl}&SessionHistoryKey=${sessionHistoryKey}`; } } response.redirect( { method: 'POST' }, studioWebhookReturnUrl ); // This callback is what is returned in response to this function being invoked. // It's really important! E.g. you might respond with TWiML here for a voice or SMS response. // Or you might return JSON data to a studio flow. Don't forget it! return callback(null, response); }
{webhook_url}
を、スタジオフロー のトリガーウィジェットからコピーした URL に置き換えます。 -
保存 をクリックします。
-
「すべてデプロイ」をクリックします。
-
この参照ハンドラーを作成した後、関数 URL を
/receive-call
ハンドラーの 参照 URL フィールドにコピーして戻します。
通話を Twilio Flex に転送するためのアシスタントの構成
次に、お客様がエージェントとの対話を要求したときに通話を Twilio Flex に転送するようにアシスタントを構成する必要があります。 以下の手順を実行します。
-
watsonx Assistant ユーザー・インターフェースで、アシスタントのダイアログ・スキルを開きます。
-
アシスタントが顧客をオペレーターに転送する条件となるノードを追加します。
-
ノードにテキスト応答を追加し、顧客をオペレーターに転送する前にアシスタントが発話するテキストを指定します。
-
応答の JSON エディターを開きます。
-
JSON エディターで、
connect_to_agent
応答を追加し、電話番号をsip.uri
として指定します ({phone_number}
を SIP トランクの電話番号に置き換えます)。
{
"generic": [
{
"response_type": "connect_to_agent",
"transfer_info": {
"target": {
"service_desk": {
"sip": {
"uri": "sip:+{phone_number}@flex.twilio.com",
"transfer_headers_send_method": "refer_to_header"
}
}
}
},
"agent_available": {
"message": "Ok, I'm transferring you to an agent"
},
"agent_unavailable": {
"message": ""
}
}
]
}
この例では watsonx Assistantから Twilio Flexに渡されるコンテキストの使用方法については説明していません。 Twilio Flex フロー内からユーザー間情報を参照できます
{
"context": {
"widgets": {
"redirect_1": {
"User-to-User": "value",
}
}
}
}
ここで、 redirect_1
はリダイレクト・ウィジェットの名前です。 例えば、複数のキューをセットアップした場合、Twilio Split ウィジェットを使用して、返されたコンテキストに基づいてキューを選択することができます。
アシスタントのテスト
これで、アシスタントがあなたの電話番号にかかってきた電話に応答し、Twilio Flex フローに電話を転送できるようになっているはずです。 アシスタントをテストするには:
-
電話番号に電話してください。 アシスタントが応答したら、エージェントを要求します。
-
Say/Playウィジェットで設定されたフレーズを聞く必要があります(例えば、
Transfer from Watson complete
)。 -
転送に失敗した場合は、コンソールログを使用して、フローから
/receive-call
ハンドラー watsonx Assistant、リファラーハンドラー、そしてTwilio Flexフローに戻るまでの通話の流れを追います。