How to move the chatbot Icon to the left
# 🌎generalb
bulky-gigabyte-59033
08/10/2023, 3:41 PMhow can i move my chatbot icon and container to the left of the web page and how can i add a custom image for the floating chatbot icon?
f
freezing-printer-49373
08/10/2023, 3:42 PM@bright-magazine-792 Do we have a guide on how to do this?
b
bulky-gigabyte-59033
08/10/2023, 3:52 PMok ive figured out how to change the icon
bulky-gigabyte-59033
08/10/2023, 3:52 PMbut i still cant seem to be able to change the position @freezing-printer-49373
f
freezing-printer-49373
08/10/2023, 4:02 PMyeah lets wait for rohan to respond, this is his field of expertise 🙂
b
bulky-gigabyte-59033
08/10/2023, 4:38 PMohk thnku
bulky-gigabyte-59033
08/10/2023, 4:39 PMif you see this though can you maybe help me edit my code to shift the floating chat bubble to the left and add blur effect over the background image in the container. There is another problem that im facing where the mcq buttons dont show up at times for some reason. Sometimes they do sometimes they dont
bulky-gigabyte-59033
08/10/2023, 4:39 PMreally sry for the trouble
b
bright-magazine-792
08/11/2023, 10:42 PMshifting floating button to the left is bit tricky.
let me go through it step-by-step.
1. While adding chatbot to your website, replace this line with the attached script.
<script src="https://cdn.botpress.cloud/webchat/v0/inject.js"></script>https://webchat-styler-css.botpress.app/prod/code/3fcd3e4e-d5bc-4bf5-8699-14b621b3ada2/v6109/style.cssbright-magazine-792
08/11/2023, 10:44 PMI can explain you what's happening here, but that'd be too technical. adding this script will make your job done!
f
freezing-dawn-29409
08/12/2023, 5:12 AM@acoustic-iron-15392 ^^^^
b
bulky-gigabyte-59033
08/12/2023, 6:46 AMthnx alot!
bulky-gigabyte-59033
08/12/2023, 6:51 AMalso if i were to do this with a different bot and use a different stylesheet can i just replace the stylesheet url with the new one and copy paste the rest?
b
bright-magazine-792
08/12/2023, 11:55 PMyes!
bright-magazine-792
08/12/2023, 11:56 PMyou got that right
b
bulky-gigabyte-59033
08/13/2023, 3:36 AMok thnku for your help and sry for the trouble
b
bright-magazine-792
08/14/2023, 6:43 PMno problem!
k
kind-park-44756
09/25/2023, 2:09 PMHi!! I followed your instructions and they worked fantastically for desktop, however on mobile the other widget on the website (a whatsapp widget, which was the whole reason I needed to move the position of the chatbot widget) is covering the send button. How can I fix this issue. Thanks!
kind-park-44756
09/25/2023, 2:43 PMAlso, sometimes the button options cover the whole conversation, and other times, the scroll in the chat doesn't work 😬
b
bright-magazine-792
09/25/2023, 3:35 PMhey @kind-park-44756
Can you share a few screenshots of the webchat issue that you're facing?
It would be good for us to inspect the problem!
k
kind-park-44756
09/25/2023, 7:57 PMDefinetely! I'll do so as soon as I can. Thank you loads for the response!
kind-park-44756
09/26/2023, 10:12 AMAs visible in the image, the whatsapp icon covers the send button
kind-park-44756
09/26/2023, 10:14 AMHere, the visibility for the chat is very poor. The buttons take up a lot of space, sometimes it's worse and the user can barely see the chat
b
bright-magazine-792
09/26/2023, 5:43 PMhey @kind-park-44756
this is something that you have to fix on your website's CSS
Specifically, the whatsapp widget's z-index
it's set to
999999910k
kind-park-44756
10/02/2023, 12:58 PMThank you!! I really appreciate the detailed response. Huge help Rohan!
f
freezing-carpenter-9818
10/25/2023, 6:14 PMWhat’s added to the style sheet you have mentioned?
l
late-thailand-37764
11/30/2023, 5:05 PMI am unable to overwrite the css for the mobile responsive font-size?? i tried all the possible way but the font size remains same
late-thailand-37764
11/30/2023, 5:08 PMAlso the bot is not being responsive in the mobile?? how to overwrite the default css
i
important-journalist-66357
02/24/2024, 1:03 PMDoes this still work? For me adding this css injection does not have any effect... Should I already see the effect in the webchat styler?
d
dry-appointment-33331
03/27/2024, 1:56 PMbright-magazine-792 Hi, I have the exact same problem... I am really looking for an away to put the widget on the left side but unfortunately can't make it work. I tried your code and it worked, so I wonder how you managed to make it work? I'm struggling so much
dry-appointment-33331
03/27/2024, 1:56 PM@sparse-tomato-3079
c
cold-branch-92043
04/10/2024, 9:42 AMHi there! I'm new here on this Botpress-Discord-channel!
I have a question about the position of the chatbot window when it appears to the right on the webpage after I press the chatbot-icon down to the right. One more issue I face a difficulty with is that on my index.html-page, the chatbot-icon does not function when I try to click it. On all the other HTML-pages, the chatbot-icon does function perfectly! And one more thing is that the position of the chatbot-window is covered a little bit under the header of all the HTML-pages. And even with the suggestion to change the Z-index value to higher on the chatbot-icon then the header of footer, it still does not show the top of the chatbot window. Even with code in template.css that says to override other settings, that I can position the chatbot-window some %-ish lower and even make it not that wide, this code does not effect the window size at all.
I am greatful for all the help you can give! Thanks!
411 Views