hello, i’m currently using the free version of botpress studio, i’m trying to deploy my bot in fullscreen mode in my react js project, the docs here indicating that i need bot id and client id, i could not find those anywhere even in the settings area ! is it even possible to deploy the bot in fullscreen mode ?
please help me with that and thanks.
Hi @nada.bouslama ,
You can find more info here: Overview | Botpress Documentation
In the webchat, you can get the needed info by clicking on the “Configurable” tab in the webchat configuration screen.
You can also use the pre-configured script from the “Embedded” section:
1 Like
thank you for replying, i am currently working on a react js project, i want to deploy the botpress bot inside of a component and not to appear on the right side of the screen. is that possible ? , here is a snippet of Chat component :
function Chat() {
return (
and this is my BotpressEmbed code :
const BotpressEmbed = () => {
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: ‘7b5b…c0b5c’,
clientId: ‘7b5…0b5c’,
hostUrl: ‘https://cdn.botpress.cloud/webchat/v0’,
messagingUrl: ‘https://messaging.botpress.cloud’,
botName: ‘TicketBot’,
containerWidth: “700px”,
layoutWidth: ‘700px’,
hideWidget: true,
disableAnimations: true,
stylesheet: ‘https://style-…vercel.app/bot.css’,
showTimestamp: true,
showCloseButton: false,
enableConversationDeletion: true,
});
window.botpressWebChat.onEvent(() => {
window.botpressWebChat.sendEvent({ type: 'show' });
}, ['LIFECYCLE.LOADED']);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return <div id="botpress-container"></div>;
};
, but the bot stills appear on the right side of the screen , do you have a suggestion on how to make it appear only inside of the Chat component please ? and thank you
layoutWidth: “100%25”,
containerWidth: “100%25”
Use this, it will open the bot in full screen.
But in my case i have to integrate the bot on react native expo app, If anybody has done that please let me know.
And if I am loading the script on web and then on react native it is showing the bot zoomed in, don’t know why…
thanks , for me i wanted to manipulate the bot as a component , i can change it’s position, use hooks and props on it, but it’s not the case , it always show as an individual app , like a second layer on the screen.
I am able to open the chatbot on mobile perfectly,
Can you just clear my doubt that if we can open the bot from specific node or from specific point in our flow that we created?
Hey Nada,
I saw you have another post about this, so I will reply there.