web-widget
web-widget copied to clipboard
how to change the web widget icon?
When defining the botmanWidget
variable, you need to specify the url with the key bubbleAvatarUrl
like so.
var botmanWidget = {
bubbleAvatarUrl: '/path/to/image'
};
+1 while you can change it, it is bound to the in-line JS CSS.This has issues if you want to use images that are not round.
So a quick workaround if you want to use any image and not be limited by this. Locally host the JavaScript, un-minifiy it and remove the following as shown below.
//approximately line 907
c = {
display: "flex",
justifyContent: "center",
position: "absolute",
top: "38px",
right: "20px",
height: "60px",
width: "60px",
border: 0,
borderRadius: "50%", //REMOVE
boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.2)" //REMOVE
},
u = {
display: "block",
position: "absolute",
top: "46px",
right: "20px",
height: "52px",
width: "52px",
border: 0,
borderRadius: "50%", //REMOVE
boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.2)" //REMOVE
},
p = {
width: "100%",
height: "auto",
borderRadius: "999px" //REMOVE
}
Not sure if i can raise this here or start an a new issue/request to 'not to have any of CSS in-line in the main JS file or any external files' as hacking at it is painfully slow as obfuscating names are used.