You need to sign in to do that
Don't have an account?
Ashish 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.
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.
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:
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
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.
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?
Regards,
Ashish Takke
You do need to change & to & 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 & 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
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.
Regards,
Ashish Takke
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.
Regards,
Ashish Takke
standardStylesheets="false"
Once i log in and an agent accepts, i get this error in the chat minimized state
1) How do i get rid of the above#1 scenario and get to display green live icon and live chat next like below
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...