Deploying Botpress in React js project as a component

Question

I'm trying to integrate botpress bot that i've trained as a component in react js project and not to always appear on the right side of the screen as a second layer!.

here is my code for the deployement:

import React, { useEffect } from 'react';
import { Container ,Row,Col} from 'react-bootstrap'

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...........2383c0b5c',
                clientId: '7b5b44b9-..........bbb2383c0b5c',
                hostUrl: 'https://cdn.botpress.cloud/webchat/v0',
                messagingUrl: 'https://messaging.botpress.cloud',
                botName: 'TicketBot',
                hideWidget: true,
                disableAnimations:false,
                stylesheet: 'https://style-.....a.vercel.app/bot.css',
      });
                window.botpressWebChat.onEvent(() => {
                window.botpressWebChat.sendEvent({ type: 'show' });
            }, ['LIFECYCLE.LOADED']);
    }
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div>
      <Container >
        <Row>
          <Col className="bg-light" lg={9}>
            <div id="bp-web-widget-container" />
          </Col>
          <Col className="bg-dark" lg={3} />
        </Row>
      </Container>
    </div>
  );
}

export default TestBot;

when i inspect the code i see this : inspected code the chatbot still appears as an individual second layer screen as shown in the picture : enter image description here, could anyone help me with this please ?

Answer 1

You can edit the <iframe /> element that the script is loading to fix this issue. Here's an example of how you can do it:

/* Bot iframe */
#bp-web-widget-container {
  width: 100%;
}
#bp-web-widget-container .bp-widget-web {
  width: 100%;
  position: relative !important;
  margin: 0 auto;
  height: 90vh !important;
}

You can also set the width of the WebChat container and layout to Full Screen by adding these options to the window.botpressWebChat.init function, although is optional:

window.botpressWebChat.init({
 // Set the width of the WebChat container and layout to 100% (Full Screen)
 containerWidth: "100%25",
 layoutWidth: "100%25",
});

You can also visit Botpress Webchat Customization to learn more about how to further customize your webchat iframe. Here's a CodeSandbox with a fully functional example.

Hope this helps!