I have developed chatbot and want to integrate in a website.I am following this github link that has predefined libraries for chatbotUI to embbed as an iframe. https://github.com/aws-samples/aws-lex-web-ui Below is the code from 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: '<your cognito pool id>'
},
lex: {
// Lex Bot Name in your account
botName: '<your lex bot name>'
}
};
// 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>
I went to parent.html (almost similar to the code above)inside src/website/parent.html of the github folder and made changes to the srcipt src path ,cognito poolid and lex name referring to the above code.
1)In config url inside the code above,I dont know what path to give for chatbot-ui-loader-config.json.There is no such json file inside dist directory.Should I create my own ?
2)I created an website using EC2 linux instance.I have my index file and aws-lex-web-ui (github folder) inside my var/www/html.Inside index file,I am calling the parent.html of aws-lex-web-ui folder.Is this method correct?
In output I am getting the heading content of the parent .html page .But It seems its not invoking the lex-web-ui-loader.js .I am not sure where I go wrong.
I have given a wrong path .I pointed the loader file lex-web-ui-loader.js to a correct location inside my folder and it worked.