Configure Chat Widget - Zendesk Chat (Ultimate)

This is article is part of configuring the chat widget in Connecting your bot to Zendesk Chat.

Related articles:

• Adding Zendesk Chat widget to your website or help center (Zendesk Guide)
• Connecting your bot to Zendesk Chat

Configuring chat widget

To configure your Zendesk Chat widget, follow the steps below:

1. Copy the snippet code below
2. Give it to your web developer and ask them to
   • paste it to right below where the chat widget is, and
   • replace “replace me with name of the virtual agent” with the name of your bot department
   • replace “replace me with name of human department” with the name of the transfer/human department 
   • It’s case AND space sensitive so make sure it's exactly the same as how you set it up in Zendesk Chat

If you are doing this by yourself and don't feel comfortable editing it directly in the source code of your website or help center, you can edit it in TextEdit (Mac) or NotePad (Windows) first then copy paste the edited code to the source code as well.
When using TextEdit (Mac), make sure to make it click Format > Make Plain Text

<script>
    var VIRTUAL_AGENT_NAME = 'replace me with name of the virtual department';
    var HUMAN_DEPARTMENT_NAME = 'replace me with name of human department';

    zE('webWidget:on', 'chat:departmentStatus', function(dept) {
        if (dept.name === VIRTUAL_AGENT_NAME && dept.status === 'online') {
            zE('webWidget', 'updateSettings', {
                webWidget: {
                    chat: {
                        departments: {
                            enabled: [''],
                            select: VIRTUAL_AGENT_NAME
                        },
                    }
                }
            });
        } else if (dept.name === VIRTUAL_AGENT_NAME && dept.status !== 'online') {
            zE('webWidget', 'updateSettings', {
                webWidget: {
                    chat: {
                        departments: {
                            enabled: [''],
                            select: HUMAN_DEPARTMENT_NAME
                        },
                    }
                }
            });
        }
    });
</script>