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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user