Customize Widget Appearance and Behavior

<!-- Light theme -->
<blackbox-agent theme="light"></blackbox-agent>

<!-- Dark theme -->
<blackbox-agent theme="dark"></blackbox-agent>

<!-- Bottom positions (recommended) -->
<blackbox-agent position="bottom-right"></blackbox-agent>
<blackbox-agent position="bottom-left"></blackbox-agent>
<blackbox-agent position="bottom-center"></blackbox-agent>

<!-- Top positions -->
<blackbox-agent position="top-right"></blackbox-agent>
<blackbox-agent position="top-left"></blackbox-agent>
<blackbox-agent position="top-center"></blackbox-agent>

<blackbox-agent
  skip-discovery
  data-config='{
    "features": ["AllowWebCall", "AllowWebChat"],
    "enableFeatureGating": true,
    "uiGatingMode": "hide"
  }'
></blackbox-agent>

const widget = document.querySelector('blackbox-agent');

// Open widget
widget.open();

// Close widget
widget.close();

// Toggle
widget.toggle();

// Open after scroll
window.addEventListener('scroll', () => {
  if (window.scrollY > 500) widget.open();
});

// Open on button click
document.getElementById('help-btn').addEventListener('click', () => {
  widget.open();
});

// Open for new visitors after delay
if (!localStorage.getItem('returning')) {
  setTimeout(() => widget.open(), 5000);
  localStorage.setItem('returning', 'true');
}

const widget = document.querySelector('blackbox-agent');

// Widget opened
widget.addEventListener('widget-opened', (e) => {
  console.log('Widget opened');
});

// Widget closed
widget.addEventListener('widget-closed', (e) => {
  console.log('Widget closed');
});

// Call started
widget.addEventListener('call-started', (e) => {
  console.log('Call ID:', e.detail.callId);
  console.log('Type:', e.detail.callType); // 'voice' or 'chat'
});

// Call ended
widget.addEventListener('call-ended', (e) => {
  console.log('Duration:', e.detail.duration);
  console.log('Status:', e.detail.status);
  showFeedbackForm();
});

// Error occurred
widget.addEventListener('widget-error', (e) => {
  console.error('Error:', e.detail.error);
});

// Transcript update (if SendTranscriptForAudioCall enabled)
widget.addEventListener('transcript-update', (e) => {
  console.log(`${e.detail.speaker}: ${e.detail.text}`);
});

// Tool executed (if SendToolCallLogs enabled)
widget.addEventListener('tool-executed', (e) => {
  console.log('Tool:', e.detail.toolName);
  console.log('Result:', e.detail.result);
});

widget.addEventListener('call-result', (e) => {
  const result = e.detail;

  if (result.data.appointment) {
    // Agent scheduled an appointment
    addToCalendar(result.data.appointment);
  }

  if (result.data.lead) {
    // Agent captured lead info
    sendToCRM(result.data.lead);
  }
});

blackbox-agent {
  /* Primary brand color */
  --widget-primary-color: #4F46E5;

  /* Backgrounds */
  --widget-background: #FFFFFF;
  --widget-header-background: #F9FAFB;

  /* Text */
  --widget-text-primary: #111827;
  --widget-text-secondary: #6B7280;

  /* Borders */
  --widget-border-color: #E5E7EB;
  --widget-border-radius: 12px;

  /* Shadow */
  --widget-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

  /* Buttons */
  --widget-button-background: #4F46E5;
  --widget-button-text: #FFFFFF;
  --widget-button-hover: #4338CA;

  /* Size */
  --widget-width: 380px;
  --widget-height: 600px;

  /* Position offset */
  --widget-offset-x: 20px;
  --widget-offset-y: 20px;
}

/* Default desktop */
blackbox-agent {
  --widget-width: 380px;
  --widget-height: 600px;
}

/* Full screen on mobile */
@media (max-width: 768px) {
  blackbox-agent {
    --widget-width: 100vw;
    --widget-height: 100vh;
    --widget-offset-x: 0;
    --widget-offset-y: 0;
  }
}

const widget = document.querySelector('blackbox-agent');

// Follow system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
widget.setAttribute('theme', prefersDark.matches ? 'dark' : 'light');

// Listen for changes
prefersDark.addEventListener('change', (e) => {
  widget.setAttribute('theme', e.matches ? 'dark' : 'light');
});

function isMobile() {
  return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
         window.innerWidth < 768;
}

if (isMobile()) {
  const widget = document.querySelector('blackbox-agent');
  widget.setAttribute('position', 'bottom-center');
}

<style>
  blackbox-agent.support {
    --widget-primary-color: #2563EB;
    --widget-border-radius: 8px;
  }
</style>

<blackbox-agent
  class="support"
  theme="light"
  position="bottom-right"
  data-config='{"features":["AllowWebCall","AllowWebChat"]}'
></blackbox-agent>

<script>
  // Open if user is idle
  let idle = 0;
  setInterval(() => {
    if (++idle > 30) {
      document.querySelector('blackbox-agent').open();
      idle = 0;
    }
  }, 1000);
  document.addEventListener('mousemove', () => idle = 0);
</script>

<blackbox-agent
  theme="dark"
  position="bottom-center"
  data-config='{"features":["AllowWebCall","SendCallResult"]}'
></blackbox-agent>

<script>
  const widget = document.querySelector('blackbox-agent');

  // Open after reading content
  setTimeout(() => widget.open(), 45000);

  // Capture lead data
  widget.addEventListener('call-result', (e) => {
    if (e.detail.data?.lead) {
      fetch('/api/leads', {
        method: 'POST',
        body: JSON.stringify(e.detail.data.lead)
      });
    }
  });
</script>