brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

33
index.html
View file

@ -6,7 +6,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title-id">Adaptive Dashboard</title> <title id="title-id">Adaptive Dashboard</title>
<link rel="manifest" id="manifest-link" /> <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> </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> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/app/main.tsx"></script> <script type="module" src="/src/app/main.tsx"></script>

33
indexV2.html
View file

@ -6,7 +6,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title id="title-id">Adaptive Dashboard</title> <title id="title-id">Adaptive Dashboard</title>
<link rel="manifest" id="manifest-link" /> <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> </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> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/app/main.tsx"></script> <script type="module" src="/src/app/main.tsx"></script>

12
package-lock.json generated
View file

@ -9727,9 +9727,9 @@
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
}, },
"node_modules/js-yaml": { "node_modules/js-yaml": {
"version": "4.1.0", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -13757,9 +13757,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "6.3.6", "version": "6.4.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
"integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==", "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

12
src/app/App.css
View file

@ -45,3 +45,15 @@ html, body, #root {
.MuiPopover-root { .MuiPopover-root {
z-index: 1501 !important; z-index: 1501 !important;
} }
#tidio-chat-iframe {
bottom: 100px !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: 80px !important; /* Example for mobile – test and adjust */
}
}