Fatal编程技术网

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

amazon-web-services

Amazon web services 无法将Amazon lex集成到我的网站中,amazon-web-services,amazon-lex,Amazon Web Services,Amazon Lex,我已经开发了一个aws lex chatbot。现在，我想使用预构建的UI组件库作为github中已有的可嵌入iframe集成到我的网站EC2实例中。这是指向它的链接：。下面是github中iframe的代码： <html> <head> <title>My Parent Page</title> </head> <body> <h1>Welcome to my parent page

我已经开发了一个aws lex chatbot。现在，我想使用预构建的UI组件库作为github中已有的可嵌入iframe集成到我的网站EC2实例中。这是指向它的链接：。下面是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>
问题是这个内联javascript（在html文件中）需要loader.js文件来运行它调用的一些函数

<!-- loader script -->
<script src="./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)
注意：做一个或另一个，不要两个都做。

你有加载程序（
lexwebuiloader.js
）在与此html文件相同的父文件夹中？是的。我已将github lex web ui文件夹移动到我的index.html文件夹中。我是否应更改路径？我已对您提到的内容进行了更改。我仍然欢迎访问我的父页面。我是否应创建上述代码中给出的chatbot-ui-loader-config.json？我在github中找不到此类文件目录。再次查看github，您是否复制了“dist”文件夹中的所有文件？这是一个有你需要的，而不是“lexwebui”文件夹。谢谢。这个建议很有用，我已经把它整合到我的网站上了。你能给我提供一些关于这个链接的建议吗？ 
<!-- loader script -->
<script src="./lex-web-ui/lex-web-ui-loader.js"></script>

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