Skip to main content

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​

MethodParametersDescription
setInstanceinstance: DialStackInstanceSet SDK instance
setLocalelocale: LocaleSet UI strings
setFormattingoptions: FormattingOptionsSet date/phone formatting
setIconsicons: ComponentIconsSet custom SVG icons
setLayoutVariantvariant: 'compact' | 'comfortable' | 'default'Set layout density
setClassesclasses: CallLogsClassesSet CSS classes
setOnLoaderStartcallback: (event) => voidSet loading callback
setOnLoadErrorcallback: (event) => voidSet error callback

CallLogs-Specific Methods​

MethodParametersDescription
setDateRange{ start?: string; end?: string }Filter by date range
setDisplayOptionsoptions: CallLogDisplayOptionsShow/hide columns
setCustomRowRendererrenderer: (call) => stringCustom row HTML
setOnRowClickcallback: (event) => voidRow 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​

On this page