I am quite new with Salesforce digital engagement and I could not find how can I customize the chat button to fit my Website

Right now the button looks like the following:

enter image description here

How can I edit the CSS? Make it bigger, smaller change colors, the font

1 Answer 1


You should be able to edit this button styling from this clickpath

Setup> Embedded service deployments(ESW)>'view' your ESW by clicking the dropdown> Branding

See more info on trailhead and article

Incase you want to change the "Agent offline" button you can do that from experience site> Builder> Theme>Colors> Action color

Also, the color and label of the chat button can be changed directly on the embedded service code snippet if you’re deploying on a Visualforce Page or external website.

Here’s the section of the code snippet where you can changed the chat button color (its on the beginning of the code snippet):

<style type='text/css'>
.embeddedServiceHelpButton .helpButton .uiButton {
background-color: #57C046;
font-family: "Salesforce Sans", sans-serif;

And here’s where you can change the label of the displayed message if there are online agents or none (its on the middle portion of the code snippet):

//embedded_svc.settings.defaultMinimizedText = ‘…’; //(Defaults to Chat with an Expert)
// embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)

The 3 dots closed by quotation is where you can put your desired message that the customer will see. And don’t forget to remove the 2 forward slash at the beginning of each code line so that the changes will reflect.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .