Adding as an iFrame to a local running web app.

[sterankin]

Ok lets start again as i am taking a different approach.

1. Download project. Unzip.
2. cd into aws-lex-web-ui-master/src and run npm install, then npm start

All good at this point, I can hit localhost:8000 and see the order flowers full screen chat site.

Next, I want to embed it in an iFrame in my existing site locally, my site is a rails app and runs on localhost:3000. On the home/index.html page, I add the following near the bottom:

<!--
Add a script tag pointing to the loader library towards the bottom
of the html BODY section

The library and its dependencies can be hosted on another site,
S3 bucket or a CDN (e.g. CloudFront)

This script creates a global variable named ChatbotUiLoader which
provides the loader library functionality
-->
<script src="http://localhost:8000/lex-web-ui-loader.js">
</script>

<!--
After the loader script tag has been included, you can use it to
load the chatbot UI in an iframe
-->
<script>
// Point the baseUrl to download the dependencies from the site hosting
// the loader and the chatbot UI files
// This url should host the JavaScript and CSS files in the dist directory
var loaderOpts = {
  baseUrl: 'http://localhost:8000/'
}
// ChatBotUiLoader contains the IframeLoader constructor
// Instantiate the loader and pass the loader options
var lexWebUiLoader = new ChatBotUiLoader.IframeLoader(loaderOpts);

// You can override the chatbot UI config by passing a parameter
// if the iframe page is hosted on a different site,
// you should configure the parentOrigin and iframeOrigin
var chatbotUiconfig = {
  ui: {
    // origin of the parent site where you are including the chatbot UI
    parentOrigin: 'http://localhost:3000'
  },
  iframe: {
    // origin hosting the HTML file that will be embedded in the iframe
    iframeOrigin: 'http://localhost:8000'
  }
};

// load the iframe
lexWebUiLoader.load(chatbotUiconfig)
  .catch(function (error) {
    console.error('chatbot UI failed to load', error);
  });
</script>

Note the parentOrigin and iframeOrigin which is supposed to help with cors? I still get this error in the console:

Access to XMLHttpRequest at 'http://localhost:8000/lex-web-ui-loader-config.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
index:474 chatbot UI failed to load Error: error getting chatbot UI config from url: http://localhost:8000/./lex-web-ui-loader-config.json
    at XMLHttpRequest.xhr.onerror (config-loader.js:88)
(anonymous) @ index:474
Promise.catch (async)
(anonymous) @ index:473
index:581 GET http://localhost:8000/lex-web-ui-loader-config.json net::ERR_FAILED

Other questions:

1. If i want to change the bot title and intial prompt, where do I do this - the text seems to be everywhere.
2. When I am ready to plugin my own bot (and cognito id) where should I do this?

Thanks