https://discord.gg/botpress logo
Join Discord
Powered by
my chatbot is blocked by the banner
# šŸ¤help
f
The snapshot is attached. And here is snippet code: <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KDVNSFN" height="0" width="0" style="display:none;visibility:hidden"> {{ "accessibility.skip_to_text" | t }} {%- render 'header',t_name:t_name -%} {{ content_for_layout }} {%- liquid echo '' section 'footer' section 'bottom-bar' echo '' -%} {{ 'accessibility.refresh_page' | t }} {%- render 'render_bottom' -%} {%- render "ecom_footer"-%} {% include 'cjpod' %} {{'tiny-img-link-preloader.js' | asset_url | script_tag }}

https://cdn.discordapp.com/attachments/1146157900151140422/1146157900738330644/68ac0e862bc04f8eec83ef1e66b1e8c2.jpgā–¾

r
You can use CSS to make the chat window height
This could make it so the chat window end before the banner
Check the styler to get this done
c
b
I fixed this using height too. I wonder if thereā€™s a way of overriding the header tho
f
To ensure that the chatbot window appears over the banner (or any other element on the page), you'll want to adjust the z-index CSS property of the chatbot window. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of another element with a lower stack order. Here's what you can do: Add a CSS rule to increase the z-index of the chatbot window. You might want to add this rule in the section of your HTML, or in your external CSS file, if you have one. .bp-widget { z-index: 9999 !important; /* This value is typically high enough to put the element in front of others */ }
If the banner is still appearing over the chatbot, it means the banner has a higher z-index than the chatbot. In this case, inspect the banner's CSS (using browser tools) to check its z-index and then set the chatbot's z-index to a value higher than that of the banner.
c
You're unreal šŸ˜„ ! @fresh-fireman-491
f
thanksļ¼Œwill try it out
f
Let us know how it goes
b
Worked for me

https://cdn.discordapp.com/attachments/1146157900151140422/1147131833188892692/Screenshot_1.pngā–¾

https://cdn.discordapp.com/attachments/1146157900151140422/1147131896443174972/Screenshot_2.pngā–¾

@fresh-fireman-491 I'm facing another problem tho As you can see from the screenshots, when I go over 410px of width, the chatbot interface gets cut on the left side. Do you have any solution for this?
f
Can you send me the css code of the "styling of the layout of the whole chat"
I got mine set to percentage I'm pretty sure
b
Thank you in advance!
f
If i understand it you want it to fit the whole screen
b
No, just make it wider
But over 410px it cuts
f
Thats in the Webchat styler
Have you tried uploading it?
And then seeing how it looks?
b
No, Iā€™m the website as well
I integrated it into my website, itā€™s cut there as well
f
Could you send me a picture of it on your website?
b
Of course, Iā€™ll send it tomorrow morning
It looks pretty much the same
Exactly like the styler
f
Alright. Remember to ping me
b
Ok, thank you!
@fresh-fireman-491

https://cdn.discordapp.com/attachments/1146157900151140422/1148158281307656242/Screenshot.pngā–¾

Split on the left side, even if i add it to my website
f
I can only guess here and the best thing would be for a member of The botpress dev team to comment on this. My guess is that they have set a limit on how wide it can be which would be 410px wide. When you go over that It just doesn't allow it to show more than that but I'm not sure
5 Views
PreviousNext
Powered by