Controlling the Widget

If you want more control beyond what is offered through the Drift application, you can use JavaScript to control aspects of the widget programmatically. Take a look at the methods below:

🚧

Important!

In order to use the methods in this section you'll need to wait for the 'ready' event before the APIs can be called and should always come after the JavaScript install snippet.

Initializing the Drift Widget

The ready event indicates that Drift widget is ready for use. It contains a single argument which is the actual API object that can then be acted upon.

<script> 
drift.on('ready',function(api, payload) {
 // interact with the api here
})
</script>

Hide()

This method allows you to force hide the widget for both live chat and playbooks

drift.api.widget.hide();

👍

Keep in mind!

This API call needs to wait for the widget to be "ready" for it to work correctly. If you wanted to hide the widget as soon as the page loads you might not get the experience you intended as there would be a slight delay in the widget being hidden.

Show()

This method allows you to force show the widget for both live chat and playbooks

drift.api.widget.show();

OpenChat()

This method allows you to expand the chat window

drift.api.openChat();

ToggleChat()

This method allows you to toggle (open and close) the chat window

drift.api.toggleChat();

goToConversation()

This method allows you to set the conversation ID of a previous conversation programmatically in the browser so that it becomes the active conversation for the website visitor

drift.api.goToConversation(3659362088);

Code Example:

The following snippet uses the hide() and show() functions and the chatOpen and widgetVisible events to hide the widget from users until they receive a message.

drift.on('ready',function(api){
  // hide the widget when it first loads
api.widget.hide()
 // show the widget when you receive a message
  drift.on('message',function(e){
     api.widget.show()
  })
  // hide the widget when you close the chat
    drift.on('chatClose',function(e){
     api.widget.hide()
  })
})