Skip to main content

Web Components

Use DialStack components in any JavaScript application without React. The SDK provides native Web Components (Custom Elements) that work in vanilla JavaScript, Vue, Angular, Svelte, or any framework.

Quick Start​

Using CDN​

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@dialstack/sdk"></script>
  </head>
  <body>
    <dialstack-call-logs></dialstack-call-logs>
    <dialstack-voicemails></dialstack-voicemails>

    <script>
      // Initialize DialStack
      const dialstack = DialStack.initialize({
        publishableKey: 'pk_live_YOUR_KEY',
      });

      // Fetch client secret from your backend
      fetch('/api/dialstack/session', { method: 'POST' })
        .then((res) => res.json())
        .then((data) => {
          // Set client secret on components
          document.querySelector('dialstack-call-logs').setClientSecret(data.client_secret);
          document.querySelector('dialstack-voicemails').setClientSecret(data.client_secret);
        });
    </script>
  </body>
</html>

Using ES Modules (Pure Import)​

For bundled applications without React:

import { loadDialstackAndInitialize } from '@dialstack/sdk/pure';

async function init() {
  const dialstack = await loadDialstackAndInitialize({
    publishableKey: 'pk_live_YOUR_KEY',
    appearance: {
      theme: 'auto',
    },
  });

  // Create components programmatically
  const callLogs = dialstack.create('call-logs');
  document.getElementById('call-logs-container').appendChild(callLogs);

  // Set client secret
  const session = await fetchSession();
  callLogs.setClientSecret(session.client_secret);
}

init();

Initialization​

UMD (Browser Global)​

When using the CDN, DialStack is available as a global:

const dialstack = DialStack.initialize({
  publishableKey: 'pk_live_YOUR_KEY',
  appearance: {
    theme: 'light',
    variables: {
      colorPrimary: '#6772E5',
    },
  },
});

ES Module (Pure)​

For bundled apps, use the pure import:

import { loadDialstackAndInitialize } from '@dialstack/sdk/pure';

const dialstack = await loadDialstackAndInitialize({
  publishableKey: 'pk_live_YOUR_KEY',
});

DialStackInstance API​

The instance returned from initialize() or loadDialstackAndInitialize() provides these methods:

create(tagName)​

Create a component element:

const callLogs = dialstack.create('call-logs');
const voicemails = dialstack.create('voicemails');

// Append to DOM
document.getElementById('container').appendChild(callLogs);

update(options)​

Update appearance for all components:

dialstack.update({
  appearance: {
    theme: 'dark',
    variables: {
      colorPrimary: '#8B5CF6',
    },
  },
});

logout()​

Clear session and destroy all components:

dialstack.logout();

Component Element Methods​

All component elements share these common methods:

MethodDescription
setClientSecret(secret)Set the session token
setInstance(instance)Set the DialStack instance
setLocale(locale)Set UI locale
setFormatting(options)Set date/phone formatting
setIcons(icons)Set custom icons
setLayoutVariant(variant)Set layout density
setClasses(classes)Set CSS classes
setOnLoaderStart(callback)Set loading callback
setOnLoadError(callback)Set error callback

Available Components​

Tag NameDescription
<dialstack-call-history>Compact call history for a phone number
<dialstack-call-logs>Call history table
<dialstack-voicemails>Voicemail list with playback

Event Handling​

Set event handlers using setter methods:

const callLogs = document.querySelector('dialstack-call-logs');

callLogs.setOnLoadError((event) => {
  console.error('Load failed:', event.error);
});

callLogs.setOnRowClick((event) => {
  console.log('Clicked call:', event.callId);
});

Framework Integration​

Vue.js​

<template>
  <div>
    <dialstack-call-logs ref="callLogs"></dialstack-call-logs>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { loadDialstackAndInitialize } from '@dialstack/sdk/pure';

const callLogs = ref(null);

onMounted(async () => {
  const dialstack = await loadDialstackAndInitialize({
    publishableKey: 'pk_live_YOUR_KEY',
  });

  const session = await fetchSession();
  callLogs.value.setClientSecret(session.client_secret);
});
</script>

Angular​

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { loadDialstackAndInitialize } from '@dialstack/sdk/pure';

@Component({
  selector: 'app-voice-dashboard',
  template: ` <dialstack-call-logs #callLogs></dialstack-call-logs> `,
})
export class VoiceDashboardComponent implements OnInit {
  @ViewChild('callLogs') callLogsRef!: ElementRef;

  async ngOnInit() {
    const dialstack = await loadDialstackAndInitialize({
      publishableKey: 'pk_live_YOUR_KEY',
    });

    const session = await this.sessionService.create();
    this.callLogsRef.nativeElement.setClientSecret(session.client_secret);
  }
}

Svelte​

<script>
  import { onMount } from 'svelte';
  import { loadDialstackAndInitialize } from '@dialstack/sdk/pure';

  let callLogsEl;

  onMount(async () => {
    const dialstack = await loadDialstackAndInitialize({
      publishableKey: 'pk_live_YOUR_KEY',
    });

    const session = await fetchSession();
    callLogsEl.setClientSecret(session.client_secret);
  });
</script>

<dialstack-call-logs bind:this={callLogsEl}></dialstack-call-logs>

Next Steps​