How to style or set height of the iframe

Ask the Community
,
1

dear all, I am having an issue with the size of iframe which is injected by the botpress webchat. I have the bot made in botpress studio, and I am integrating it with my website through webchat. But right now the main problem is that I am not able to change the height of the iframe. its 76px by default. due to which If I make the chatbot button a little larger, it gets chopped off due to the iframe. If any one can help me with this.

2

hello, this is how i did that :
i created a css file in my project and did those changements :
#bp-web-widget-container {
width:70%;
}
#bp-web-widget-container .bp-widget-web {
position:absolute !important;
top:8.7rem;
left:6.55rem;
bottom:50px;
height: 78vh !important;
}
besides adding those 2 Customization Variables
containerWidth: ‘65%25’,
layoutWidth: ‘100%25’,

this changed the position of the frame i wanted it to be more in the center of the page , but u could change the top , left and bottom values of course.

3

yes, I tried your method, copied the code but still not working for me.
this is the code which is being injected to the iframe from botpree cloud itself I guess.
.bp-widget-widget {
bottom: 24px;
height: 76px!important;
left: auto;
right: 36px;
top: auto;
width: 76px!important;
}

I need to modify this height here, nothing seems to work. due to so less height, and due to my footer component, I have to make the chatbot button smaller. there was a className property in the init() method also for iframe, will that give me a solution? I tried that aslo but not working.