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

Question

I would like to initially keep the messaging Web Widget minimized until a customer expands it, and have it stay open when the page is reloaded in Zendesk. Is that possible?

Answer

The Web Widget defaults to a minimized state upon loading. To ensure that the widget remains open after a user expands it, even after reloading the page, you can implement this custom JavaScript:

**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 the article: Core messaging Web Widget API.