#!/usr/bin/env bash # This script is used at build time to generate a page with # config info and an HTML snippet showing how to load the # chatbot UI as an iframe # This is called from the main Makefile used by CodeBuild if [ -z "${IFRAME_SNIPPET_FILE}" ]; then echo "[ERROR] IFRAME_SNIPPET_FILE environment variable not defined" >&2 exit 1 fi if [ -z "${CLOUDFRONT_DOMAIN}" ]; then echo "[WARN] CLOUDFRONT_DOMAIN environment variable not defined" >&2 WEBAPP_URL='' else WEBAPP_URL="https://${CLOUDFRONT_DOMAIN}" fi [ -z "${PARENT_ORIGIN}" ] && \ echo "[WARN] PARENT_ORIGIN environment variable not defined" >&2 cat < ${IFRAME_SNIPPET_FILE} Lex Web UI Iframe Snippet

Lex Web UI Iframe Snippet

Include the snippet listed below in your web page to embed the chatbot UI. The snippet loads the chatbot UI as an iframe using the config shown in the JSON File Config section below. The Origin Configuration section below shows the values of the iframe URL and parent origin set in the config.

Snippet

<script src="${WEBAPP_URL}/lex-web-ui-loader.min.js"></script>
<script>
  var loaderOpts = {
    baseUrl: '${WEBAPP_URL}/',
    shouldLoadMinDeps: true
  };
  var loader = new ChatBotUiLoader.IframeLoader(loaderOpts);
  var chatbotUiConfig = {
          /* Example of setting session attributes on parent page
          lex: {
            sessionAttributes: {
              userAgent: navigator.userAgent,
              QNAClientFilter: ''
            }
          }
          */
        };
  loader.load(chatbotUiConfig)
    .catch(function (error) { console.error(error); });
</script>

Origin Configuration

The values of the iframeOrigin and parentOrigin config fields determine where the iframe is loaded from and the parent origin that is authorized to load the iframe. The JSON config file is set to use the iframe with the following values:

JSON File Config

The JSON config file is fetched from: ${WEBAPP_URL}/lex-web-ui-loader-config.json . Here is its content: 



  


EOF