function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ashish TakkeAshish Takke 

How to set-up Snap-ins chat in Lightning service console?

We want to implement "Snap-ins chat" in Lightning service console. Please help or suggest required steps.

As an initial set up, we have created snap-ins deployment, mapped Live agent settings and copied "Snap-in code snippets" in VF page. But when we are opening VF page as preview, we are getting below error in Chrome browser console. We have added SF HTTPS domain url in CORS as well. How to resolve this error?

Error message:
Access to Font at 'https://a.sfdcstatic.com/content/dam/www/ocms-backup/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.ttf' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Ashish,

I trust you are doing very well.

I would suggest you a walkaround for this issue. In your page outside the package, add this line of code:
 
<apex:styleSheet value="{!URLFOR($Resource.YOURNAMESPACE__ImagesAndJavascriptZip, '/css/fontFamilies.css')}"/>

Please refer to the below links which might help you further with the above issue.

https://salesforce.stackexchange.com/questions/155086/font-awesome-fonts-are-not-loading-after-spring17-release

https://salesforce.stackexchange.com/questions/140693/static-resource-blocked-from-loading-by-cross-origin-policy/140694


Also, you can refer to below docs to implement Snap-Ins Chat.

https://resources.docs.salesforce.com/214/latest/en-us/sfdc/pdf/snapins.pdf

https://resources.docs.salesforce.com/214/latest/en-us/sfdc/pdf/snapins_web_dev_guide.pdf

http://www.sudipta-deb.in/2017/10/setup-service-cloud-lightning-snap-ins.html


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
Ashish TakkeAshish Takke
Hi Anas,

Thank you for your help links. I have included CSS in VF page, but when I am trying to update '@font-face' as mentioned in your 1st help link, I am getting below error. Please suggest.

font face url error in snap in code snippet

I have followed snap-ins developer guide for creating lightning components. But when I add lightning component in utility bar, 'chat with us' not popping up/not working. Actually we want it to display as a separate pop up not within utility bar component.
Let me know, how can we add snap in lightning component in service console utility bar?


User-added image

Regards,
Ashish Takke
Khan AnasKhan Anas (Salesforce Developers) 
Hi Ashish,

You do need to change & to &amp; This will solve your problem.

The ampersand & is a special character in HTML and XML. If you want to use it as a normal character, you have to encode it correctly. Write &amp; instead of 
(Source: https://stackoverflow.com/questions/6483807/the-reference-to-entity-foo-must-end-with-the-delimiter)
So, modify the 12th line of code.

I hope it helps you.

Kindly mark this as solved if the information was helpful.

Regards,
Khan Anas
Ashish TakkeAshish Takke
Hi Anas,
Thank you for sharing this.
I have updated code as mentioned. But it is still not showing snap-in chat toolbar and onlick not working. Attaching my VF page code and screenshot. Let me know what is missing in my VF page code. I have copy-pasted snap-in snippet code as is in VF page.

User-added image
 
<apex:page >
    <style type='text/css'>
        .embeddedServiceHelpButton .helpButton .uiButton { background-color: #005290; font-family: "Salesforce Sans", sans-serif; }
        .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #005290; }
        @font-face {
        font-family: 'FontAwesome';
            src: url('/resource/resource_name/fonts/fontawesome-webfont.eot?v=4.2.0');
            src: url'/resource/resource_name/fonts/fontawesome-webfont.eot?#iefix&amp;v=4.2.0') format('embedded-opentype'), 
                url(''/resource/resource_name/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), 
                url('/resource/resource_name/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), 
                url('/resource/resource_name/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
            font-weight: normal;
            font-style: normal
        }
    </style>
    
    <script type='text/javascript' src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script>
    
    <script type='text/javascript'>
        var initESW = function(gslbBaseURL) {
            embedded_svc.settings.displayHelpButton = true; //Or false
            embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US'
            
            //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
            //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)
            
            //embedded_svc.settings.loadingText = ''; //(Defaults to Loading)
            //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session)
            
            // Settings for Live Agent
            //embedded_svc.settings.directToButtonRouting = function(prechatFormData) {
            // Dynamically changes the button ID based on what the visitor enters in the pre-chat form.
            // Returns a valid button ID.
            //};
            //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields
            //embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId
            //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us)
            
            embedded_svc.settings.enabledFeatures = ['LiveAgent'];
            embedded_svc.settings.entryFeature = 'LiveAgent';
            
            embedded_svc.init('https://ashish-takke-domain-dev-ed.my.salesforce.com', 
                              'https://takkeashish-developer-edition.ap1.force.com/prodOutcomeCodes', 
                              gslbBaseURL, 
                              '00D90000000h9lx', 
                              'LiveAgent_Lightning_Chat_Support', 
                              { 
                                  baseLiveAgentContentURL: 'https://c.la1-c1-hnd.salesforceliveagent.com/content', 
                                  deploymentId: '57290000000H1oj', 
                                  buttonId: '57390000000H1uo', 
                                  baseLiveAgentURL: 'https://d.la1-c1-hnd.salesforceliveagent.com/chat', 
                                  eswLiveAgentDevName: 'EmbeddedServiceLiveAgent_Parent04I90000000Kyk4EAC_1658012cab3', 
                                  isOfflineSupportEnabled: false
                              }
                             ); 
        };
    if (!window.embedded_svc) { 
        var s = document.createElement('script'); 
        s.setAttribute('src', 'https://ashish-takke-domain-dev-ed.my.salesforce.com/embeddedservice/5.0/esw.min.js'); 
        s.onload = function() { 
            initESW(null); 
        }; 
        document.body.appendChild(s); 
    } 
    else { 
        initESW('https://service.force.com'); 
    }
    </script>
</apex:page>

Regards,
Ashish Takke​

 
Ashish TakkeAshish Takke
Hi...

Snap-in chat pop up is working now. But what should I add to have nice styling for text highlighted in image.
Using below CSS in my VF page.

User-added image
 
<style type='text/css'>
        .embeddedServiceHelpButton .helpButton .uiButton { 
        	background-color: #005290; font-family: "Salesforce Sans", sans-serif; 
        }
        .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #005290; }
        @font-face {
			font-family: 'FontAwesome';
            src: url('/resource/resource_name/fonts/fontawesome-webfont.eot?v=4.2.0');
            src: url'/resource/resource_name/fonts/fontawesome-webfont.eot?#iefix&amp;v=4.2.0') format('embedded-opentype'), 
                url(''/resource/resource_name/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), 
                url('/resource/resource_name/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), 
                url('/resource/resource_name/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
            font-weight: normal;
            font-style: normal
        }
    </style>

Regards,
Ashish Takke

 
Abdul Aziz Sabra 5Abdul Aziz Sabra 5
@Ashish Takke I have the same Issue. How is the chat in snap In Work now?
Vincent Sgro SalesforceVincent Sgro Salesforce
try adding this to your VF page on the 1st line:

standardStylesheets="false"
mitsvikmitsvik
I am in a similar situation. I have the omni channel set up andusing snap in code fo my chat. i am having some issues when the chat window is minimized. Firsttime when a user clicks the chat, the window opens, upon entering the details before submitting if i miminize i get the following error
User-added image

Once i log in and an agent accepts, i get this error in the chat minimized state
User-added image

1) How do i get rid of the above#1 scenario and get to display green live icon and live chat next like below

User-added image
2) How to get rid of the background and get the same blur color to display....

below is my code above the snap in code i currently have...