无法将 Amazon lex 集成到我的网站中

Question

我开发了一个 aws lex 聊天机器人。现在，我想使用 pre-built UI 组件库将我的网站集成到 EC2 实例上，作为已经可用的可嵌入 iframe在 github.This 中是它的 link：https://github.com/aws-samples/aws-lex-web-ui#iframe。下面是来自 github 的 iframe 的代码：

<html>
  <head>
    <title>My Parent Page</title>
  </head>
  <body>
    <h1>Welcome to my parent page</h1>
    <!-- loader script -->
    <script src="./lex-web-ui-loader.js"></script>
    <script>
      /*
        The loader library creates a global object named ChatBotUiLoader
        It includes the IframeLoader constructor
        An instance of IframeLoader has the load function which kicks off
        the load process
      */

      // options for the loader constructor
      var loaderOptions = {
        // you can put the chatbot UI config in a JSON file
        configUrl: './chatbot-ui-loader-config.json',

        // the full page chatbot UI that will be iframed
        iframeSrcPath: './chatbot-index.html#/?lexWebUiEmbed=true'
      };

      // The following statement instantiates the IframeLoader
      var iframeLoader = new ChatBotUiLoader.IframeLoader(loaderOptions);

      // chatbot UI config
      // The loader can also obtain these values from other sources such
      // as a JSON file or events. The configUrl variable in the
      // loaderOptions above can be used to put these config values in a file
      // instead of explicitly passing it as an argument.
      var chatbotUiConfig = {
        ui: {
          // origin of the parent site where you are including the chatbot UI
          // set to window.location.origin since hosting on same site
          parentOrigin: window.location.origin,
        },
        iframe: {
          // origin hosting the HTML file that will be embedded in the iframe
          // set to window.location.origin since hosting on same site
          iframeOrigin: window.location.origin,
        },
        cognito: {
          // Your Cognito Pool Id - this is required to provide AWS credentials
          poolId: xxx
        },
        lex: {
          // Lex Bot Name in your account
          botName: yyy
        }
      };

      // Call the load function which returns a promise that is resolved
      // once the component is loaded or is rejected if there is an error
      iframeLoader.load(chatbotUiConfig)
        .then(function () {
          console.log('iframe loaded');
        })
        .catch(function (err) {
          console.error(err);
        });
    </script>
  </body>
</html>

当我集成此代码并托管我的网站时，我只能看到“欢迎来到我的父页面”。我看不到我的 lex 组件 here.I 放置了我的 index.html 和 lex -web-ui 文件夹与两个单独的文件夹在同一目录中 files.Should 我更改了我的脚本 src 位置？我不确定我哪里错了

样本：

cd /var/www/html    
ls
index.html lex-web-ui(github folder)

Answer 1

问题在于此内联 javascript（在您的 html 文件中）需要 loader.js 文件才能运行它正在调用的一些函数。

<!-- loader script -->
<script src="./lex-web-ui-loader.js"></script>

此处的这一行告诉 html 文件在哪里可以找到 javascript 加载程序文件。文件名前的 ./ 表示该文件应与此 html 文件位于同一父文件夹中。

所以你有两个选择，都很简单：
要么
(1) 更改代码以指向实际存放 js 加载程序文件的文件夹。
或
(2) 将 html 文件移动到与 js 加载程序文件相同的父文件夹中。

对于第一个选项，只需将 ./ 更改为 ./lex-web-ui/

<!-- loader script -->
<script src="./lex-web-ui/lex-web-ui-loader.js"></script>

对于第二个选项，您可以随意移动文件和文件夹，只需确保 .html 文件与 loader.js 文件位于同一文件夹中即可。这样您就不需要更改任何代码。

[www]
  |
  |--[html]
       |
       |--[lex-web-ui]
              |
              |--lex-web-ui-loader.js
              |--index.html
              |--(other lex-web-ui files)

注意：做一个或另一个，不要两个都做。

无法将 Amazon lex 集成到我的网站中

Not able to integrate Amazon lex into my website

amazon-web-services

amazon-lex