Deploying the bot in a react js component

Ask the Community
1

i’m trying to change the position of the bot, don’t want it to appear on the right side of the screen but instead i want it to be the child of a component in react js. is that even possible ? i’ve done so many tries changing it’s css but it’s in vain.

2

Hi @nada.bouslama ,

Can you paste your embedding code here after removing the sensitive data?

3

okey , so in the homepage i have a Chat Component as shown in the code :
this is homepage :

function Home() {
  return (
   <div>
          <Nav/>
            <Container fluid className="bg-light pt-2">
              <Row>
                <Col className="py-2" lg={9}  > <Chat/> </Col>
                <Col className="py-2" lg={3}  > <PersonalInfo /></Col>
              </Row>
           </Container>
           <Footer/>
    </div>
  )
}.

this is my Chat Component that has the Botpress Component , i called it TestBot

function Chat() {
  return (
      <div style={Chatstyle.Container}>
            <MDBRow className="d-flex justify-content-center">
              <MDBCol>
                <MDBCard className="bg-light justify-content-center"
                    <TestBot /> 
                </MDBCard> 
              </MDBCol>
            </MDBRow>
      </div>
  )
}.

and this is my TestBot integration:

function TestBot() {
  useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://cdn.botpress.cloud/webchat/v0/inject.js";
        script.async = true;
        script.onload = () => {
          window.botpressWebChat.init({
          botId: '7b5b44b9...............bbb2383c0b5c',
          hostUrl: 'https://cdn.botpress.cloud/webchat/v0',
          messagingUrl: 'https://messaging.botpress.cloud',
          clientId: '7b5b44b......................383c0b5c',
          botName: 'TicketBot',
          stylesheet: 'https://style-git................./bot.css',
          avatarUrl: "https://style-git-................../logo2.png",
          hideWidget: true,
          disableAnimations: true,
          showCloseButton:false,
          enableConversationDeletion: true,
          containerWidth: '65%25',
          layoutWidth: '100%25',
        });
        window.botpressWebChat.onEvent(() => {
          window.botpressWebChat.sendEvent({ type: 'show' });
        }, ['LIFECYCLE.LOADED']);
      }
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);
    return null;
}

. if you see the homepage you will understand well how i want to integrate botpress in my project. i don’t want it to appear as a second layer on the screen , i want it to take the height and width of it’s container, but it always appear on top of my homepage
when i inspect the code this is what i get :

sc
sc1053×673 13.9 KB

why are there 2 divs with the same id ?
please help with this.