Building Blocks

// Your server. Browser code never sees KEY/SECRET.
app.post('/dropcowboy/token', async function (req, res) {
  const r = await fetch('https://api-v2.dropcowboy.com/phone/public/embed/token', {
    method: 'POST',
    headers: {
      'x-key': process.env.DC_KEY,
      'x-secret': process.env.DC_SECRET,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ site_id: process.env.DC_SITE_ID, scope: ['dialer:webrtc', 'contacts'], ttl_seconds: 900 })
  });
  const body = await r.json();
  if (!r.ok) return res.status(r.status).json(body);
  // The API wraps results in data. Hand the browser just the token.
  res.json({ token: body.data.token, expires_at: body.data.expires_at });
});

<script src="https://webforms.dropcowboy.com/latest/dropcowboy-dock.min.js"></script>
<script>
(async function () {
  const minted = await fetch('/dropcowboy/token', { method: 'POST' }).then(function (r) { return r.json(); });
  await DropCowboy.dock.init({
    token: minted.token,
    mode: 'floating',
    panes: ['dialer', 'inbox', 'contacts']
  });
  DropCowboy.dock.setTheme({ theme: 'LIGHT', primaryColor: '#009efb' });

  DropCowboy.dock.addPaneChangeListener(function (event) {
    console.log('dock pane', event.pane);
  });

  document.getElementById('contacts').addEventListener('click', function (e) {
    var row = e.target.closest('[data-contact-id]');
    if (!row) return;
    DropCowboy.dock.dial({
      contact: {
        id: row.getAttribute('data-contact-id'),
        name: row.getAttribute('data-name'),
        phone: row.getAttribute('data-phone')
      }
    });
  });
})();
</script>

curl -X POST https://api-v2.dropcowboy.com/sms \
  -H "x-key: $KEY" -H "x-secret: $SECRET" \
  -H "Content-Type: application/json" \
  -d '{"to":"+15125550148","phone_line_id":"e2b6f9a3-5c1d-4e8b-a4f7-9c3e1b5d7a28","body":"Hi from Drop Cowboy"}'