---
title: "Wistia"
slug: "wistia-widget"
updated: 2026-04-17T07:46:55Z
published: 2026-04-17T07:46:55Z
canonical: "learn.servitly.com/wistia-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Wistia

Displays a video hosted on WISTIA.

![Wistia](https://components-manager.servitly.com/components/Wistia_1/IMAGES/_screenshot?owner=AG_Servitly)

For more details refer to the online [Wistia](https://wistia.com) documentation.

## Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

<wistia-widget title="Demo Video"
            styleClass="wistia-video-container"
            width="1200px" style="width:1200px"
            source="https://fast.wistia.com/embed/medias/j38ihh83m5.jsonp"
            [popover]="true">
</wistia-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Wistia `&lt;wistia-widget&gt;`

| *Popover* | The flag indicating whether the video must be opened in full-screen mode. **Name**: popover **Type**: BOOLEAN \| Optional **Default Value**: *false* `[popover]="true"` |
| --- | --- |
| *Source URL* | The URL of the video hosted by Wistia. **Name**: source **Type**: STRING \| Optional `source="abc"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Wistia'"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| *Width* | The width of the widget (e.g. 500px). **Name**: width **Type**: STRING \| Optional `width="500px"` |

## Full Syntax Example

```xml

<wistia-widget    
    [title]="'Wistia'"
    width="500px"
    source="abc"
    [popover]="true"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></wistia-widget>
```