365DevNet/365devnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance RocketChat livechat widget initialization with state persistence

Browse Source 
- Improved the initialization process to ensure the RocketChat widget is only set up once, preventing redundant initializations.
- Added functionality to mark the widget iframe for persistence across page transitions, enhancing user experience during navigation.
- Updated event listeners to maintain the persistence marker after DOM updates, ensuring consistent behavior of the livechat widget.
This commit is contained in:
Richard Bergsma
2025-11-06 13:46:41 +01:00
parent 0b5d114500
commit 78ebe7e6ba
1 changed files with 41 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/layouts/Layout.astro
View File

@@ -89,30 +89,21 @@ const { language, textDirection } = I18N;
<BackToTop />
<script is:inline>
// Initialize RocketChat livechat widget
// Initialize RocketChat livechat widget with state persistence
(function() {
// Prevent multiple initializations
if (window.rocketChatInitialized) {
return;
}
window.rocketChatInitialized = true;
// Initialize RocketChat API
window.RocketChat = function(c) {
if (window.RocketChat._) {
window.RocketChat._.push(c);
} else {
window.RocketChat._ = [c];
}
};
if (!window.RocketChat._) {
// Initialize RocketChat API only once
if (!window.RocketChat) {
window.RocketChat = function(c) {
if (window.RocketChat._) {
window.RocketChat._.push(c);
} else {
window.RocketChat._ = [c];
}
};
window.RocketChat._ = [];
window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
}
window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
function loadRocketChatScript() {
// Check if script is already loaded
if (document.querySelector('script[src*="rocketchat-livechat"]')) {
@@ -131,47 +122,51 @@ const { language, textDirection } = I18N;
script.onerror = function() {
// Silently fail - don't show errors to users
window.rocketChatInitialized = false;
};
script.onload = function() {
// Script loaded successfully
};
firstScript.parentNode.insertBefore(script, firstScript);
} catch (e) {
// Silently fail - don't show errors to users
window.rocketChatInitialized = false;
}
}
function markWidgetForPersistence() {
// Find and mark the widget iframe to persist across page transitions
const widgetFrame = document.querySelector('iframe[src*="livechat"]');
if (widgetFrame && !widgetFrame.hasAttribute('data-astro-transition-persist')) {
// Mark iframe as persistent so Astro keeps it during transitions
widgetFrame.setAttribute('data-astro-transition-persist', 'rocketchat');
// Also mark the parent container if it exists
const widgetContainer = widgetFrame.closest('[class*="rocketchat"], [id*="rocketchat"]');
if (widgetContainer && !widgetContainer.hasAttribute('data-astro-transition-persist')) {
widgetContainer.setAttribute('data-astro-transition-persist', 'rocketchat-container');
}
}
}
// Load on initial page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadRocketChatScript);
document.addEventListener('DOMContentLoaded', function() {
loadRocketChatScript();
// Mark widget for persistence after it loads
setTimeout(markWidgetForPersistence, 1500);
});
} else {
loadRocketChatScript();
setTimeout(markWidgetForPersistence, 1500);
}
// Reinitialize after Astro View Transitions
// Handle Astro View Transitions - just ensure persistence marker is set
document.addEventListener('astro:page-load', function() {
// Re-check that the widget has persistence marker after page load
setTimeout(markWidgetForPersistence, 100);
});
document.addEventListener('astro:after-swap', function() {
// Reset initialization flag to allow reload
window.rocketChatInitialized = false;
// Small delay to ensure DOM is ready
setTimeout(function() {
if (window.RocketChat && window.RocketChat.livechat) {
// Widget already exists, just ensure it's visible
try {
window.RocketChat.livechat.maximizeWidget();
} catch (e) {
// If maximizeWidget fails, widget might need full reload
loadRocketChatScript();
}
} else {
// Widget doesn't exist, load it
loadRocketChatScript();
}
}, 100);
// Re-check that the widget has persistence marker after DOM swap
setTimeout(markWidgetForPersistence, 100);
});
})();
</script>