Chat Widget Customization · Assistable.ai

Chat Widget Customization

I was in the giving mood tonight, but here is the CSS code that you can use to customize a chat widget with a picture similar to GHL. You want to add this above the embed code that you get from Assistable for your chat widget. Where you see the URL, that's where you will place your picture, so that you can have your picture show up in your chat widget.

<style>

/* Chat mode header avatar */

[class*="avatar"]:not(.message-avatar),

[id*="avatar"]:not(.message-avatar),

div[style*="border-radius"][style*="50%"]:not(.message-avatar) {

background-image: url('YOUR PICTURE URL') !important;

background-size: cover !important;

background-position: center !important;

background-repeat: no-repeat !important;

font-size: 0 !important;

color: transparent !important;

}