Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Alaric WimerAlaric Wimer 

How can I add simple text into the Salesforce Embedded Chat pre-chat form without building a custom pre-chat lightning component?

I have a standard pre-chat form for Salesforce Embedded Chat that I would like to add some introductory title text to. I know this can be done by changing the pre-chat form to a custom lightning component, but for the sake of simplicity, I'd like to avoid resulting to a custom lightning component if possible.

Here's a screenshot of the text I would like to add to the form, before the fields. Currently, I am using an image for this, the text you see on the blue background is actually an image. 

Screenshot: https://prnt.sc/ss0bcj

 

 

Best Answer chosen by Alaric Wimer
ANUTEJANUTEJ (Salesforce Developers) 
Hi Alaric,

I tried checking in my org but unfortunately, I was not able to add any text I was only able to add an image as you have shown in the link. To my knowledge, I think that might not be possible with standard functionality.

Regards,
Anutej.

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi Alaric,

I tried checking in my org but unfortunately, I was not able to add any text I was only able to add an image as you have shown in the link. To my knowledge, I think that might not be possible with standard functionality.

Regards,
Anutej.
This was selected as the best answer
Alain CabonAlain Cabon
You can hack a standard pre-chat form for Salesforce Embedded Chat by playing with embedded_svc.addEventHandler("afterMaximize", function(data)

https://developer.salesforce.com/docs/atlas.en-us.snapins_web_dev.meta/snapins_web_dev/snapins_web_chat_events.htm

Must be tested with many options that can change the header during a session of chat.
  
<script type='text/javascript'>
    var initESW = function(gslbBaseURL) {

        var show = false;
        
        embedded_svc.addEventHandler("afterMaximize", function(data) {
            console.log("afterMaximize event was fired.");
            
            if (!show) {
                show = true;
                var li2 = document.createElement("div");
                li2.style.color = "white";
                li2.style.backgroundColor  = "blue";
                li2.style.padding = "5px";
                li2.appendChild(document.createTextNode("Please do not enter sensitive or confidential information such as credit card numbers, social security numbers, or medical history. In addition, we cannot provide any medical advice."));
                    
                var sidebar = document.querySelector("div.formContent.embeddedServiceSidebarForm");
                
                sidebar.insertBefore(li2, sidebar.childNodes[0]);
            }
            
        });    
        
        embedded_svc.settings.displayHelpButton = true; //Or false
        embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'

 
SwethaSwetha (Salesforce Developers) 
HI Alaric,
You can save that text as an image and use that image as the Pre-Chat Background. Other than that, you'll need to do a custom lightning component.

Steps mentioned in article: https://developer.salesforce.com/docs/atlas.en-us.snapins_web_dev.meta/snapins_web_dev/snapins_web_set_chat_images.htm

Related:  https://success.salesforce.com/answers?id=9063A000000pZ59QAE
 
Hope this helps you. Please mark this answer as best so that others facing the same issue will find this information useful. Thank you
Alain CabonAlain Cabon
The big problem with a pre-chat background is to be a good graphic designer for the perfect size and logo that will fit the exact expected size otherwise, the letters dribble and that becomes almost unreadable. I have tested it and the result was ugly (I am not a graphic designer either).

The hack will remain stable for the readability with always a perfectly clear message (easy to change). It is also easy to clear it with a new event of the chat.

The only problem of all the hacks is when the query selector becomes inactive because Salesforce change the name of the generated internal DIV.
( document.querySelector("div.formContent.embeddedServiceSidebarForm");  )
 
Sunayana GuptaSunayana Gupta
Hello,
Did you get the answer for this? I have the same requirement I tried with embedded_svc.addEventHandler("afterMaximize", function(data) and customized according to the requirement but once i close the chat page and open it again text message disappears have to refresh page everytime.
If anyone have solution please let me know. thanks