こんにちは！
今回はAWSのAmazon Lex v2で作成したチャットボットをWebページに設置する方法を紹介します。
Lex V2でチャットボットを作成済みの状態であることを前提としています。

完成イメージ

CloudFormationテンプレートの作成

作成したチャットボットをWebページに設置する為、javascriptのコード化の必要があります。
その為、以下のAWSのブログ記事を参考に進めます。（2018年執筆の若干古いものです）

https://aws.amazon.com/jp/blogs/news/deploy-a-web-ui-for-your-chatbot/

まずは以下のURLにアクセスします。
https://github.com/aws-samples/aws-lex-web-ui

Getting Started の項にCloudFormationテンプレートを使用してチャットボットUIをデプロイするボタンがあります。

私の環境では東京リージョンのため、TokyoのLunch StackボタンをクリックするとCloud Formationのスタックの作成画面に遷移します。

進めていくとパラメータを設定するエリアがあるのですが、自分の場合、ここの設定誤りでビルドエラーが起こりハマりました。

Lex V2を使っているで、Lex V1 Bot Configuration ParametersのBotNameは空にし、BotAliasは”$LATEST”にしておく必要があるようです。

Lex V2 Bot Configuration ParametersではLexV2BotIdにLexV2のBOT IDを指定します。（以下キャプチャ参考）

LexV2BotAliasIdにはエイリアスIDを指定します。（以下キャプチャ参考）

WebAppParentOriginに許可するURLを指定します。

スタック作成が完了したら「出力」のSnippetUrlキーのURLをクリックすることで貼り付けるJavascriptコードが確認できます。

カスタマイズ

完成イメージの通りチャットボットを開いたタイミングで自動的にメニューのようなものを表示させたかったのですが、LexV2の仕様上、始めにユーザーからの入力を行わない限り対応できなそうだったため、自動で入力させること前提に「困ってます」の発話に対してカードレスポンスを返すようにしました。

参考までにLex V2の構成です。
initialUtteranceIntent .. 初期発話を受け取る為のインテント
WebsiteGeneralIssue .. Webサイトのトラブル内容を受け取るインテント
EmailSendingIssue .. Emailトラブル内容を受け取るインテント

initialUtteranceIntentでは以下のような設定しています。
・「Sample utterances」にて発話を登録。登録内容：”困ってます”

・「Closing response」でカードレスポンスを登録

このカードレスポンスで選択された値を元に他のインテントを呼び出すし後の会話に続けていくイメージです。

このインテントを発動する為にはUI側で”困ってます”を自動入力させる必要があります。
パラメータの変更で対応できそうですが、スタック作成後のS3上に作成されるjsonファイルを更新することも可能なのですが、ここを見てjavascriptコード上で指定ました。

  var loaderOpts = {
    baseUrl: 'https://xxxxxxx.cloudfront.net/',
    shouldLoadMinDeps: true
  };
  var loader = new ChatBotUiLoader.IframeLoader(loaderOpts);
  var chatbotUiConfig = {
          lex: {
			  initialText: "こんにちは！操作が不明な場合は右上の(？)ボタンを押してください。初期メニューを応答する為、初めに「困ってます」を自動入力します",
            sessionAttributes: {
              userAgent: navigator.userAgent,
              QNAClientFilter: '',
            },
      			initialUtterance: '困ってます',
          },
          ui: {
            toolbarTitle: "問い合わせ",	
            toolbarColor: "#1f4270",
            textInputPlaceholder: '入力してください',
          },
        };
loader.load(chatbotUiConfig)
.catch(function (error) { console.error(error); });