20.6デモWebサイトでのchatbotのテスト

Stackchatの Web Messengerウィジェット を使用すると、LumaボットをLumaデモサイトに追加できます。 この節では、Stackchat Studioで統合を設定し、Webサイトプロジェクトを構築し、JavaScriptをLumaデモサイトに追加してリアルタイムWebチャットを有効にします。

  • 最新バージョンの Node.jsがインストールされています 。 Node v12以上を実行していることを確認してください
  • 最新バージョンの Github for Desktop (またはGitコマンドラインツールをご希望の場合はご自由に使用できます)
  • AWS S3アカウント(または選択した別のホスティングソリューション)でLuma Bot javascriptをホストする

20.6.1 Webメッセンジャーの設定

Stackchatにログインした後、 Stackchatに移動して左側のメニューの「ボット」に移動し、ルーマボットを選択して、ボットメニューの「 統合 」ボタンをクリックします。 次に、Stackchat Web Messengerの 管理 ボタンをクリックします。

web_messenger_integration

これが見える。 「 デフォルトのアバターURL 」フィールドの入力の横にある「 ​+」ボタンをクリックします。

web_messenger_integration

最初に、次の画像をコンピューターにダウンロードします。

Adobe_AEP_logo

次に、Stackchat Studioのポップアップウィンドウにアップロードします。

Adobe_AEP_logo

最後に、「 アップロード」をクリックします。

Adobe_AEP_logo

「ボタンアイコンのURL」フィールドにも同じ操作を行います(または、前のフィールドから新しいURLをコピーして貼り付けるだけです)。 他のフィールドはそのままにしておきます。

web_messenger_integration

ブランド 」タブを選択し、「ビジネスアイコンのURL」フィールドに同じ画像をアップロードします(または、前のフィールドからURLをコピーして貼り付けるだけです)。

「ブランドの色」フィールドと「会話の色」フィールドには、値 F3793B​を使用します。 「Action Color」フィールドには、値26A9E0 を使用します

これで、次の処理が完了します。

ui_messenger_brand-crunch2

初期応答 」タブを選択し、最初のメッセージフィールドに次のテキストを追加します。

開始する準備はできていますか?

次に、最初のクイック返信フィールドに次のテキストを追加します。行くぞ!🚀

興味がある場合は、ボットビルダを開き、CDMLを編集して、「 Let's go!」というキーワードの検索を実行します。 🚀. スタートアップフローで、キーワードとして設定されているこ とが確認できます 。 ここで、ルミナンスボットは、ユーザーがこのクイック返信を選択した場合にユーザーをナビゲートします。

統合を更新 」をクリックして変更を保存します。

web_messenger_integration

保存が完了したら、Web Messengerウィジェットを開き、表示されるルーマブランドをプレビューします。

web_messenger_integration

ただし、「 初回のあいさつ文 」タブで設定したクイック返信は表示されません。 これは、新しいユーザーにのみ表示されるためです。

テストアウトするには、ボットメニューの「 概要 」ボタンをクリックし、右上の「 共有 」ボタンをクリックします。

web_messenger_integration

「リンクを コピー 」ボタンをクリックします。

web_messenger_integration

次に、新しい匿名ウィンドウを開き、コピーしたURLを貼り付けます。

web_messenger_integration

これで、クイック返信の最初のあいさつ文が表示されます。 クリックすると、Luma Botによって ようこそ フローが表示されます。

web_messenger_integration

これで、WebメッセンジャーをLumaデモサイトに埋め込む準備ができました。

20.6.2 追加 the Web Messenger to your demo site(デモサイトへのWeb Messengerの使用)

Visual Studioコードエディターに戻ります。

を開き、に移動し ます。/web-messenger folder.

vs-web-messanger-folder.png

ターミナル(表示->ターミナル)を開きます。

デモ

コマンド cd web-messenger を入力し、 enterを押します

デモ

プロジェクトの依存関係をインストールするには、 npm iコマンドを実行します

デモ

プロジェクトの src フォルダーを確認します。 次に、2つのフォルダーの分類を示します。

  • luma-api:デモAPIからLumaブランド情報を取得するロジック
  • messenger:web messengerをインスタンス化してカスタマイズするロジック

デモ

プロジェクトを構築してテストする前に、設定をボットのApp Idで更新する必要があります。

Stackchat Studioに移動し、Luma Botに移動して、 ボットメニューの「統合 ​」をクリックします。 Web Messengerの[ 管理 ]ボタンをクリックします。

デモ

Web Messenger画面で、アプリIDをコピーします。

デモ

次に、Visual Studioコードに戻り、configファイルを開きます。 src/messenger/config.ts 、4行目のconfigオブジェクトにApp ID値を追加し、 文字列(引用符内など)であることを確認します

appId: null, // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

この例では、アプリIDは「ctduc8z4hn6x03」 なので、更新された4行目は次のようになります

appId: "ctduc8z4hn6x03", // Replace this null value with your Luma bot's App Id! e.g "k9s9xxxxxx"

デモ

設定ファイルに変更を保存します。 これで、プロジェクトを構築してテストする準備が整いました。 ターミナル(表示->ターミナル)を起動し、ビルドコマンドを実行します。

npm run build

このコマンドは、Webpackを実行します。Webpackは、TypeScriptプロジェクトを、ブラウザと互換性のある単一のJavaScriptファイルにコンパイルするように設定されています。
ビルドは正常に完了します。

デモ

これで、プロジェクトに dist フォルダがWebpackで生成されます。 このファイルには、 bundle.jsというファイルが含まれます。 このファイルにデモWebサイトからアクセスできるように、次の手順でホストする必要があります。

20.6.3 JavaScriptファイルのホスト

Luma Botをデモサイトに掲載するには、 bundle.js ファイルをどこかでホストし、それを公開してアクセス可能にする必要があります。 Exersime 5.1:AWS S3バケットのセットアップ 🔗 :AWSで利用できるAWSバケットを既に設定済みです。

AWS S3アカウントにログインします。 https://console.aws.amazon.com/s3. このファイルを公開して使用可能にする必要があるので、新しいバケットを作成します。 「グループを 作成」をクリックします。

デモ

バケットに「aepmodule20LDAP 」という名前を付けます(例:aepmodule20vangeluw )。自分に適した領域を選択します。

デモ

下にスクロールして、[パブリックアクセスの ブロック]の[グループ設定]が表示されるまで下にスクロールします。

  • [すべてのパブリックアクセスを ブロックする]チェックボックスをオフにします
  • [ 現在の設定に同意する]のチェックボックスをオンにします。

同じような表示が必要になります。

デモ

  • 次へ 」を再度クリックし、 ​名前と地域の設定をそのままにします。
  • [ 設定オプション ]セクションで、[すべてのパブリックアクセスを ブロック]をオフにします。 これにより、このバケット内の項目に対して何かを確認する確認文が表示され、非公開でアクセスできる場合があります。 確認するボックスをチェックして、「 次へ」をクリックします

s3_bucket-setpermissions

下にスクロールし、「 バケットを作成」をクリックします。

新しいバケットが作成されたら、そのバケットをクリックして開きます。

デモ

これが見える。

デモ

アップロード」をクリックします。次の図が表示されます。

s3_bundlefile-review

ファイル​追加」をクリックし、 bundle.js ファイルに移動して選択します。

s3_bundlefile-overview

これが見えます 「 宛先 」フィールド上で下にスクロールし、同じ名前の既存のオブジェクトが上書きされることを確認する 場合は、チェックボックスをオンにします

デモ

下にスクロールし、「 アップロード」をクリックします。

デモ

これが見える。 ファイル名 bundle.jsをクリックします

デモ

これで、 オブジェクトURLを含むファイルの概要の詳細を表示できるようになります。 このURLは、次の手順で必要になるのでコピーしてください。 「公開 する 」ボタンをクリックします。

s3_bundlefile-overviewdetails

これで、 bundle.js ファイルが正常にホストされました。 次の手順では、 オブジェクトURLを「設定IDを 更新 ​」画面に貼り付けます。

20.6.4デモサイト設定IDの更新

デモサイトでLuma Chatbotを読み込むには、デモWebサイトの設定IDを更新して、以下を含める必要があります。

新しい、クリーンな匿名ウィンドウでhttps://public.aepdemo.net/admin_configuration_update.html 🔗 ページに移動します。 次の図が表示されます。

デモ

設定IDを入力し、「 Load Configuration 」ボタンを押します。 その後、次の手順を実行します。

デモ

[ EventID - Stackchat Jeurney ]と[ Stackchat Chatbot Tag]の各フィールドが表示されるまで下にスクロールします。

デモ

EventID - Stackchat Jerney 値(空)を、 演習20.4.1で作成したオーケストレーションイベントIDに置き換え、現在の Stackchat Chat Tag ​値を、AWS S3オブジェクトであるホストファイルbundle.jsのObjectURLに置き換えます。前の手順で作成したURL。

デモ

下にスクロールし、「 Update Configuration ID 」ボタンをクリックします。 テストの準備ができました!

デモ

20.6.5デモシナリオの実行

Go to https://public.aepdemo.net/. 設定IDを入力し、「設定を読み込み」をクリックします。 次に、LDAPを選択し、ブランドを選択します。 ブランド Lumaを選択します

その後、Lumaのホームページに到達すると、chatbotが読み込まれ、アイコンが画面の右下部に表示されます。

デモ

まず、「 ログイン/登録」に移動し、個人情報を入力して、新しいアカウントを作成します。

デモ

次に、チャットボットが誘い文句(CTA:コールトゥアクション)の名を使用していることがわかります。

デモ

これを行うには、helper.tsファイルの beforeSend delegate内のメッセージメタデータにユーザ情報を添付します。これにより、chatbotが既に知っている情報を求める必要がなくなります。 メッ セージのメタデータについて詳しくは、こちらを参照してください

チャットウィジェットを開き、 「行きましょう!」をクリックします。

デモ

これが見える。 次に、「アイデア が必要 」メニュー項目を選択します。

デモ

次に、チャットボット内にルマ製品が表示されます。

デモ

次に、いくつかの商品❤️のボタンを押して、閲覧された商品のイベントを生成し、Journey Orchestrationでの遍歴をトリガーします。

デモ

数秒後、Adobe Experience PlatformとJourney Orchestrationから、今好きな商品のプロモーションを受け取った電子メールが届きます。

デモ

chatbotの次の質問は、チャット体験に関するフィードバックをお寄せいただけるかどうかです。 「 はい」をクリックします。

デモ

選択を行う場合、この場合は選択肢は 最高

デモ

幸せに」をクリックして

デモ

詳細なフィードバックを追加し、「 送信」をクリックします。

デモ

最後に、X線パネルを開き、更新ボタンをクリックします。 その後、製品の表示がX線パネルに表示されます。

デモ

Webメッセンジャーのチャットボットが正常に動作するようになりました。 Facebook Messengerにチャットボットを接続します。

次の手順: 20.7 Facebook Messengerにチャットボットを接続する

モジュール20に戻る

すべてのモジュールに戻る

このページ