英文:
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 '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 ?
答案1
得分: 0
以下是已翻译的内容:
你可以编辑正在加载的<iframe />
元素以解决这个问题。以下是如何做的示例:
/* 机器人 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 <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!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论