WistiaEmbed

WistiaEmbed component: embed Wistia videos with enterprise popover, chapter markers, and advanced analytics integration

Overview

WistiaEmbed integrates Wistia's enterprise video hosting platform into your tours. Wistia provides advanced analytics, lead generation, and customization options ideal for B2B products and marketing.

Why Use WistiaEmbed?

Enterprise analytics: Detailed engagement heatmaps and viewer insights
Lead generation: Collect emails with in-video forms (Turnstile)
A/B testing: Test different videos and CTAs
SEO optimized: Video sitemaps and schema markup
Customization: Full control over player appearance and behavior

Basic Usage

import { WistiaEmbed } from '@tour-kit/media'

export function ProductDemo() {
  return (
    <WistiaEmbed
      videoId="abc123xyz"
      title="Enterprise product demo"
    />
  )
}

Props

Prop

Type

Examples

Auto-playing Demo Video

<WistiaEmbed
  videoId="abc123xyz"
  title="Product walkthrough"
  autoplay
  muted
/>

Clean Minimal Player

Hide controls until user hovers:

<WistiaEmbed
  videoId="abc123xyz"
  title="Feature showcase"
  controlsVisibleOnLoad={false}
/>

Branded Player Color

Match your brand identity:

<WistiaEmbed
  videoId="abc123xyz"
  title="Branded demo"
  playerColor="6366f1" // Indigo-500
/>

The playerColor prop expects a hex color without the # symbol. For example, use "ff0000" instead of "#ff0000".

Start at Specific Time

Jump to the most relevant section:

<WistiaEmbed
  videoId="abc123xyz"
  title="Advanced features"
  startTime={120} // Start at 2:00
/>

Looping Background Video

Perfect for hero sections:

<WistiaEmbed
  videoId="abc123xyz"
  title="Platform overview"
  autoplay
  muted
  loop
  controlsVisibleOnLoad={false}
  size="full"
/>

Vertical Video for Mobile

Mobile app demonstrations in portrait:

<WistiaEmbed
  videoId="abc123xyz"
  title="Mobile app tour"
  aspectRatio="9/16"
  size="sm"
  rounded="lg"
/>

Extracting Video IDs

Wistia video IDs are alphanumeric strings found in URLs:

import { extractWistiaId, isWistiaUrl } from '@tour-kit/media'

const url = 'https://company.wistia.com/medias/abc123xyz'

if (isWistiaUrl(url)) {
  const videoId = extractWistiaId(url)
  return <WistiaEmbed videoId={videoId} title="Video" />
}

Supported URL formats:

https://yourcompany.wistia.com/medias/abc123xyz
https://fast.wistia.net/embed/iframe/abc123xyz
https://home.wistia.com/medias/abc123xyz

Enterprise Features

Wistia offers advanced features for enterprise customers:

Video Analytics

Track detailed engagement metrics:

Watch time and completion rates
Engagement graphs showing drop-off points
Individual viewer tracking
Aggregated performance data

Access analytics on your Wistia dashboard.

Lead Generation (Turnstile)

Collect emails with in-video forms:

Enable Turnstile in Wistia video settings
Configure timing (e.g., at 50% or end of video)
Leads sync to your CRM automatically
Works in embedded videos

// Embed video with Turnstile configured on Wistia
<WistiaEmbed
  videoId="abc123xyz"
  title="Product demo with email gate"
/>

A/B Testing

Test different videos or CTAs:

Create video variants in Wistia
Set up A/B test parameters
Wistia automatically serves variants
Track performance in analytics

Chapters and Annotations

Add interactive chapters and clickable annotations:

Configure in Wistia video editor
Chapters appear automatically in embed
Users can jump between sections
Annotations can link to external pages

Advanced features like Turnstile, A/B testing, and annotations are configured on wistia.com and work automatically in embeds.

Accessibility

Required Title Prop

Provide descriptive titles for screen readers:

// Good - describes the content
<WistiaEmbed
  videoId="abc123xyz"
  title="Tutorial: Setting up SSO for enterprise accounts"
/>

// Bad - too generic
<WistiaEmbed
  videoId="abc123xyz"
  title="Wistia video"
/>

Captions

Add captions for accessibility compliance:

Upload caption file on wistia.com (SRT, VTT, etc.)
Captions display automatically in player
Users can toggle with CC button
Multiple language support

Wistia player supports keyboard shortcuts:

Space or K - Play/Pause
Left/Right arrows - Seek backward/forward
Up/Down arrows - Volume up/down
F - Fullscreen
M - Mute/Unmute

Privacy and Compliance

Wistia provides GDPR-compliant features:

Consent management integration
Data processing agreements
EU data residency options (Enterprise plan)
Viewer data export/deletion tools

Privacy Settings

Control video privacy on wistia.com:

Public: Anyone with link can watch
Private: Requires account login
Domain restrictions: Limit embedding to specific domains
Password protection: Add password requirement

Privacy and compliance settings are configured on wistia.com. The WistiaEmbed component respects your configured settings.

Integration with Tours

Use Wistia's analytics to track onboarding engagement:

import { Tour, TourStep } from '@tour-kit/react'
import { WistiaEmbed } from '@tour-kit/media'

<Tour id="enterprise-onboarding">
  <TourStep id="welcome">
    <h2>Welcome to Our Platform</h2>
    <WistiaEmbed
      videoId="welcome-video"
      title="Platform introduction for new users"
      autoplay
      muted
    />
    <p>Learn the basics in 3 minutes</p>
  </TourStep>

  <TourStep id="advanced">
    <h2>Enterprise Features</h2>
    <WistiaEmbed
      videoId="enterprise-features"
      title="SSO, SCIM, and advanced security features"
      startTime={30}
    />
  </TourStep>
</Tour>

Track which users watched which videos in your Wistia analytics dashboard.

TypeScript

Full type safety with autocompletion:

import type { WistiaEmbedProps } from '@tour-kit/media'

const config: WistiaEmbedProps = {
  videoId: 'abc123xyz',
  title: 'Enterprise demo',
  autoplay: true,
  muted: true,
  playerColor: '6366f1',
  controlsVisibleOnLoad: false
}

<WistiaEmbed {...config} />

Building Custom Embed URLs

Construct Wistia embed URLs programmatically:

import { buildWistiaEmbedUrl } from '@tour-kit/media'

const embedUrl = buildWistiaEmbedUrl('abc123xyz', {
  autoplay: true,
  muted: true,
  controlsVisibleOnLoad: false,
  playerColor: 'ff0000'
})

console.log(embedUrl)
// https://fast.wistia.net/embed/iframe/abc123xyz?autoPlay=1&muted=1&controlsVisibleOnLoad=0&playerColor=ff0000

Wistia Pricing Considerations

Wistia is a paid platform with different tiers:

Free Plan:

3 videos
Basic analytics
No Turnstile or advanced features

Pro Plan:

Unlimited videos
Advanced analytics
Turnstile lead generation
A/B testing
Remove Wistia branding

Advanced/Enterprise:

Custom data retention
SSO integration
EU data residency
Dedicated support

Most enterprise features mentioned in this guide require a Pro or Advanced plan. Check wistia.com/pricing for current offerings.

Wistia vs Other Platforms

When to choose Wistia:

Choose Wistia when:

You need detailed video analytics
Lead generation is important
B2B product or enterprise customers
Want A/B testing capabilities
Budget allows for paid platform

Choose YouTube/Vimeo when:

Public content and SEO matter
Free hosting is required
Consumer-focused product
Simple embedding needs