APJ SA LEAP DAY STUDY JAM > Incorporate Chatbot > Configure Frontend

Configure Frontend

With your chatbot now created via Amazon Lex, you will now implement it to the Footer of the TravelBuddy site in this section.

Open up the Footer component file in the following directory src/components/layout/Footer.js
Insert the following code snippet between line 217 and 218 just above the end of the FooterContainer tag.

<OverlayTrigger
      trigger="click"
      placement="left-end"
      overlay={
        <Popover>
          <ChatBot
            title="TravelBuddy Chatbot"
            theme={myTheme}
            botName=<Enter name of Chatbot>
            welcomeMessage="Welcome! I am a chatbot created with AWS Lex, how can I help you today?"
            onComplete={handleComplete}
            clearOnComplete={true}
            conversationModeOn={true}
            className="chatbot-box"/>
        </Popover>
      }
>
    <Fab variant="extended" className="chatbot" position="right-bottom">
        <NavigationIcon className={classes.extendedIcon} />
        Ask Glendon{"  "}
    </Fab>
</OverlayTrigger>

Ensure that the botName parameter is the same as the name of your chatbot previously created with the AWS Amplify CLI.

test

Just like that, we have implemented our conversational chatbot built with Amazon Lex via AWS Amplify into our React web application!

chatbode