added tidio chat to the app with a script tag in the index.html

This commit is contained in:
Carter 2025-12-15 13:23:57 -06:00
parent 41f3374982
commit c3fbe3acf6
4 changed files with 84 additions and 6 deletions

View file

@ -6,7 +6,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title-id">Adaptive Dashboard</title>
<link rel="manifest" id="manifest-link" />
<style>
#tidio-chat-iframe {
bottom: 0px !important; /* Adjust this value higher number = moved further up from the bottom */
right: 20px !important; /* Optional: tweak horizontal position if needed */
}
/* Optional: Different position on mobile (to avoid overlaps there) */
@media only screen and (max-width: 980px) {
#tidio-chat-iframe {
bottom: 0px !important; /* Example for mobile test and adjust */
}
}
</style>
</head>
<script src="//code.tidio.co/ojd4ex1awaevuymq9oijcmh7yln2pown.js" async></script>
<script>
function onTidioChatApiReady() {
// Move higher on desktop (increase value to move further up, e.g., 100px, 150px)
tidioChatApi.adjustStyles('#tidio { bottom: 0px !important; }');
// Optional: Separate adjustment for mobile (overrides desktop if needed)
tidioChatApi.adjustStyles(
'#tidio { bottom: 0px !important; }',
'@media only screen and (max-width: 980px)'
);
}
// Wait for the widget to be ready
if (window.tidioChatApi) {
tidioChatApi.on('ready', onTidioChatApiReady);
} else {
document.addEventListener('tidioChat-ready', onTidioChatApiReady);
}
</script>
<body>
<div id="root"></div>
<script type="module" src="/src/app/main.tsx"></script>