Custom Avatar not showing when using Advanced Styl...
# 🤝help
f
I cant seem to figure out how to add an image as the icon for the avatar. I am using the advanced styler and within it there is no option to edit the avatar and using some custom css also did not work. I have also set the image correctly in the bot dashboard. what i am using: advanced style and chatbot inside a div.

https://cdn.discordapp.com/attachments/1138923156019613817/1138923156233531565/Screenshot_2023-08-09_at_20.53.25.png

b
@bright-magazine-792 any ideas?
f
Hey @freezing-carpenter-9818 here's what you could try. So I've hidden the svg that's inside the .bp-bot-avatar and added a base64 encoded image as background

https://cdn.discordapp.com/attachments/1138923156019613817/1138938820507750430/image.png

https://cdn.discordapp.com/attachments/1138923156019613817/1138938820709073067/image.png

Copy code
/* Styling for the avatar of the bot */
.bpw-bot-avatar img,
.bpw-bot-avatar svg {
  background: #000000;
  border: 3px solid #ffffff;
  visibility: hidden;
}
.bpw-bot-avatar {
    margin-right: 5px;
    background:   
url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50px;
    border: 2px solid orange;
    width: 45px;
    height: 45px;
}
I've updated the
.bpw-bot-avatar svg
rule and added a new one -
.bpw-bot-avatar
https://yoksel.github.io/url-encoder/ You can encode any svg here
or if you want to convert other images also https://websemantics.uk/tools/image-to-data-uri-converter/
f
hi @freezing-elephant-85019, that worked perfectly, i used a png instead and set the size to cover. perfect! thanks so much!
@freezing-elephant-85019 could i have some further assistance please. this is a little complicated so bare with me. So after much testing, from a UI/UX standpoint its better to have the inbuilt chatbot on desktop devices, and the webchat chat window on mobile devices. so what i have done is added two scripts to the web page. one being the "chatbot inside div" and the other being the normal chatbot script how ever its been adjusted. the adjustments i have made are to: 1. only show the webchat script on mobile devices using
window.innerWidth
. 2. trigger to open the chat window and deploy the irst messages. opinion: do ou think this is the correct way to go about running both scripts, is there a simpler option? the problem: when using the window.innerwidth the trigger does not work for both desktop and mobile.
here is the code for the webchat:
Copy code
<script>
if (window.innerWidth <= 500) { // Adjust the value based on the desired screen width
  // Add the script code here that you want to run on mobile devices
  var script1 = document.createElement('script');
  script1.src = "https://cdn.botpress.cloud/webchat/v0/inject.js";
  document.body.appendChild(script1);

  var script2 = document.createElement('script');
  script2.src = "https://mediafiles.botpress.cloud/hidden-for-privacy/webchat/config.js";
  script2.defer = true;
  document.body.appendChild(script2);

  window.botpressWebChat.onEvent(
    function (ev) {
      window.botpressWebChat.sendEvent({
        type: "loadConversation",
      });
    },
    ["LIFECYCLE.LOADED"]
  );

  window.addEventListener("message", function (event) {
    // console.log(event.data.type);
    if (event.data.type == "LIFECYCLE.READY") {
      window.botpressWebChat.sendEvent({
        type: "trigger",
        channel: "web",
        payload: {
          text: "",
        },
      });
    }
  });
}
</script>
f
So if I understand correctly, you want to have different styles for desktop vs mobile? If you you'd be better off using media queries in your css https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types
b
How do I make my Gravatar avatar show up on my website? Thanks in advance for any help I am a noob when it comes to the script stuff!
f
Hi, what's a gravatar, can you give me some more context? And what do you mean by showing up on your website, do you want a custom image to show up as your bot avatar?
f
hi @freezing-elephant-85019 media queries wont work as I need: for desktop: webchat in div for mobile: standard webchat with icon that will open the chat window (standard)
f
Can you share what the code looks like? Some screenshots might help as well. I would need some more context before answering that. I was suggesting earlier that instead of changing the script based on window.innerWidth, just change the styles how you want them to look using a media query
33 Views