Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Samantha Lisk 10Samantha Lisk 10 

Replace Embedded Service Chat Text with Image

Hello All,

I'm setting up Embedded Services Chat. Is there a way to override the 
embedded.svc.settings

parameters so that instead of text being displayed, an icon is displayed instead? For example, instead of  
embedded.svc.settings.defaultMinimizedText

we would have  
embedded.svc.settings.defaultMinimizedImage

. I've looked in the documentation and don't see any parameters like this, so would we have to build a LWC to override the default  
.embeddedServiceHelpButton

?
Best Answer chosen by Samantha Lisk 10
Samantha Lisk 10Samantha Lisk 10

Thanks, @Abhishek. It turns out that I was able to do this via styling. For anyone who has a similar issue, here is the styling that worked for me:

<style type='text/css'>
              .embeddedServiceHelpButton .helpButton .uiButton {
                background-color: #FFA400;
                border-radius: 50%;
                min-width: 5em;
               margin: 0 15px 15px 0;
            }
              .embeddedServiceHelpButton .helpButton .uiButton:focus {
                outline: 1px solid #FFA400;
                border-radius: 50%;
                min-width: 5em;
            }
              .embeddedServiceHelpButton .helpButton {
                margin: 0 15px 25px 0;
            }
              .embeddedServiceHelpButton .helpButton .uiButton .embeddedServiceIcon {
                margin: auto;
            }
              .embeddedServiceHelpButton .embeddedServiceIcon::before {
               font-size: 2.5em;
            }
              .embeddedServiceHelpButton .helpButton .uiButton .helpButtonLabel {
                display: none;
            }
             .embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
                background-color: #84bd00;
            }
</style>
Image attached for reference.
Circular orange chat button with large embedded service icon centered

All Answers

AbhishekAbhishek (Salesforce Developers) 
I suspect it's possible to check the below,

https://salesforce.stackexchange.com/questions/228053/is-it-possible-read-write-settings-of-embedded-svc-in-lightning-component-of-pre


If it helps you and close your query by marking it as the Best answer so that it can help others in the future.

Thanks.
Samantha Lisk 10Samantha Lisk 10

Thanks, @Abhishek. It turns out that I was able to do this via styling. For anyone who has a similar issue, here is the styling that worked for me:

<style type='text/css'>
              .embeddedServiceHelpButton .helpButton .uiButton {
                background-color: #FFA400;
                border-radius: 50%;
                min-width: 5em;
               margin: 0 15px 15px 0;
            }
              .embeddedServiceHelpButton .helpButton .uiButton:focus {
                outline: 1px solid #FFA400;
                border-radius: 50%;
                min-width: 5em;
            }
              .embeddedServiceHelpButton .helpButton {
                margin: 0 15px 25px 0;
            }
              .embeddedServiceHelpButton .helpButton .uiButton .embeddedServiceIcon {
                margin: auto;
            }
              .embeddedServiceHelpButton .embeddedServiceIcon::before {
               font-size: 2.5em;
            }
              .embeddedServiceHelpButton .helpButton .uiButton .helpButtonLabel {
                display: none;
            }
             .embeddedServiceLiveAgentStateChatAvatar.isLightningOutContext .agentIconColor0 {
                background-color: #84bd00;
            }
</style>
Image attached for reference.
Circular orange chat button with large embedded service icon centered
This was selected as the best answer
Samantha Lisk 10Samantha Lisk 10
Credit for the answer goes to Community Group Leader Justin Smith on the Ohana Slack!
Raphael Bernardo 2Raphael Bernardo 2
Hi Samantha! I have a task that requires me to do the same thing. May I know where did you write those styling codes and how did you reference it in the Embedded Service Chat? Did you store it in a Static Resource?
Milford HuntleyMilford Huntley
Ants may seem like diligent creatures, but having a colony of them in your living space can quickly turn into a major annoyance and health hazard. Not only do they invade your food and personal space, but they can also spread harmful bacteria and germs. That's why it's crucial to have reliable pest control services at your disposal. Watch WWE Raw Online (http://azstream.net/wwe-raw/)
steve diaz 7steve diaz 7
Thanks for sharing. Really helpful. ccsp certification (https://www.igmguru.com/cyber-security/ccsp-isc2-certification-training/)
Sam AlisSam Alis
Hello,

When it comes to setting up Embedded Services Chat and customizing its display, it seems that the current options provided in the embedded.svc.settings parameters are limited to text-based configurations. Unfortunately, based on the documentation available, there doesn't appear to be a parameter specifically for displaying an icon instead of text in the embedded chat interface.

However, if you wish to have an image displayed instead of text for the defaultMinimizedText parameter, it might require building a Lightning Web Component (LWC) to override the default embeddedServiceHelpButton behavior. By creating a custom LWC, you can have more control over the visual elements and incorporate an icon or image of your choice.

While it may require additional development effort, building a custom LWC can offer the flexibility needed to achieve your desired outcome. You can refer to the Salesforce documentation and resources on creating LWCs for guidance on implementing this customization.

Remember to thoroughly test your solution and ensure it aligns with your requirements and the capabilities of the Embedded Services Chat feature. If you need further assistance, don't hesitate to reach out to the Salesforce support team or consult the Salesforce developer community for additional insights and best practices.

Best of luck with your customization endeavors!
I also want to integrete it with my site working on best indoor soccer shoes (https://footyware.com/best-indoor-soccer-shoes/)