Web Chat Basics: Add Your Branding to Snap-Ins Chat fail: - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
David BorgerdingDavid Borgerding 

Web Chat Basics: Add Your Branding to Snap-Ins Chat fail:

When I switch Omni Channel to available, and double click on the chat icon on the Visualforce page, it indicates "Loading" and then completes.  But when you click on it, it does not connect to Omni Channel? 

When I check the challenge, I recieve the error message:  "We can't find a Live Chat Transcript record. Double-check the instructions and make sure you closed the chat tab in the console."  Any ideas why this is failing?  I noticed a few others on the board had the same issue.  
EdEd (salesforce.com) 
Hi David,

Have you first made sure that your Live Agent and Omni-Channel configuration is setup correctly? You can test without the customizations first if the chat will push through to isolate the issue.

May I also suggest joining the Trailhed group below for advice:
https://success.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F9300000009Nek

Thanks!
Ric KongRic Kong
Hi David

I encountered the same issue with you. Look for help! Thanks.
Dave StantonDave Stanton
I had this problem and solved by added additional CORS whitelisting. In developer edition, the domain we create is HTTP but the VisualForce page is redirected to load at HTTPS, so this causes the chat button to fail on network request because these are consided two different domains. To fix:
  1. Go to Setup > CORS
  2. Create a new whitelisted origin: https://*.force.com
  3. Confirm you have an existing whitelisted origin: http://*.force.com
  4. Reload the VisualForce page
Chat should now work as expected.
 
Ric KongRic Kong
Hi Dave

I checked my CORS and it includes both https://*.force.com and http://*.force.com.

User-added image

But it still doesn't work. Is there any other thing I could tune?
Dave StantonDave Stanton
Can you paste a screenshot of your browser console? You might need to add more CORS rules for static assets.
Ric KongRic Kong
Hi Dave

Let me try to capture some more screen for your reference.

1. Before I get my omni-channel online

User-added image

2. After I get my omni-channel online
User-added image

3. When I press "Chat with an expert"
User-added image

4. I could see there is no request on the service console
User-added image


And I also attached the code for your reference see if it could help. Thanks so much Dave!

<apex:page >
  <h1>Let’s start chatting...</h1>
  <br />
  Click the button to start a chat.
  <br />
  <!--Snap-ins Code Snippet-->
<style type='text/css'>
    .embeddedServiceHelpButton .helpButton .uiButton {
        background-color: #565656;
        font-family: "Salesforce Sans", sans-serif;
    }
    .embeddedServiceHelpButton .helpButton .uiButton:focus {
        outline: 1px solid #565656;
    }
    @font-face {
        font-family: 'Salesforce Sans';
        src: url('https://www.sfdcstatic.com/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.woff') format('woff'),
        url('https://www.sfdcstatic.com/system/shared/common/assets/fonts/SalesforceSans/SalesforceSans-Regular.ttf') format('truetype');
    }
</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://playful-fox-3wsa7o-dev-ed.my.salesforce.com',
            'https://rickong-developer-edition.ap4.force.com/liveAgentSetupFlow',
            gslbBaseURL,
            '00D6F000001GoJV',
            'Chat_Agents',
            {
                baseLiveAgentContentURL: 'https://c.la1-c2-ukb.salesforceliveagent.com/content',
                deploymentId: '5726F000000CwVn',
                buttonId: '5736F0000008kcV',
                baseLiveAgentURL: 'https://d.la1-c2-ukb.salesforceliveagent.com/chat',
                eswLiveAgentDevName: 'Chat_Agents',
                isOfflineSupportEnabled: false
            }
        );
    };

    if (!window.embedded_svc) {
        var s = document.createElement('script');
        s.setAttribute('src', 'https://playful-fox-3wsa7o-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>
Steeve CaylaSteeve Cayla
The CORS setting is incorrect, as you are accessing from the visualforce page. 
Update or add a new CORS setting like the following: https://*.visualforce.com and it should work. 
Ric KongRic Kong
Hi Steeve

It works after I added https://*.visualforce.com into the CORS!! Thanks!!

User-added image

User-added image
Kwame ShorterKwame Shorter
@Ric Kong, thanks for your suggestion to tweak the CORS for https://*.visualforce.com. Worked perfectly for me after adding that.
Chris DuarteChris Duarte
Thank you for your feedback, everyone. We're working on getting this updated in Trailhead. My apologies for the trouble.
Danielle HawnDanielle Hawn
I am trying to complete this same module and I can't get the chat to work, the button shows up but nothing happens when I click it. I ran an inspect in my browser and it is saying that access to the SalesforceSans-Regular.woff font is blocked by CORS policy. I tried to add the top level domain https://*.sfdcstatic.com but I am still getting the same message. :(
Danielle HawnDanielle Hawn
Here is a screenshot of my CORS settings, I have tried everything... and the button still isn't clickable to start a chat.
 User-added image
Danielle HawnDanielle Hawn
You can disregard, I resolved the issue. :)
Mahmood SyedMahmood Syed
Hi All,

I am having the same issue, updated the CORS as advised above, still unable to receive the chat request, the Omni-channel status is set to Available. Any further help on this is much appreciated.

Thanks
Mahmood
Danielle HawnDanielle Hawn
Mahmood, what fixed my issue was vaguely embarrassing. Because I was working through the trail I had a ton of browser windows opened. I closed all of them and realized that the one in which my agent was signed on was timed out. I started fresh with just two windows (the one in which I was signed on as the agent) and the one as the customer trying to chat... and it worked. :)
Mahmood SyedMahmood Syed
Thanks for your response Danielle. Glad to hear that it got resolved for you.
I have also figured out what I was doing wrong and managed to fixed it. In my Scenario, I should have mentioned that it was working when logged in as an admin but wasnt working when logged in as actual support agent.

This is the first time I was configuring this and found that the live agent chat is using queue based routing and this particular user was not a member of that queue.

It was simple to fix it, however took me few hours to investigate all that ;) but glad that its working now.
 
Niriksha DalalNiriksha Dalal
I was facing the same issue. Adding  https://*.visualforce.com in CORS resolved for me as well
Obaid KObaid K
Thanks Steev .... work for me too  now  :)
Johanna MattssonJohanna Mattsson
I'm having a similar problem, the Visualforce Page loads, when clicking the button "Chat with an expert" the chat request window comes up but nothing comes up in the Omni-channel Utility item. This means I can't accept the chat. Any ideas?
Preetam DubeyPreetam Dubey
It works after I added https://*.visualforce.com into the CORS!! Thanks!!    just paste it will definitely work . Ii did and passed the trailhead.100% sure.
Roger MirandaRoger Miranda
I am at the CORS settings part, but it won't let me save https://*.visualforce.com as a whitelisted site.

Has anyone else experienced this? I'm sure this will allow me to continue, but it won't accept it. Weird!!

I successfully added https://*.force.com and http://*.visualforce.com, but it refuses to allow me to save https://*.visualforce.com! Ugh
Roger MirandaRoger Miranda
Nevermind! :) I switched browswers from Safari to Chrome and I was able to add the site to the CORS settings no problem. 

I need more coffee :)
Ashi LindenAshi Linden
I encoutered the same issue and as the trailhead suggests, white listing https://*.visualforce.com under Settp >> CORS did the trick.
Ken IngleKen Ingle
THANK YOU, just spent 2 hours and couldn't figure it out.  The whitelist did the trick.  For others, make sure you put your visualforce page url in CORS, not the url for your dev org.  And also remove forward slash on end of url or it will give you a path error.  And make sure to remove the /apex/web_chat at the end as well.
Shrishti GuptaShrishti Gupta
I have tried everything mentioned above, still i m not able to figure out what is actually causing the problem in chat window popup. It is loading and loading only..
AMIT KUMARAMIT KUMAR
Shrishti,

Give more background of how you set the web chat( omni channel or without), kind of routing etc etc. How you testing it (external website or VF page). Few screenshots will help here.

Regards 
Amit
Venkatesh KashyapVenkatesh Kashyap
Can someone assist me in this please? I have tried all the steps mentioned above inlcuding whitelisting but the chat does not seem to work.After I click the chat with an expert button it loads for sometime and chat with agent button appears but when i click on the button nothing seems to happen. Im not able to get any requests in the omni- channel window,

Thanks
AMIT KUMARAMIT KUMAR
Hi Venkatesh,
You can go to Omni Supervisor and see if agents are appearing there. if Yes then step is to check the CHANNEL assignment(marked as 1 in screenshot). If chat channel is also appearing, good, if not, update CHAT USER setting on User record.
If above still doesnt work then look to the Queue Assignment (marked with 2 in screenshot), if specific agent is assigned to the queue (I am assuming, OMNI Queue based routing is used here). Chat button got one to one relation with the Queue, and Queue can have multiple users (agents). Attaching screenshot for you to refer.

omni sueprvisor
Hope above pointers should help you to resolve the issue. 

Regards
Amit
 
Venkatesh KashyapVenkatesh Kashyap
Thank you so much Amit for your quick response. However i could pass the challenge when i tried repeating the steps in another trailhead playground, Will keep note of your answer for future reference.

Thanks.
Haroldo SoaresHaroldo Soares
In my case the chat's site configured was inactive. All I had to do was activate it.Go to Setup -> Site and click activate on your site.

User-added image