How do I ensure the pre-chat form is presented to a visitor if they time out then reconnect?

Question

If a visitor times out their connection to Chat but does not close the window or tab the widget is loaded in, then reconnect the widget to send a new message, the pre-chat form won't automatically be presented to the visitor. Is there a way to require a visitor to always see the pre-chat form in the Web Widget when they reconnect after a timeout?

Answer

Disclaimer: This article is provided for instructional purposes only. Zendesk does not support or guarantee the code. Post any issues you have in the comments section or try searching for a solution online.

By default, a visitor skips the pre-chat form when they reconnect. However, you can force the pre-chat form to appear once more upon reconnection by using the API. First, check the current state of the widget when it connects. Then close, reset, and reopen the widget if needed to make sure the pre-chat form always shows to a reconnecting visitor.

<script id="ze-snippet" 
src="https://static.zdassets.com/ekr/snippet.js?key=ACCOUNT_KEY"> </script>

<script>
// run whenever chat connects (or reconnects)
zE('webWidget:on', 'chat:connected', function() {

  // get the current state of the chat session
  let isChatting = zE('webWidget:get', 'chat:isChatting');
  
  // check there is not already an active chat session
  if (isChatting == false) {
  
    // if not then get the current state of the widget
    let widgetState = zE('webWidget:get', 'display');
    
    // check if already in the open 'chat' state, indicating prior timeout
    if (widgetState == 'chat') {
    
      // if it is then close the widget, reset and reopen in pre-chat state
      zE('webWidget', 'close');
      zE('webWidget', 'reset');
      zE('webWidget', 'open');
    }
  }
  
  // finally apply (or reapply) widget settings if needed (see note below)
  zE('webWidget', 'updateSettings', {
    webWidget: {
      chat: {
        departments: {
          select: 'Shopping Cart'
        }
      }
    }
  });
});
</script>

Note that the final step in this script is using the updateSettings API to apply or reapply the settings for the widget, such as the Shopping Cart department in the above example, whenever the widget first connects or reconnects. This workflow is discussed in more detail in the related article: Can I reapply the department after a timed-out chat visitor reconnects?