Initial commit
This commit is contained in:
jeremy bayse
@@ -0,0 +1,167 @@
|
||||
(function() {
|
||||
// 1. Identify the URL of the chatbot server and extract the chatbot slug parameter
|
||||
const scriptTag = document.currentScript;
|
||||
const scriptSrc = scriptTag ? scriptTag.src : '';
|
||||
const baseUrl = scriptSrc ? new URL(scriptSrc).origin : window.location.origin;
|
||||
|
||||
let chatbotSlug = 'default';
|
||||
if (scriptSrc) {
|
||||
const urlParams = new URL(scriptSrc).searchParams;
|
||||
chatbotSlug = urlParams.get('chatbot') || '';
|
||||
}
|
||||
|
||||
if (!chatbotSlug) {
|
||||
console.error("Chatbot Widget error: The 'chatbot' parameter is missing in the script URL. Example: chatbot-widget.js?chatbot=client-slug");
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Create and inject Widget styles
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
.agglo-chat-widget-btn {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
|
||||
cursor: pointer;
|
||||
z-index: 999999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid #334155;
|
||||
outline: none;
|
||||
}
|
||||
.agglo-chat-widget-btn:hover {
|
||||
transform: scale(1.08) rotate(5deg);
|
||||
box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.5);
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
||||
}
|
||||
.agglo-chat-widget-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.agglo-chat-widget-btn svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
fill: none;
|
||||
stroke: #94a3b8;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.agglo-chat-widget-btn:hover svg {
|
||||
stroke: #f1f5f9;
|
||||
}
|
||||
.agglo-chat-widget-btn.open svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.agglo-chat-widget-container {
|
||||
position: fixed;
|
||||
bottom: 96px;
|
||||
right: 24px;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
max-height: calc(100vh - 120px);
|
||||
max-width: calc(100vw - 48px);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
background-color: #0f172a;
|
||||
z-index: 999998;
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.95);
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
border: 1px solid #1e293b;
|
||||
}
|
||||
.agglo-chat-widget-container.open {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
.agglo-chat-widget-iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.agglo-chat-widget-container {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
.agglo-chat-widget-btn {
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// 3. Create the iframe container
|
||||
const container = document.createElement('div');
|
||||
container.className = 'agglo-chat-widget-container';
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.className = 'agglo-chat-widget-iframe';
|
||||
iframe.src = `${baseUrl}/chatbot-widget/${chatbotSlug}`;
|
||||
container.appendChild(iframe);
|
||||
document.body.appendChild(container);
|
||||
|
||||
// 4. Create the floating button
|
||||
const button = document.createElement('button');
|
||||
button.className = 'agglo-chat-widget-btn';
|
||||
button.ariaLabel = 'Ouvrir le chat';
|
||||
|
||||
// Chat icon (closed state)
|
||||
const chatIcon = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-chat" viewBox="0 0 24 24">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
// Close icon (opened state)
|
||||
const closeIcon = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon-close" viewBox="0 0 24 24" style="display: none;">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
button.innerHTML = chatIcon + closeIcon;
|
||||
document.body.appendChild(button);
|
||||
|
||||
// 5. Toggle logic
|
||||
let isOpen = false;
|
||||
button.addEventListener('click', function() {
|
||||
isOpen = !isOpen;
|
||||
|
||||
const svgChat = button.querySelector('.icon-chat');
|
||||
const svgClose = button.querySelector('.icon-close');
|
||||
|
||||
if (isOpen) {
|
||||
button.classList.add('open');
|
||||
container.classList.add('open');
|
||||
svgChat.style.display = 'none';
|
||||
svgClose.style.display = 'block';
|
||||
} else {
|
||||
button.classList.remove('open');
|
||||
container.classList.remove('open');
|
||||
svgChat.style.display = 'block';
|
||||
svgClose.style.display = 'none';
|
||||
}
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user