Deploying the bot in a react js component

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.

Hi @nada.bouslama ,

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

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

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

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">
                <MDBCard className="bg-light justify-content-center"
                    <TestBot /> 

and this is my TestBot integration:

function TestBot() {
  useEffect(() => {
        const script = document.createElement("script");
        script.src = "";
        script.async = true;
        script.onload = () => {
          botId: '7b5b44b9...............bbb2383c0b5c',
          hostUrl: '',
          messagingUrl: '',
          clientId: '7b5b44b......................383c0b5c',
          botName: 'TicketBot',
          stylesheet: 'https://style-git................./bot.css',
          avatarUrl: "https://style-git-................../logo2.png",
          hideWidget: true,
          disableAnimations: true,
          enableConversationDeletion: true,
          containerWidth: '65%25',
          layoutWidth: '100%25',
        window.botpressWebChat.onEvent(() => {
          window.botpressWebChat.sendEvent({ type: 'show' });
        }, ['LIFECYCLE.LOADED']);
    return () => {
  }, []);
    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 :

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