在React.js项目中部署Botpress作为一个组件。

huangapple go评论95阅读模式
英文:

Deploying Botpress in React js project as a component

问题

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 ?

英文:

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 &#39;react&#39;;
import { Container ,Row,Col} from &#39;react-bootstrap&#39;

function TestBot() {
  useEffect(() =&gt; {
    const script = document.createElement(&#39;script&#39;);
    script.src = &#39;https://cdn.botpress.cloud/webchat/v0/inject.js&#39;;
    script.async = true;
    script.onload = () =&gt; {
      window.botpressWebChat.init({
                botId: &#39;7b5b44b9...........2383c0b5c&#39;,
                clientId: &#39;7b5b44b9-..........bbb2383c0b5c&#39;,
                hostUrl: &#39;https://cdn.botpress.cloud/webchat/v0&#39;,
                messagingUrl: &#39;https://messaging.botpress.cloud&#39;,
                botName: &#39;TicketBot&#39;,
                hideWidget: true,
                disableAnimations:false,
                stylesheet: &#39;https://style-.....a.vercel.app/bot.css&#39;,
      });
                window.botpressWebChat.onEvent(() =&gt; {
                window.botpressWebChat.sendEvent({ type: &#39;show&#39; });
            }, [&#39;LIFECYCLE.LOADED&#39;]);
    }
    document.body.appendChild(script);

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

  return (
    &lt;div&gt;
      &lt;Container &gt;
        &lt;Row&gt;
          &lt;Col className=&quot;bg-light&quot; lg={9}&gt;
            &lt;div id=&quot;bp-web-widget-container&quot; /&gt;
          &lt;/Col&gt;
          &lt;Col className=&quot;bg-dark&quot; lg={3} /&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    &lt;/div&gt;
  );
}

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 ?

答案1

得分: 0

以下是已翻译的内容:

你可以编辑正在加载的&lt;iframe /&gt;元素以解决这个问题。以下是如何做的示例:

/* 机器人 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;
}

你还可以通过将这些选项添加到window.botpressWebChat.init函数来设置WebChat容器和布局的宽度为全屏,尽管这是可选的:

window.botpressWebChat.init({
 // 将WebChat容器和布局的宽度设置为100%(全屏)
 containerWidth: "100%25",
 layoutWidth: "100%25",
});

你还可以访问Botpress Webchat Customization以了解如何进一步自定义你的Webchat iframe。这里有一个带有完全功能示例的CodeSandbox

希望这对你有所帮助!

英文:

You can edit the &lt;iframe /&gt; 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: &quot;100%25&quot;,
 layoutWidth: &quot;100%25&quot;,
});

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!

huangapple
  • 本文由 发表于 2023年5月22日 23:20:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76307673.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定