Custom Avatar not showing when using Advanced Styler Botpress #🤝help

Custom Avatar not showing when using Advanced Styl...

freezing-carpenter-9818

08/09/2023, 7:54 PM

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▾

bumpy-butcher-41910

08/09/2023, 7:55 PM

@bright-magazine-792 any ideas?

freezing-elephant-85019

08/09/2023, 8:56 PM

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▾

freezing-elephant-85019

08/09/2023, 8:58 PM

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;
}

freezing-elephant-85019

08/09/2023, 8:59 PM

I've updated the

.bpw-bot-avatar svg

rule and added a new one -

.bpw-bot-avatar

freezing-elephant-85019

08/09/2023, 9:00 PM

https://yoksel.github.io/url-encoder/ You can encode any svg here

freezing-elephant-85019

08/09/2023, 9:01 PM

or if you want to convert other images also https://websemantics.uk/tools/image-to-data-uri-converter/

freezing-carpenter-9818

08/09/2023, 9:14 PM

hi @freezing-elephant-85019, that worked perfectly, i used a png instead and set the size to cover. perfect! thanks so much!

freezing-carpenter-9818

08/10/2023, 10:04 AM

@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.

freezing-carpenter-9818

08/10/2023, 10:06 AM

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>

freezing-elephant-85019

08/10/2023, 8:41 PM

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

freezing-elephant-85019

08/10/2023, 8:42 PM

https://css-tricks.com/a-complete-guide-to-css-media-queries/

brainy-byte-43078

08/11/2023, 5:02 AM

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!

freezing-elephant-85019

08/11/2023, 8:38 PM

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?

freezing-carpenter-9818

08/12/2023, 10:27 AM

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)

freezing-elephant-85019

08/14/2023, 9:05 PM

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

41 Views

Previous Next