Salin kode berikut dan tempelkan di website Anda:
<!-- Chatbot Popup Start -->
<style>
#chatbot-popup-btn {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 10001;
background: transparent;
border: none;
border-radius: 50%;
width: 62px;
height: 62px;
box-shadow: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
#chatbot-popup-btn img {
width: 62px;
height: 62px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 4px 16px rgba(31,38,135,0.18);
transition: box-shadow 0.2s, transform 0.2s;
}
#chatbot-popup-btn:hover img {
box-shadow: 0 8px 32px rgba(31,38,135,0.25);
transform: scale(1.06);
}
#chatbot-popup-iframe {
position: fixed;
bottom: 110px;
right: 32px;
width: 380px;
height: 600px;
max-width: 98vw;
max-height: 90vh;
border: none;
border-radius: 18px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);
z-index: 9999;
display: none;
background: #fff;
}
@media (max-width: 600px) {
#chatbot-popup-iframe {
width: 98vw;
height: 98vh;
right: 1vw;
bottom: 1vw;
border-radius: 0;
}
}
</style>
<button id="chatbot-popup-btn" title="Buka Chatbot">
<img src="spectra.png" alt="Chatbot">
</button>
<iframe id="chatbot-popup-iframe" src="https://app.integrasiteknologivisual.com/ai-chatbot-assistant/"></iframe>
<script>
const btn = document.getElementById('chatbot-popup-btn');
const iframe = document.getElementById('chatbot-popup-iframe');
btn.onclick = function(e) {
e.stopPropagation();
iframe.style.display = iframe.style.display === 'block' ? 'none' : 'block';
};
window.addEventListener('click', function(e) {
if (e.target !== btn && e.target !== iframe && !iframe.contains(e.target)) {
iframe.style.display = 'none';
}
});
</script>
<!-- Chatbot Popup End -->
Pastikan file spectra.png tersedia di folder yang sama dengan file website Anda.