Show and Hide the Chat Button in Enhanced Web Chat

When setting up your website, you can determine whether the chat button is initially hidden or shown. Also, you can programmatically show or hide the button after initialization.

Initial Chat Button State

By default, the chat button is always shown if no business hours are specified. If business hours are specified, the chat button is shown during business hours and hidden outside of business hours. To learn how to configure business hours, see Set Business Hours in Enhanced Chat.

If you want to override this default behavior, set the embeddedservice_bootstrap.settings.hideChatButtonOnLoad flag (to either true or false) before the embeddedservice_bootstrap.init line in your code snippet. For example:

1// Override default behavior and hide the chat button at initialization
2embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
3
4// Enhanced Web Chat init call
5embeddedservice_bootstrap.init(...initalization info...);

The chat button returns to this same initial state after the chat window closes.

Note

Chat Button After Initialization

To change the chat button state after initialization, add an event listener for the onEmbeddedMessagingButtonCreated event and use the following methods: embeddedservice_bootstrap.utilAPI.showChatButton and embeddedservice_bootstrap.utilAPI.hideChatButton.

1// Show chat button
2embeddedservice_bootstrap.utilAPI.showChatButton();
3
4// Hide chat button
5embeddedservice_bootstrap.utilAPI.hideChatButton();

You can’t hide the chat button if the chat window is already showing. Also, these methods don’t have session continuity; for example, after a refresh, the button returns to its initial state. If business hours are specified, these calls only override the current visibility until the next business hours interval.

Note

See the Enhanced Web Chat reference documentation for details.