Skip to main content

dialstack-call-history

The call history Web Component displays a compact call history list for a specific phone number with direction indicators and AI-generated summaries.

Usage​

HTML
<dialstack-call-history></dialstack-call-history>

<script>
  // `dialstack` is your initialized instance (see the full example below)
  const element = document.querySelector('dialstack-call-history');
  element.setPhoneNumber('+14155551234');
  element.setInstance(dialstack);
</script>
Required: Phone Number

You must call setPhoneNumber() before the component will load data. The phone number must be in E.164 format (e.g., +14155551234).

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: CallHistoryClassesSet CSS classes
setOnLoaderStartcallback: (event) => voidSet loading callback
setOnLoadErrorcallback: (event) => voidSet error callback

CallHistory-Specific Methods​

MethodParametersDescription
setPhoneNumberphoneNumber: stringRequired. Set phone number (E.164 format)
setLimitlimit: numberMax calls to display (1-20, default 5)
setDisplayOptionsoptions: CallHistoryDisplayOptionsShow/hide UI elements

Configuration Examples​

Phone Number and Limit​

JavaScript
const callHistory = document.querySelector('dialstack-call-history');

callHistory.setPhoneNumber('+14155551234');
callHistory.setLimit(10); // Show up to 10 calls (default is 5)

Display Options​

JavaScript
callHistory.setDisplayOptions({
  showDuration: true, // Show call duration
  showRelativeTime: true, // Show "2 min ago", "Yesterday", etc.
  showDirectionIcon: true, // Show inbound/outbound/missed/voicemail icon
});

Formatting​

JavaScript
callHistory.setFormatting({
  dateLocale: 'en-US', // BCP 47 language tag
  use24HourTime: false, // 12-hour vs 24-hour
});

Layout and Styling​

JavaScript
callHistory.setLayoutVariant('comfortable');

callHistory.setClasses({
  base: 'my-call-history',
  list: 'my-list',
  item: 'my-item',
  itemInbound: 'my-item--inbound',
  itemOutbound: 'my-item--outbound',
  itemMissed: 'my-item--missed',
  itemVoicemail: 'my-item--voicemail',
  icon: 'my-icon',
  time: 'my-time',
  duration: 'my-duration',
});

Call Types and Icons​

The component displays different icons based on call type:

TypeIcon ColorDescription
Inbound (completed)GreenSuccessfully answered incoming call
Outbound (completed)BlueSuccessfully connected outgoing call
MissedRedUnanswered incoming call
VoicemailPurpleCaller left a voicemail

AI Summaries​

For completed calls and voicemails, the component displays an AI-generated summary of the conversation. The summary appears below the call information with a distinctive "AI Summary" badge.

JavaScript
// AI summaries are shown automatically for:
// - Completed inbound calls
// - Completed outbound calls
// - Voicemails

The summary provides a concise overview of the call content, making it easy to quickly understand what was discussed without listening to recordings.

Event Handlers​

onLoadError​

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

onLoaderStart​

JavaScript
callHistory.setOnLoaderStart((event) => {
  console.log('Loading call history...');
});

Complete Example​

HTML
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@dialstack/sdk-js"></script>
    <style>
      .call-history-container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="call-history-container">
      <h1>Recent Calls</h1>
      <dialstack-call-history></dialstack-call-history>
    </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 callHistory = document.querySelector('dialstack-call-history');

      // Required: Set phone number
      callHistory.setPhoneNumber('+14155551234');

      // Configure
      callHistory.setLimit(5);

      callHistory.setDisplayOptions({
        showDuration: true,
        showRelativeTime: true,
        showDirectionIcon: true,
      });

      callHistory.setFormatting({
        dateLocale: 'en-US',
        use24HourTime: false,
      });

      callHistory.setLayoutVariant('default');

      // Event handlers
      callHistory.setOnLoadError((event) => {
        console.error('Load error:', event.error);
      });

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

Use Cases​

Customer Context Panel​

Display recent interactions when a customer calls in:

HTML
<div class="screen-pop">
  <h2>Customer History</h2>
  <dialstack-call-history id="customer-history"></dialstack-call-history>
</div>

<script>
  const callHistory = document.getElementById('customer-history');
  callHistory.setPhoneNumber(incomingCallerNumber);
  callHistory.setLimit(3);
  callHistory.setLayoutVariant('compact');
</script>

Patient Records​

Show call history in a healthcare patient record:

HTML
<div class="patient-panel">
  <h3>Recent Calls</h3>
  <dialstack-call-history id="patient-calls"></dialstack-call-history>
</div>

<script>
  const callHistory = document.getElementById('patient-calls');
  callHistory.setPhoneNumber(patient.phone);
  callHistory.setLimit(10);
  callHistory.setClasses({
    base: 'border rounded-lg',
  });
</script>

Next Steps​

On this page