代码之家  ›  专栏  ›  技术社区  ›  lakshmi

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

  •  0
  • lakshmi  · 技术社区  · 6 年前

    我已经开发了一个aws lex chatbot。现在,我想在我的网站上集成EC2实例,使用预构建的UI组件库作为可嵌入的iframe,该iframe已在github中提供。以下是指向它的链接: 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>
    

    cd /var/www/html    
    ls
    index.html lex-web-ui(github folder)
    
    0 回复  |  直到 6 年前
        1
  •  1
  •   Jay A. Little    6 年前

    问题是这个内联javascript(在html文件中)需要loader.js文件来运行它调用的一些函数。

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

    ./ 文件名之前表示该文件应与此html文件位于同一父文件夹中。


    所以你有两个选择,都很简单:
    任何一个
    (1) 更改代码以指向实际保存js加载程序文件的文件夹。

    (2) 将html文件移动到与js加载程序文件相同的父文件夹中。


    对于第一个选项,只需更改 ./ 到 ./lex-web-ui/

    <!-- 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)
    

    注意:做一个或另一个,不要同时做两个。