VoiceTopics Sharing Guide

Overview

VoiceTopics provides multiple ways to share your audio content with your audience. This guide covers all available sharing methods, embedding options, and customization features.

Table of Contents

Sharing Options

VoiceTopics offers three primary sharing methods:

  1. Microsite - A dedicated page with all your VoiceTopics content
  2. Playlist Embed - An embeddable player showing multiple VoiceTopics
  3. Single Content Embed - An embeddable player for individual VoiceTopics

Microsite

Every organization has a personal VoiceTopics microsite that displays all published content in one convenient location.

Accessing Your Microsite

Your microsite URL follows this format:

https://voicetopics.xyz/#/listen/{organizationId}

Example:

https://voicetopics.xyz/#/listen/org-50fe4f0c04bf

Users can browse all your VoiceTopics, filter by groups/categories, and play audio directly from this page.

Embeddable Player

Playlist Embed

The playlist embed displays a scrollable list of your VoiceTopics with playback controls.

Basic Playlist Embed

<!-- VoiceTopics Playlist Embed -->
<!-- Recommended dimensions: 400px × 600px -->
<div style="display: flex; justify-content: center;">
  <iframe
    src="https://voicetopics.xyz/#/listen/{organizationId}"
    width="400"
    height="600"
    style="border: 1px solid #ccc;">
  </iframe>
</div>

Filtered Playlist (by Group)

To show only VoiceTopics from a specific group/category, add the groupId parameter:

<div style="display: flex; justify-content: center;">
  <iframe
    src="https://voicetopics.xyz/#/listen/{organizationId}?groupId={groupId}"
    width="400"
    height="600"
    style="border: 1px solid #ccc;">
  </iframe>
</div>

Single Content Embed

Embed individual VoiceTopics with two style options: compact or minimal.

Compact Style

The compact style shows the full player interface with title, metadata, and controls.

Recommended dimensions: 400px × 325px

<!-- VoiceTopics Single Content Embed (Compact) -->
<div style="display: flex; width: 100%; justify-content: center;">
  <iframe
    src="https://voicetopics.xyz/#/listen/{contentId}?style=compact"
    width="400"
    height="325"
    style="border: 1px solid #ccc; min-width: 400px; width: 400px; min-height: 325px; height: 325px;">
  </iframe>
</div>

Minimal Style

The minimal style shows a condensed player bar, perfect for inline embedding.

Recommended dimensions: 350px × 80px

<!-- VoiceTopics Single Content Embed (Minimal) -->
<div style="display: flex; width: 100%; justify-content: center;">
  <iframe
    src="https://voicetopics.xyz/#/listen/{contentId}?style=minimal"
    width="350"
    height="80"
    style="border: 1px solid #ccc; min-width: 350px; width: 350px; min-height: 80px; height: 80px;">
  </iframe>
</div>

Sharing Settings

Customize the appearance and behavior of embedded players through sharing settings available in the VoiceTopics web interface (Settings → Sharing).

Available Settings

Setting Description Options
Container class name CSS class applied to the outer div wrapper Any valid CSS class name
Iframe class name CSS class applied to the iframe element Any valid CSS class name
Alignment Horizontal alignment of the embedded player Left, Center, Right, Full Width
Background color Background color for the embed container Any valid hex color

Alignment Options

  • Left (start) - Aligns the player to the left
  • Center (center) - Centers the player horizontally (default)
  • Right (end) - Aligns the player to the right
  • Full Width (fullWidth) - Stretches the player to fill available width

Example with Custom Styling

<div style="display: flex; justify-content: start;" class="vt-container">
  <iframe
    src="https://voicetopics.xyz/#/listen/{contentId}?style=minimal"
    class="vt-iframe"
    width="350"
    height="80"
    style="border: 1px solid #ccc;">
  </iframe>
</div>

Full Width Example

When using full width alignment, the iframe adapts to its container:

<div style="display: flex; width: 100%; justify-content: stretch;">
  <iframe
    src="https://voicetopics.xyz/#/listen/{contentId}?style=minimal"
    height="80"
    style="border: 1px solid #ccc; min-width: 100%; width: 100%; min-height: 80px; height: 80px;">
  </iframe>
</div>