WordPress integration 100% high
# 🤝helph
high-animal-7751
10/19/2023, 11:11 AMHi I have integrated the bot on wordpress directly into the footer but why does it take 100% height and is hidden under the header? I use Divi. Can anyone help me please?
#1111009377525186570
b
bitter-magazine-8114
10/19/2023, 12:58 PMSure! Basic styling for the placement on your page exists of two things:
Copy code
/* the chat window */
.bp-widget-side{
}
/* the chat icon placement */
.bp-widget-widget{
} Copy code
/* the chat window */
.bp-widget-side{
top: auto;
bottom: 20px;
left: auto;
right: 20px;
height: 80%;
max-height: 80vh;
}bitter-magazine-8114
10/19/2023, 1:00 PMYou could use the following to make sure it's a 100% again when seen on mobile:
Copy code
@media (max-width: 767px) {
.bp-widget-side{
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
max-height: 100vh;
width: 100%;
}
}f
famous-jewelry-85388
10/19/2023, 4:12 PM@bright-magazine-792 heeeeeelp 😄
b
bright-magazine-792
10/25/2023, 5:23 PM@high-animal-7751 did it work?
how's it going?
a
alert-napkin-63613
03/02/2024, 5:48 PMI'm having the same issue when tested using the html source saved from a WordPress page. Firefox Inspector shows class bpw-layout max-height set to calc(100% - var(--space-from-corner)*2); If I change this in Inspector from 100% to 60% then the chat widow shows at the expected height, but it's not controllable from the local stylesheet because it's overriden by https://cdn.botpress.cloud/webchat/v1/packages/components/src/css/theme-light.css
alert-napkin-63613
03/02/2024, 5:50 PMChanging the Height setting in styler.botpress.app Chat Layout had no effect either.
alert-napkin-63613
03/02/2024, 6:06 PMSame issue when the scripts are added to a plain html file with no other content other than the html, head, and body tags and a link to a local stylesheet with styling from the styler.botpress.app Advanced tab - the max-height is not configurable because the 100% is injected.