Lex Web UI Integration with Amplify

[priyansha-ranjan]

Hi Team, We are trying to integrate the Lex Web UI with Amplify and facing the below error. We imported all the required modules but getting the below error.

ERROR in [eslint] src/component/Iframe.js Line 20:30: 'ChatBotUiLoader' is not defined no-undef

Below is the code we used for Iframe.js

import React, {Component} from 'react' export class Iframe extends Component {

componentDidMount(){

        var loaderOpts = {
    
        configUrl: './chatbot-ui-loader-config.json',
        baseUrl: 'https://******.cloudfront.net/',
        shouldLoadMinDeps: true,

    
        iframeSrcPath: './chatbot-index.html#/?lexWebUiEmbed=true'
        };
        
        var loader = new ChatBotUiLoader.IframeLoader(loaderOpts);
        var chatbotUiConfig = {
      
    };
     loader.load(chatbotUiConfig)
       .catch(function (error) { console.error(error); });

}

render(){
    return(
        <div>
            <h1> This is our chatbot </h1>
            
        </div>
        )
     }
  }  

export default Iframe