dialstack-call-logs

The call logs Web Component displays a paginated table of call history.

Usage

HTML

<dialstack-call-logs></dialstack-call-logs>

<script>
  // `dialstack` is your initialized instance (see the full example below)
  document.querySelector('dialstack-call-logs').setInstance(dialstack);
</script>

Methods

Common Methods

Method	Parameters	Description
setInstance	instance: DialStackInstance	Set SDK instance
setLocale	locale: Locale	Set UI strings
setFormatting	options: FormattingOptions	Set date/phone formatting
setIcons	icons: ComponentIcons	Set custom SVG icons
setLayoutVariant	variant: 'compact' | 'comfortable' | 'default'	Set layout density
setClasses	classes: CallLogsClasses	Set CSS classes
setOnLoaderStart	callback: (event) => void	Set loading callback
setOnLoadError	callback: (event) => void	Set error callback

CallLogs-Specific Methods

Method	Parameters	Description
setDateRange	{ start?: string; end?: string }	Filter by date range
setDisplayOptions	options: CallLogDisplayOptions	Show/hide columns
setCustomRowRenderer	renderer: (call) => string	Custom row HTML
setOnRowClick	callback: (event) => void	Row click callback

Automatic Pagination

Pagination is handled automatically by the component using cursor-based pagination. You don't need to manage cursors, offsets, or page state manually. The component automatically loads more data as needed. See the Pagination Guide for details.

Configuration Examples

Date Range Filtering

JavaScript

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

callLogs.setDateRange({
  start: '2025-01-01',
  end: '2025-01-31',
});

Display Options

JavaScript

callLogs.setDisplayOptions({
  showDate: true,
  showDirection: true,
  showFrom: true,
  showTo: true,
  showDuration: true,
  showStatus: true,
});

Formatting

JavaScript

callLogs.setFormatting({
  defaultCountry: 'US',
  dateLocale: 'en-US',
  use24HourTime: false,
  showTimezone: true,
});

Layout and Styling

JavaScript

callLogs.setLayoutVariant('comfortable');

callLogs.setClasses({
  base: 'my-call-logs',
  table: 'my-table',
  row: 'my-row',
  rowInbound: 'my-row--inbound',
  rowOutbound: 'my-row--outbound',
  pagination: 'my-pagination',
});

Event Handlers

onRowClick

JavaScript

callLogs.setOnRowClick((event) => {
  console.log('Call ID:', event.callId);
  console.log('Call data:', event.call);

  // Navigate to detail view
  showCallDetail(event.call);
});

onLoadError

JavaScript

callLogs.setOnLoadError((event) => {
  console.error('Error:', event.error);
  console.error('Element:', event.elementTagName);
});

Custom Row Renderer

Provide a function that returns HTML for each row:

JavaScript

callLogs.setCustomRowRenderer((call) => {
  const icon = call.direction === 'inbound' ? '📥' : '📤';
  const status = call.status === 'completed' ? '✓' : '✗';

  return `
    <div class="custom-row">
      <span class="icon">${icon}</span>
      <span class="number">${call.from_number} → ${call.to_number}</span>
      <span class="duration">${call.duration_seconds}s</span>
      <span class="status">${status}</span>
    </div>
  `;
});

Complete Example

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@dialstack/sdk-js"></script>
    <style>
      .call-logs-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="call-logs-container">
      <h1>Call History</h1>
      <dialstack-call-logs></dialstack-call-logs>
    </div>

    <script>
      // Initialize
      const dialstack = DialStack.initialize({
        publishableKey: 'pk_live_YOUR_KEY',
        fetchClientSecret: async () => {
          const res = await fetch('/api/dialstack/session', { method: 'POST' });
          const { client_secret } = await res.json();
          return client_secret;
        },
        appearance: {
          theme: 'light',
        },
      });

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

      // Configure
      callLogs.setDateRange({
        start: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
      });

      callLogs.setDisplayOptions({
        showDate: true,
        showDirection: true,
        showFrom: true,
        showTo: true,
        showDuration: true,
        showStatus: true,
      });

      callLogs.setFormatting({
        defaultCountry: 'US',
        use24HourTime: false,
      });

      callLogs.setLayoutVariant('comfortable');

      // Event handlers
      callLogs.setOnRowClick((event) => {
        alert(`Clicked call: ${event.callId}`);
      });

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

      // Wire the element to the initialized instance
      callLogs.setInstance(dialstack);
    </script>
  </body>
</html>

Next Steps

• voicemails Element - Voicemails reference
• Theming - Customize appearance
• i18n - Internationalization