Chat widget not working on whitelisted website

Issue Symptoms

The Web Widget code has been implemented on an external site. However, chat functionality does not work, and if only Chat is being used, the widget does not appear at all.

Conditions

• Web Widget code has been embedded on an external site.
• Whitelist domains has been enabled in Chat under Settings > Widget > Widget Security.
• The website where the widget is hosted has been added to the whitelist.

Resolution

Some Content Management Systems (CMS) or other website services will add custom script via an iframe or some other element. This may cause the request from the widget to originate from a host which is different than the one seen in the web browser's address bar.

Using common browser developer tools, we can try to discover where this request is coming from. Here's a quick overview to find the origination of the request.

1. Open a new browser tab or window.
2. Open the developer tools/console in your browser (typically you can find this panel by right clicking the browser window and selecting the "Inspect" option). 
3. Click on the Network tab in the developer console.
4. Select the WS or WebSocket filter in the browser console (in Safari select Other). This helps to filter for the Chat connection, since Chat uses the WebSocket protocol to communicate with the Zendesk Chat servers.
   
5. Navigate to your site where the Web Widget is hosted.
6. Look for a request being made over WebSocket to an integer like this one:
   
7. Click on this request and select the Headers tab.
8. Scroll down to the Request Headers and look for an Origin value. This is where the Chat request is originating and will need to be added to the Whitelist (in Chat under Settings > Widget > Widget Security). Here's where I found the Origin value on my test site:
   

Once this Origin value has been added to and saved to the Chat widget settings, the Chat functionality should function successfully.