JavaScript SDK

<button id="call-btn" disabled>
  <span class="status-dot"></span>
  Talk to Sales
</button>

<script src="https://www.callbird.com/sdk/v1/callbird.min.js"></script>
<script>
const callbird = new Callbird({ orgId: 'YOUR_ORG_ID' });
const btn = document.getElementById('call-btn');
const dot = btn.querySelector('.status-dot');

callbird.on('ready', function() {
  updateButton(callbird.availability);
});

callbird.on('availabilityChange', function(status) {
  updateButton(status.status);
});

function updateButton(status) {
  btn.disabled = status !== 'available';
  dot.className = 'status-dot status-' + status;
  btn.querySelector('span:last-child').textContent =
    status === 'available' ? 'Talk to Sales' : 'Team Offline';
}

btn.addEventListener('click', function() {
  callbird.startCall();
});
</script>

<style>
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.status-available { background: #22c55e; }
.status-busy { background: #f59e0b; }
.status-offline { background: #9ca3af; }
</style>

<form id="contact-form">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="text" name="company" placeholder="Company">
  <button type="submit">Start Video Call</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(this);

  callbird.startCall({
    visitor: {
      name: formData.get('name'),
      email: formData.get('email'),
      company: formData.get('company')
    }
  });
});
</script>

callbird.on('callStarted', function(data) {
  // Google Analytics 4
  gtag('event', 'call_started', {
    visitor_email: data.visitor?.email
  });

  // Segment
  analytics.track('Call Started', {
    visitorEmail: data.visitor?.email
  });
});

callbird.on('callEnded', function(data) {
  gtag('event', 'call_ended', {
    duration_seconds: data.duration,
    outcome: data.reason
  });

  analytics.track('Call Ended', {
    duration: data.duration,
    outcome: data.reason
  });
});

callbird.on('callConnected', function(data) {
  // Log to your CRM
  fetch('/api/log-call', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      agent: data.connectedUserName,
      sessionId: data.sessionId
    })
  });
});