botman / web-widget

MIT License
37 stars 68 forks source link

how to change the web widget icon? #51

Open mdhafizur opened 4 years ago

claretnnamocha commented 4 years ago

When defining the botmanWidget variable, you need to specify the url with the key bubbleAvatarUrl like so.

    var botmanWidget = {
        bubbleAvatarUrl: '/path/to/image'    
   };
AKApumkin commented 4 years ago

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