Embedded Chat Demo

Use the widget directly or as an iframe. Guided mode starts by default.

<div id="permaloc-chat-container" style="position: fixed; bottom: 20px; left: 20px; z-index: 1000;"></div>
<script>
  (function() {
    var widgetUrl = "/widget";
    
    // Check if host URL has chatOpen query parameter
    var urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('chatOpen')) {
      var separator = widgetUrl.includes('?') ? '&' : '?';
      widgetUrl += separator + 'chatOpen=' + urlParams.get('chatOpen');
    }
    
    var container = document.getElementById('permaloc-chat-container');
    var iframe = document.createElement('iframe');
    iframe.src = widgetUrl;
    iframe.id = 'permaloc-chat-widget';
    iframe.width = '60';
    iframe.height = '60';
    iframe.style.border = 'none';
    iframe.style.borderRadius = '50%';
    iframe.style.overflow = 'hidden';
    iframe.style.transition = 'width 0.3s ease, height 0.3s ease, border-radius 0.3s ease';
    container.appendChild(iframe);
    
    window.addEventListener('message', function(event) {
      if (event.data && event.data.type === 'chatbot-resize') {
        if (event.data.expanded) {
          iframe.width = event.data.width;
          iframe.height = event.data.height;
          iframe.style.borderRadius = '12px';
        } else {
          iframe.width = event.data.width;
          iframe.height = event.data.height;
          iframe.style.borderRadius = '50%';
        }
      }
    });
  })();
</script>