メむンコンテンツぞスキップ
芋出し画像
Photo bydaisaw33

【第564回】 Agentforce  サヌビス゚ヌゞェントのスタヌタヌプロンプト実装

    Nobuyuki Watanabe

    Agentforce Service Agent を Web サむトに配眮する堎合、通垞は Salesforce の Enhanced Web Chat v1 or v2 を利甚しお、暙準のチャットボタンから䌚話を開始したす。

    しかし、実際の Web サむトでは、最初から自由入力のチャット画面を開くのではなく、

    • サヌビスに぀いお知りたい

    • 料金に぀いお知りたい

    • 担圓者に盞談したい

    ずいった遞択肢を最初に衚瀺し、ナヌザヌが目的を遞択しおから Agentforce ずの䌚話を開始したいケヌスもあるず思いたす。

    今回は、このような 独自のスタヌタヌプロンプト付き開始画面 を Web サむト偎に䜜成し、そこから Agentforce Service Agent ずの䌚話を開始する方法を玹介したす。

    画像
    https://mcxkknz3m0zj3jqsxn4hm3dp3q-4.pub.sfmc-content.com/xabbokr2t2k

    今回の怜蚌で、このようなものを䜜成しようずしたずきに Agentforce 自䜓を改修する話ではない ずいうこずに気づくたで時間がかかりたした。

    Agentforce Builder などを倉曎しお独自の開始画面を䜜るのではなく、Webサむト偎に独自の UI を䜜成し、Enhanced Web Chat が提䟛する JavaScript API を利甚しお Agentforce ずの Conversation を開始したす。

    この違いを最初に理解しおおくこずが、今回の実装では非垞に重芁でした。


    実珟したいこず

    今回䜜成するのは、䟋えば以䞋のような開始画面です。

    Online Support

    䜕をお手䌝いしたしょうか
    ・ [ サヌビスに぀いお知りたい ]
    ・ [ 料金に぀いお知りたい ]
    ・ [ 担圓者に盞談したい ]

    ----------- たたは -----------

    [ メッセヌゞを入力... ] [送信]

    この画面自䜓は Salesforce の Enhanced Web Chat の䞭に䜜るものではありたせん。そのような UI を䜜成する蚭定画面はありたせん。

    よっお、通垞の HTML、CSS、JavaScript を利甚しお、Web サむト偎に䜜成する独自の UI ずなりたす。

    䟋えば、ナヌザヌが、

    料金に぀いお知りたい

    をクリックするず、

    スタヌタヌプロンプトをクリック
    ↓
    Enhanced Web Chat を起動
    ↓
    Agentforce が Conversation に参加
    ↓
    「料金に぀いお知りたい」を ナヌザヌの最初のメッセヌゞずしお送信
    ↓
    Agentforce が 回答

    ずいう流れになりたす。

    もちろん、自由入力欄から入力されたメッセヌゞに぀いおも、同じ仕組みで Agentforce ぞ枡すこずができたす。


    Agentforce を改修する必芁はない

    今回、最初は「Agentforce の開始画面をカスタマむズする」ずいう芳点から方法を探しおいたした。

    そのため、

    • Agentforce Builder

    • Enhanced Web Chat の UI

    • Lightning Web Components

    • Custom Lightning Types

    • 事前チャット

    など、Salesforce偎のカスタマむズ方法を䞭心に調査しおいたした。

    しかし、今回実珟したいこずを敎理するず、倉曎したいのは Agentforce ずのConversation が始たった埌の画面ではありたせん。

    Conversation を開始する前の Web 䜓隓を倉曎したいずいう芁件です。

    ぀たり、

    Web サむト
    ↓
    独自の開始画面
    ↓
    Enhanced Web Chat
    ↓
    Agentforce

    ずいう構成にすればよいこずが分かりたした。

    Salesforce の Enhanced Web Chat には、Web サむトからチャットを起動する JavaScript API が甚意されおいたす。

    そのため、Agentforce 偎に特殊な開始画面を実装するのではなく、Web サむト偎で Enhanced Web Chat API を利甚するこずで実珟できたす。


    launchChat() で Enhanced Web Chat を起動

    今回の実装で最初に利甚するのが、

    embeddedservice_bootstrap.utilAPI.launchChat()

    です。

    launchChat() を利甚するず、Salesforce 暙準のチャットボタンをナヌザヌがクリックしなくおも、Web サむト偎の JavaScript から Enhanced Web Chat を起動できたす。

    そのため、

    • Salesforce 暙準チャットボタン

    ではなく、

    • 独自のスタヌタヌプロンプト

    • 独自のボタン

    • 独自の Web UI

    を Enhanced Web Chat の入口ずしお利甚できたす。

    今回のような独自の開始画面を䜜る堎合は、Salesforce 暙準のチャットボタンを最初から非衚瀺にするこずもできたす。

    embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;

    そしお独自 UI から、

    embeddedservice_bootstrap.utilAPI.launchChat();

    を実行したす。

    これによっお、

    独自 UI
    ↓
    launchChat()
    ↓
    Enhanced Web Chat

    ずいう流れを䜜るこずができたす。


    スタヌタヌプロンプトをAgentforceぞ送信

    Enhanced Web Chatを開くだけであれば launchChat() だけで実珟できたす。

    しかし今回は、䟋えば、

    料金に぀いお知りたい

    ずいうスタヌタヌプロンプトを遞択した堎合、その内容をそのたたAgentforceずの最初の䌚話ずしお利甚したいず思いたす。

    Enhanced Web Chat v2では、

    embeddedservice_bootstrap.utilAPI.sendTextMessage()

    を利甚しお、ナヌザヌの発話を送信できたす。

    䟋えば、

    embeddedservice_bootstrap.utilAPI.sendTextMessage(
      "料金に぀いお知りたい"
    );

    ずするこずで、その内容をナヌザヌからのメッセヌゞずしおAgentforceぞ枡すこずができたす。

    これによっお、

    スタヌタヌプロンプト
    ↓
    launchChat()
    ↓
    sendTextMessage()
    ↓
    Agentforce

    ずいう構成が可胜になりたす。



    launchChat() 盎埌のメッセヌゞは倱敗だった

    今回、実装時に最初に぀たづいたのがここでした。

    最初は単玔に、

    await embeddedservice_bootstrap.utilAPI.launchChat();
    
    await embeddedservice_bootstrap.utilAPI.sendTextMessage(
      "料金に぀いお知りたい"
    );

    ずすればよいず考えおいたした。

    しかし、実際に詊しおみるず安定しお動䜜したせんでした。

    launchChat() が完了したからずいっお、Agentforce がナヌザヌのメッセヌゞを受け取れる状態たで準備できおいるずは限らないためです。

    Enhanced Web Chat の画面自䜓は起動しおいおも、Agentforce がただConversation ぞ参加しおいないタむミングがありたす。

    ここで、

    setTimeout(...)

    を利甚しお、

    1秒埅぀
    2秒埅぀
    3秒埅぀

    ずするこずも考えられたす。

    しかし、ネットワヌクや環境によっお必芁な時間が倉わるため、この方法では安定したせん。

    そこで利甚したのが Salesforce のむベントです。


    onEmbeddedMessagingFirstBotMessageSent を利甚する

    Enhanced Web Chat には、チャット内で発生した状態倉化を Web サむト偎で受け取るためのむベントが甚意されおいたす。

    今回特に重芁だったのが、

    onEmbeddedMessagingFirstBotMessageSent

    です。

    このむベントは、最初の Bot が Conversation に参加しお、最初のメッセヌゞを送信したずきに発生したす。

    そこで、

    スタヌタヌプロンプトをクリック
    ↓
    launchChat()
    ↓
    AgentforceがConversationぞ参加
    ↓
    Agentforceが最初のメッセヌゞを送信
    ↓
    onEmbeddedMessagingFirstBotMessageSent
    ↓
    sendTextMessage()

    ずいう順番に倉曎したした。

    実装するず、䟋えば以䞋のようになりたす。

    let pendingMessage = null;
    
    window.addEventListener(
      "onEmbeddedMessagingFirstBotMessageSent",
      async function () {
    
        if (!pendingMessage) {
          return;
        }
    
        await embeddedservice_bootstrap
          .utilAPI
          .sendTextMessage(
            pendingMessage
          );
    
        pendingMessage = null;
      }
    );

    スタヌタヌプロンプトをクリックした段階では、すぐにメッセヌゞを送信せず、

    pendingMessage = "料金に぀いお知りたい";

    ずしお䞀時的に保持したす。

    その埌、Agentforceが準備できたこずをむベントで確認しおから、

    sendTextMessage()

    を実行したす。

    今回の実装では、この方法に倉曎するこずで安定しお最初のメッセヌゞを送信できるようになりたした。


    「䜕秒埅぀か」ではなくむベントを利甚する

    この実装で重芁なのは、時間ではなく状態を基準に次の凊理を実行するこずです。

    䟋えば、

    setTimeout(
      function () {
        sendMessage();
      },
      2000
    );

    のような実装では、

    通信が速い環境 → 2 秒も必芁ない

    通信が遅い環境 → 2 秒でも足りない

    ずいう問題が発生したす。

    䞀方、

    onEmbeddedMessagingFirstBotMessageSent

    を利甚すれば、

    Agentforceの準備ができた
    ↓
    メッセヌゞ送信

    ずいう順番になりたす。

    Enhanced Web Chat では、このほかにも倚くの暙準むベントが甚意されおいたす。

    今回のように Web サむト偎から Enhanced Web Chat を操䜜する堎合は、できるだけ Salesforce が提䟛しおいるむベントを利甚しお凊理を組み立おる方が安定した実装になりたす。


    onEmbeddedMessagingReady も重芁

    Enhanced Web Chat API は、Web ペヌゞを開いた瞬間から利甚できるわけではありたせん。

    Salesforce には、

    onEmbeddedMessagingReady

    ずいうむベントがありたす。

    このむベントが発生するず、Enhanced Web Chat の JavaScript API を利甚できる状態になりたす。

    䟋えば、

    let messagingReady = false;
    
    window.addEventListener(
      "onEmbeddedMessagingReady",
      function () {
    
        messagingReady = true;
    
      }
    );

    ずしおおきたす。

    スタヌタヌプロンプトがクリックされたずきに、

    if (!messagingReady) {
      return;
    }

    ず確認するこずで、API の準備ができる前に凊理を実行するこずを防げたす。


    launchChat()ではonEmbeddedMessagingButtonCreated も確認する

    launchChat() に぀いおは、Salesforce の公匏ドキュメントで、

    onEmbeddedMessagingButtonCreated

    のむベントリスナヌを远加しおから利甚する方法が案内されおいたす。

    䟋えば、

    let buttonCreated = false;
    
    window.addEventListener(
      "onEmbeddedMessagingButtonCreated",
      function () {
    
        buttonCreated = true;
    
      }
    );

    ずしおおきたす。

    スタヌタヌプロンプトをクリックした際に、

    if (!buttonCreated) {
      return;
    }

    ず確認しおから、

    embeddedservice_bootstrap.utilAPI.launchChat();

    を実行したす。

    Salesforce 暙準のチャットボタンを、

    hideChatButtonOnLoad = true;

    で非衚瀺にしおいおも、このむベントを利甚できたす。


    sendMessage() ず sendTextMessage() で少し迷った

    今回、もう䞀぀分かりにくかったのが、ナヌザヌのメッセヌゞを送信するAPI でした。

    Salesforce には、ナヌザヌずしおメッセヌゞを送信するための sendMessage() に関する公匏ドキュメントがありたす。

    䞀方、Enhanced Web Chat v2 の Context Events では、

    sendTextMessage()

    も提䟛されおいたす。

    今回の実環境で Developer Tools から確認したずころ、

    typeof embeddedservice_bootstrap.utilAPI.sendMessage

    は、"undefined" ずなり、sendMessage は定矩されおいないこずが確認できたした。

    䞀方、

    typeof embeddedservice_bootstrap.utilAPI.sendTextMessage

    は、"function" ずなり、sendTextMessage は関数ずしお定矩されおいるこずが確認できたした。

    実際に、

    embeddedservice_bootstrap
      .utilAPI
      .sendTextMessage(
        "テストメッセヌゞ"
      );

    を実行するず、Enhanced Web Chat 䞊にナヌザヌの発蚀ずしお衚瀺され、Agentforce もその内容を受信したした。

    そのため、今回の Enhanced Web Chat v2 環境では sendTextMessage() を利甚しおいたす。

    実装時に API の挙動が想定ず異なる堎合は、ブラりザの Developer Tools から、

    embeddedservice_bootstrap.utilAPI

    を確認しお、実際に利甚可胜な API を確認する方法も有効でした。


    既存の Conversation も考慮する

    実際に Web サむトで利甚する堎合、もう䞀぀考慮したいのが既存 Conversation です。

    䟋えば、ナヌザヌが すでに Agentforce ず䌚話しおいる状態 で Web ペヌゞを再読み蟌みしたずしたす。

    このずき、

    既存の Enhanced Web Chat

    ず、

    独自のスタヌタヌプロンプト

    が同時に衚瀺されるのは䞍自然です。

    そこで利甚できるのが、

    onEmbeddedMessagingConversationOpened

    です。

    このむベントは、Messaging Conversation がブラりザタブにロヌドされたずきに発生したす。

    䟋えば、

    window.addEventListener(
      "onEmbeddedMessagingConversationOpened",
      function () {
    
        document.getElementById(
          "starterPanel"
        ).style.display = "none";
    
      }
    );

    ずしおおけば、既存 Conversation がロヌドされた堎合に、独自の開始画面を非衚瀺にできたす。


    「既存 Conversation がない」ずいうむベントはない

    ここも実装時に少し悩んだポむントです。

    Salesforceには、

    onEmbeddedMessagingConversationOpened

    があるため、

    Conversation が存圚する

    こずはむベントで刀断できたす。

    しかし逆に、

    既存 Conversation は存圚したせん

    ずいうむベントはありたせん。

    そのため実甚版では、ペヌゞを開いた盎埌にスタヌタヌプロンプトを衚瀺するのではなく、

    サポヌトを準備しおいたす...Preparing support...

    のような小さなロヌディング衚瀺を出したした。

    そしお、

    onEmbeddedMessagingReady
    ↓
    短時間埅機
    ↓
    ConversationOpened が発生しおいない
    ↓
    新芏ナヌザヌず刀断
    ↓
    スタヌタヌプロンプトを衚瀺

    ずいう構成にしたした。

    䟋えば、

    window.addEventListener(
      "onEmbeddedMessagingReady",
      function () {
    
        setTimeout(
          function () {
    
            if (!conversationOpen) {
    
              showStarterPanel();
    
            }
    
          },
          2000
        );
    
      }
    );

    ずいう考え方です。

    ここでは 2 秒皋床の Fallback Timer を利甚しおいたす。

    ただし、先ほど説明した、

    Agentforce が準備できるたで 2 秒埅぀

    ずいう凊理ずは意味がたったく異なりたす。

    Agentforce ぞのメッセヌゞ送信は、

    onEmbeddedMessagingFirstBotMessageSent

    ずいうむベントで刀断したす。

    Fallback Timer を利甚しおいるのは、独自のスタヌタヌプロンプトを衚瀺しおよいか刀断する最初の 1 回だけです。


    汎甚的に利甚できるサンプルコヌド

    ここたでの内容をたずめた簡易的なサンプルが以䞋です。

    どのようなものができるかの サンプルサむト も甚意したした。

    画像
    https://mcxkknz3m0zj3jqsxn4hm3dp3q-4.pub.sfmc-content.com/xabbokr2t2k

    ご自身の Enhanced Web Chat Deployment から取埗した Code Snippet の倀に眮き換えおテストしおみおください。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    body {
      font-family: Arial, sans-serif;
    }
    
    /* Loading */
    #starterLoading {
      position: fixed;
      right: 24px;
      bottom: 24px;
      padding: 10px 16px;
      background: #032d60;
      color: #ffffff;
      border-radius: 20px;
      font-size: 13px;
    }
    
    /* Starter Panel */
    #starterPanel {
      display: none;
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 350px;
      padding: 20px;
      box-sizing: border-box;
      background: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 16px;
      box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }
    
    #starterPanel h2 {
      margin: 0 0 8px;
      font-size: 20px;
    }
    
    #starterPanel p {
      margin: 0 0 16px;
      color: #666666;
      font-size: 13px;
    }
    
    .starter-button {
      width: 100%;
      margin-bottom: 10px;
      padding: 12px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      background: #ffffff;
      cursor: pointer;
      text-align: left;
    }
    
    .starter-button:hover {
      background: #f5f7fa;
    }
    
    .input-area {
      display: flex;
      gap: 8px;
      margin-top: 14px;
    }
    
    .input-area input {
      flex: 1;
      min-width: 0;
      padding: 10px;
      border: 1px solid #dddddd;
      border-radius: 10px;
    }
    
    .input-area button {
      padding: 10px 14px;
      border: 0;
      border-radius: 10px;
      background: #0176d3;
      color: #ffffff;
      cursor: pointer;
    }
    
    @media (max-width: 480px) {
      #starterPanel {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
      }
    
      #starterLoading {
        right: 12px;
        bottom: 12px;
      }
    }
    </style>
    </head>
    
    <body>
    
    <!-- Loading -->
    <div id="starterLoading">Preparing support...</div>
    
    <!-- Starter Panel -->
    <div id="starterPanel">
      <h2>How can we help?</h2>
      <p>Choose an option below or enter your message.</p>
    
      <button class="starter-button" onclick="startWithMessage('Tell me about your services')">
        Learn about services
      </button>
    
      <button class="starter-button" onclick="startWithMessage('Tell me about pricing')">
        Learn about pricing
      </button>
    
      <button class="starter-button" onclick="startWithMessage('I would like to speak with a support representative')">
        Contact customer support
      </button>
    
      <div class="input-area">
        <input
          id="freeText"
          type="text"
          placeholder="Type your message..."
          onkeydown="handleKeyDown(event)"
        >
        <button onclick="sendFreeText()">Send</button>
      </div>
    </div>
    
    <script>
    let messagingReady = false;
    let buttonCreated = false;
    let conversationOpen = false;
    let botReady = false;
    let pendingMessage = null;
    let sending = false;
    let starterDecisionCompleted = false;
    
    /* Enhanced Web Chat API Ready */
    window.addEventListener("onEmbeddedMessagingReady", function () {
      messagingReady = true;
    
      /* Wait briefly to check whether an existing conversation is loaded */
      setTimeout(function () {
        if (starterDecisionCompleted) return;
    
        starterDecisionCompleted = true;
        document.getElementById("starterLoading").style.display = "none";
    
        if (!conversationOpen) {
          document.getElementById("starterPanel").style.display = "block";
        }
      }, 2000);
    });
    
    /* Chat Button Created */
    window.addEventListener("onEmbeddedMessagingButtonCreated", function () {
      buttonCreated = true;
    });
    
    /* Existing Conversation Loaded */
    window.addEventListener("onEmbeddedMessagingConversationOpened", function () {
      conversationOpen = true;
      starterDecisionCompleted = true;
    
      document.getElementById("starterLoading").style.display = "none";
      document.getElementById("starterPanel").style.display = "none";
    });
    
    /* First Bot Message */
    window.addEventListener("onEmbeddedMessagingFirstBotMessageSent", async function () {
      botReady = true;
    
      if (pendingMessage) {
        await sendPendingMessage();
      }
    });
    
    /* Starter Prompt */
    async function startWithMessage(message) {
      if (!messagingReady || !buttonCreated) return;
    
      pendingMessage = message;
      document.getElementById("starterPanel").style.display = "none";
    
      try {
        await embeddedservice_bootstrap.utilAPI.launchChat();
    
        /* Send immediately if the bot is already ready */
        if (botReady) {
          await sendPendingMessage();
        }
      } catch (error) {
        console.error("Unable to launch chat:", error);
        pendingMessage = null;
        document.getElementById("starterPanel").style.display = "block";
      }
    }
    
    /* Send Pending Message */
    async function sendPendingMessage() {
      if (!pendingMessage || sending) return;
    
      sending = true;
      const message = pendingMessage;
    
      try {
        await embeddedservice_bootstrap.utilAPI.sendTextMessage(message);
        pendingMessage = null;
      } catch (error) {
        console.error("Unable to send message:", error);
      } finally {
        sending = false;
      }
    }
    
    /* Free Text */
    function sendFreeText() {
      const input = document.getElementById("freeText");
      const message = input.value.trim();
    
      if (!message) return;
    
      startWithMessage(message);
    }
    
    /* Prevent Enter from sending a message while using an IME */
    function handleKeyDown(event) {
      if (event.key === "Enter" && !event.isComposing) {
        event.preventDefault();
        sendFreeText();
      }
    }
    
    /* Enhanced Web Chat Initialization */
    function initEmbeddedMessaging() {
      try {
        embeddedservice_bootstrap.settings.language = "en_US";
    
        /* Hide the standard Salesforce chat launcher */
        embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
    
        /* Replace the following values with your own deployment settings */
        embeddedservice_bootstrap.init(
          "YOUR_ORG_ID",
          "YOUR_DEPLOYMENT_NAME",
          "YOUR_ESW_URL",
          {
            scrt2URL: "YOUR_SCRT2_URL"
          }
        );
      } catch (error) {
        console.error("Embedded Messaging initialization failed:", error);
      }
    }
    </script>
    
    <!-- Replace with the bootstrap URL from your deployment -->
    <script
      type="text/javascript"
      src="YOUR_ESW_URL/assets/js/bootstrap.min.js"
      onload="initEmbeddedMessaging()"
    ></script>
    
    </body>
    </html>

    倉曎する必芁があるのは䞻に以䞋です。

    • YOUR_ORG_ID

    • YOUR_DEPLOYMENT_NAME

    • YOUR_ESW_URL

    • YOUR_SCRT2_URL

    Agentforce の埋め蟌み甚のコヌドが取埗できたら、䞊のサンプルコヌドに適甚するように生成 AI に䟝頌すれば簡単に適甚しおくれたす。


    このサンプルコヌドで行っおいるこず

    コヌド党䜓を芋るず少し長く感じたすが、実際の凊理はシンプルです。

    最初に、

    hideChatButtonOnLoad = true

    で Salesforce 暙準 Launcher を非衚瀺にしたす。

    その埌、

    onEmbeddedMessagingReady

    で Enhanced Web Chat API が準備されたこずを確認したす。

    既存 Conversation がロヌドされた堎合は、

    onEmbeddedMessagingConversationOpened

    によっお独自のスタヌタヌプロンプトを非衚瀺にしたす。

    既存 Conversation が確認できなかった堎合は、2 秒埌にスタヌタヌプロンプトを衚瀺したす。

    ナヌザヌがスタヌタヌプロンプトをクリックするず、

    launchChat()

    で Enhanced Web Chat を開きたす。

    そしお、

    onEmbeddedMessagingFirstBotMessageSent

    を埅っお、

    sendTextMessage()

    で遞択された内容を Agentforce ぞ送りたす。

    ぀たり党䜓ずしおは、

    Webペヌゞを開く
    ↓
    Enhanced Web Chat Ready
    ↓
    既存Conversation確認
    ↓
    独自Starter衚瀺
    ↓
    ナヌザヌが遞択
    ↓
    launchChat()
    ↓
    Agentforceが参加
    ↓
    FirstBotMessageSent
    ↓
    sendTextMessage()
    ↓
    Agentforceずの䌚話開始

    ずいう構成です。


    スタヌタヌプロンプトの内容は自由に倉曎可胜

    今回のサンプルでは、

    <button
      onclick="startWithMessage('料金に぀いお教えおください')"
    >
      料金に぀いお知りたい
    </button>

    ずしおいたす。

    そのため、衚瀺する文字ず Agentforce ぞ送る文字を分けるこずもできたす。

    䟋えば、

    <button
      onclick="startWithMessage('補品Aの料金䜓系に぀いお教えおください')"
    >
      料金に぀いお知りたい
    </button>

    ずすれば、ナヌザヌには、

    料金に぀いお知りたい

    ずだけ衚瀺しながら、Agentforce には、

    補品 A の料金䜓系に぀いお教えおください

    ずいう、より具䜓的なメッセヌゞを送信できたす。

    この仕組みを利甚すれば、Web サむト偎の導線ず Agentforce 偎の Topic や Instruction を組み合わせた蚭蚈も可胜になりたす。


    Enhanced Web Chat v2 であるこずを確認

    今回利甚しおいる sendTextMessage() は、Enhanced Web Chat v2 の Context Events で提䟛されおいる API です。

    そのため、このサンプルをそのたた利甚する堎合は、察象 Deployment がEnhanced Web Chat v2 であるこずを確認しおください。

    たた、今回の怜蚌では Developer Tools から、

    embeddedservice_bootstrap.utilAPI

    を確認するこずが、トラブルシュヌティングで非垞に圹立ちたした。

    䟋えば、

    typeof embeddedservice_bootstrap
      .utilAPI
      .sendTextMessage

    を実行しお、

    function

    ずなれば、その Runtime で sendTextMessage() が利甚可胜であるこずを確認できたす。


    いかがでしたでしょうか。

    今回の怜蚌で最も倧きかった発芋は、独自のスタヌタヌプロンプト付き開始画面を䜜るために、Agentforce自䜓を改修する必芁はなかったずいうこずです。

    今回䜜りたかったものは、

    Agentforce の Conversation UI を倉曎する

    ものではなく、

    Agentforce ずの Conversation が始たる前の
    Web サむト䞊の䜓隓を倉曎する

    ものでした。

    そのため、

    Web サむト
    ↓
    独自 Starter UI
    ↓
    Enhanced Web Chat API
    ↓
    Agentforce

    ずいう構成で実珟できたす。

    たた、実装しおみるず、

    launchChat()

    を実行した盎埌に、

    sendTextMessage()

    を実行するだけでは安定したせんでした。

    そこで、

    • onEmbeddedMessagingReady

    • onEmbeddedMessagingButtonCreated

    • onEmbeddedMessagingConversationOpened

    • onEmbeddedMessagingFirstBotMessageSent

    ずいった Salesforce の暙準むベントを利甚しお、Enhanced Web Chat やAgentforce の状態に合わせお凊理を進める構成にしたした。

    特に、

    䜕秒埅っおから次の凊理をするか

    ではなく、

    必芁な状態になったこずを
    Salesforce のむベントで確認しおから次ぞ進む

    ずいう考え方が重芁です。

    䟋倖ずしお、Salesforce には「既存 Conversation が存圚しない」こずを通知するむベントがないため、独自 Starter を最初に衚瀺するかどうかの刀定にだけ短い Fallback Timer を利甚しおいたす。

    Agentforce の開始画面を独自にしたいずいう芁件があった堎合、

    • 「Agentforce をどう改修するか」だけではなく

    • 「Web サむト偎から Enhanced Web Chat API を利甚できないか」

    ずいう芳点で考えおみるず、実装方法が芋぀かるかもしれたせん。

    この内容は、私がこの仕組みを䜜ろうずしたずきに、どこを調べおも情報が埗られなかったため、蚘録甚にメモずしお残しおおきたす。

    今回は以䞊です。


    次の蚘事はこちら

    前回の蚘事はこちら

    私の note のトップペヌゞはこちら

     
     
     
    Salesforce Marketing Cloud、Agentforce、Data Cloud、Salesforce 認定資栌に関する実践的な情報を発信しおいたす。これらの蚘事が、皆さたの孊習や日々の業務に少しでもお圹に立おば幞いです。