Skip to main content

UI Features

These are interactive elements you can add to your transcripts. They're all off by default - enable the ones you want via options.

Puts a search bar at the top of the transcript. As you type, messages that don't match get hidden.

Option: enableSearch: true

const html = generateTranscriptHtml(data, {
  enableSearch: true,
});
  • Filters messages by text content as you type
  • Shows a match count (e.g. "12 matches")
  • Case-insensitive
  • Clear the input to show everything again

Jump-to-Date Navigation​

Shows a list of all dates in the transcript. Click any date to scroll right to it.

Option: enableDateNav: true

const html = generateTranscriptHtml(data, {
  enableDateNav: true,
});
  • Sits above the messages, showing each unique date
  • Clicking a date smooth-scrolls to that section
  • Keeps a compact layout

User Statistics​

Shows a stats section at the bottom with who talked the most and when.

Option: showUserStats: true

const html = generateTranscriptHtml(data, {
  showUserStats: true,
});

What you'll see:

  • Most Active Users - ranked by message count, with avatars and a bar chart
  • Activity by Hour - bar chart showing when messages were sent throughout the day

All stats are calculated from the messages in the transcript.

Copy Message Button​

Hover over any message and a copy icon shows up. Click it to copy the message text.

Option: enableCopyButton: true

const html = generateTranscriptHtml(data, {
  enableCopyButton: true,
});
  • Icon shows up in the top-right corner on hover
  • Copies plain text only (not the HTML/markdown)
  • Quick visual feedback when copied

Collapsible Embeds​

Each embed gets a small chevron you can click to collapse or expand it.

Option: collapsibleEmbeds: true

const html = generateTranscriptHtml(data, {
  collapsibleEmbeds: true,
});
  • A small chevron appears at the top of each embed
  • Click it to hide the body (description, fields, images, footer)
  • Title and author stay visible when collapsed
  • The chevron rotates to show the current state
  • Click again to expand

Image Lightbox​

Click any image to open it full-size in an overlay.

Option: enableLightbox: true

const html = generateTranscriptHtml(data, {
  enableLightbox: true,
});
  • Works on attachments, embed images, thumbnails, stickers, and media gallery items
  • Dark overlay with the image centered
  • "Open original" link to view it in a new tab
  • Close with Escape, click the backdrop, or hit the X
  • Images keep their aspect ratio

Using Everything Together​

You can turn on all of these at once:

const html = generateTranscriptHtml(data, {
  enableSearch: true,
  enableDateNav: true,
  showUserStats: true,
  enableCopyButton: true,
  collapsibleEmbeds: true,
  enableLightbox: true,
});