Showing and hiding the Chat window

Note: This guide applies only to the Chat widget from Chat-only accounts, not from Chat+Support accounts. See About Chat account types in Zendesk help.

You can use the Chat Widget API to let a visitor show and hide the chat window on the web page.

You'll need two custom images or buttons on the page that the user can click to show and hide the chat window. Example:

<a href=""><img src="https://my_cdn.com/open_chat.png"/></a>
<a href=""><img src="https://my_cdn.com/close_chat.png"/></a>

Before you start, use the Chat dashboard to hide the Chat widget on the page by default. If you're not a Chat admin, ask one to do it for you.

To hide the Chat widget by default

1. In the Chat dashboard, select Settings > Widget and click the Settings tab.
2. In the Hide Widget section, enable Turn off Chat widget.

Next, implement the show and hide functionality in the page source code.

To show and hide the chat window

1. Call the API's livechat.window.show() function when the user clicks one of the custom images or buttons.

   <a href="javascript:$zopim.livechat.window.show()"><img src="https://my_cdn.com/open_chat.png"/></a>

   Note: This tutorial uses inline JavaScript. JavaScript event listeners and handlers are recommended in a production environment.

2. Call the API's livechat.window.hide() function when the user clicks the other custom image or button.

   <a href="javascript:$zopim.livechat.window.hide()"><img src="https://my_cdn.com/close_chat.png"/></a>

Clicking each image should show and hide the chat window.