Enhance RocketChat livechat widget initialization with state persistence

- 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:
2025-11-06 13:46:41 +01:00
parent 0b5d114500
commit 78ebe7e6ba

View File

@@ -89,30 +89,21 @@ const { language, textDirection } = I18N;
<BackToTop /> <BackToTop />
<script is:inline> <script is:inline>
// Initialize RocketChat livechat widget // Initialize RocketChat livechat widget with state persistence
(function() { (function() {
// Prevent multiple initializations // Initialize RocketChat API only once
if (window.rocketChatInitialized) { if (!window.RocketChat) {
return; window.RocketChat = function(c) {
} if (window.RocketChat._) {
window.RocketChat._.push(c);
window.rocketChatInitialized = true; } else {
window.RocketChat._ = [c];
// Initialize RocketChat API }
window.RocketChat = function(c) { };
if (window.RocketChat._) {
window.RocketChat._.push(c);
} else {
window.RocketChat._ = [c];
}
};
if (!window.RocketChat._) {
window.RocketChat._ = []; window.RocketChat._ = [];
window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
} }
window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
function loadRocketChatScript() { function loadRocketChatScript() {
// Check if script is already loaded // Check if script is already loaded
if (document.querySelector('script[src*="rocketchat-livechat"]')) { if (document.querySelector('script[src*="rocketchat-livechat"]')) {
@@ -131,47 +122,51 @@ const { language, textDirection } = I18N;
script.onerror = function() { script.onerror = function() {
// Silently fail - don't show errors to users // Silently fail - don't show errors to users
window.rocketChatInitialized = false;
};
script.onload = function() {
// Script loaded successfully
}; };
firstScript.parentNode.insertBefore(script, firstScript); firstScript.parentNode.insertBefore(script, firstScript);
} catch (e) { } catch (e) {
// Silently fail - don't show errors to users // 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 // Load on initial page load
if (document.readyState === 'loading') { if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', loadRocketChatScript); document.addEventListener('DOMContentLoaded', function() {
loadRocketChatScript();
// Mark widget for persistence after it loads
setTimeout(markWidgetForPersistence, 1500);
});
} else { } else {
loadRocketChatScript(); loadRocketChatScript();
setTimeout(markWidgetForPersistence, 1500);
} }
// Reinitialize after Astro View Transitions // Handle Astro View Transitions - just ensure persistence marker is set
document.addEventListener('astro:after-swap', function() { document.addEventListener('astro:page-load', function() {
// Reset initialization flag to allow reload // Re-check that the widget has persistence marker after page load
window.rocketChatInitialized = false; setTimeout(markWidgetForPersistence, 100);
});
// Small delay to ensure DOM is ready document.addEventListener('astro:after-swap', function() {
setTimeout(function() { // Re-check that the widget has persistence marker after DOM swap
if (window.RocketChat && window.RocketChat.livechat) { setTimeout(markWidgetForPersistence, 100);
// 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);
}); });
})(); })();
</script> </script>