class AIChatbot {
constructor(config) {
this.config = {
chatbotId: config.chatbotId,
iframeUrl: config.iframeUrl,
position: config.position || 'bottom_right',
buttonColor: config.buttonColor || '#007bff'
};
this.isOpen = false;
this.init();
}
init() {
// Tạo container cho widget
this.container = document.createElement('div');
this.container.className = 'ai-chatbot-widget';
this.container.style.position = 'fixed';
this.container.style.zIndex = '9999';
// Thiết lập vị trí
this.setPosition();
// Tạo nút chat
this.createChatButton();
// Khởi tạo khung chat (ẩn)
this.createChatWindow();
// Thêm vào body
document.body.appendChild(this.container);
// Thêm styles
this.addStyles();
}
setPosition() {
switch(this.config.position) {
case 'bottom_right':
this.container.style.right = '20px';
this.container.style.bottom = '20px';
break;
case 'bottom_left':
this.container.style.left = '20px';
this.container.style.bottom = '20px';
break;
case 'middle_right':
this.container.style.right = '20px';
this.container.style.top = '50%';
this.container.style.transform = 'translateY(-50%)';
break;
case 'middle_left':
this.container.style.left = '20px';
this.container.style.top = '50%';
this.container.style.transform = 'translateY(-50%)';
break;
}
}
createChatButton() {
this.button = document.createElement('button');
this.button.className = 'ai-chatbot-button';
// Sử dụng SVG icon từ file tĩnh
const baseUrl = window.location.origin;
this.button.innerHTML = `
`;
this.button.style.backgroundColor = this.config.buttonColor;
// Thêm sự kiện click
this.button.addEventListener('click', () => this.toggleChat());
this.container.appendChild(this.button);
}
createChatWindow() {
this.chatWindow = document.createElement('div');
this.chatWindow.className = 'ai-chatbot-window';
// Tạo iframe
this.iframe = document.createElement('iframe');
this.iframe.src = this.config.iframeUrl;
this.iframe.style.width = '100%';
this.iframe.style.height = '100%';
this.iframe.style.border = 'none';
this.chatWindow.appendChild(this.iframe);
this.container.appendChild(this.chatWindow);
// Ẩn khung chat ban đầu
this.chatWindow.style.display = 'none';
}
addStyles() {
const styles = document.createElement('style');
styles.textContent = `
.ai-chatbot-button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
transition: all 0.3s ease;
padding: 0;
}
.ai-chatbot-button .chat-icon {
width: 30px;
height: 30px;
}
.ai-chatbot-button:hover {
transform: scale(1.1);
}
.ai-chatbot-window {
position: absolute;
bottom: 80px;
right: 0;
width: 350px;
height: 500px;
background: white;
border-radius: 10px;
box-shadow: 0 5px 40px rgba(0,0,0,0.16);
transition: all 0.3s ease;
overflow: hidden;
}
.ai-chatbot-window.slide-in {
animation: slideIn 0.3s ease forwards;
}
.ai-chatbot-window.slide-out {
animation: slideOut 0.3s ease forwards;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(20px);
}
}
@media (max-width: 480px) {
.ai-chatbot-window {
width: 100%;
height: 100%;
bottom: 0;
right: 0;
border-radius: 0;
}
}
`;
document.head.appendChild(styles);
}
toggleChat() {
if (this.isOpen) {
this.chatWindow.classList.remove('slide-in');
this.chatWindow.classList.add('slide-out');
setTimeout(() => {
this.chatWindow.style.display = 'none';
}, 300);
} else {
this.chatWindow.style.display = 'block';
this.chatWindow.classList.remove('slide-out');
this.chatWindow.classList.add('slide-in');
}
this.isOpen = !this.isOpen;
}
}setTimeout(function() {
new AIChatbot({
chatbotId: 21,
iframeUrl: 'https://chat-view.nodo.vn/window/ass_9bad11c6-f14f-4ddc-b870-9e3f405abf1e',
position: 'bottom_right',
buttonColor: '#007bff'
});
}, 0);
