How can I customize the Web Widget to remain open when the page loads?

Question

I want to keep the messaging Web Widget minimized until a customer expands it, and have it stay open when the page reloads. Is that possible?

Answer

The messaging Web Widget defaults to a minimized state when your page loads. To ensure that the widget remains open when a user expands it, even after the page reloads, implement the custom JavaScript below:

**Enter your messaging widget code here**
<script>
window.zE || (function (e, t) {
var n = window.zE = function () {
n._.push(arguments);
};
n._ = [];
n.set = function (e, t) {
n._.push(["set", e, t]);
};
var r = document.createElement("script");
r.type = "text/javascript";
r.async = true;
r.src = "INSERT LINK FROM THE MESSAGING WIDGET CODE";
var a = document.getElementsByTagName("script")[0];
a.parentNode.insertBefore(r, a);
})();
// Check local storage for the widget state
document.addEventListener("DOMContentLoaded", function () {
const widgetState = localStorage.getItem('zendeskWidgetState');
if (widgetState === 'open') {
zE('webWidget', 'open');
}
// Listen for widget open/close events
zE('webWidget:on', 'open', function () {
localStorage.setItem('zendeskWidgetState', 'open');
});
zE('webWidget:on', 'close', function () {
localStorage.setItem('zendeskWidgetState', 'minimized');
});
});
</script>

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.

For more information, see:

• Installing the Web Widget for messaging
• Core messaging Web Widget API