Not able to integrate Amazon lex into my website

I have developed a aws lex chatbot .Now ,I want to integrate in my website on EC2 instance using pre-built UI component libraries as an embeddable iframe that is already available in github.This is the link to it: https://github.com/aws-samples/aws-lex-web-ui#iframe.Below is the code for the iframe from the github:

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

When I integrated this code and hosted my website,I could just see "Welcome to my parent page".I am not able to see my lex components here.I placed my index.html and lex-web-ui folder in same directory as two seperate files.Should I change my script src location?I am not sure where I am wrong

Sample:

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

Solution

The problem is that this inline javascript (in your html file) requires the loader.js file to run some of the functions it is calling.

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

This line right here is telling the html file where to find that javascript loader file. The ./ before the file name means that the file should be in the same parent folder as this html file.

So you have a couple choices, both very simple:
Either
(1) change the code to point to the folder actually holding the js loader file.
or
(2) move the html file into the same parent folder as the js loader file.

For the first option, just change the ./ to ./lex-web-ui/

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

For the second option, you can move around the files and folders however you'd like, just make sure that the .html file is in the same folder as the loader.js file. This way you don't need to change any code.

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

Note: Do one OR the other, do not do both.