> For the complete documentation index, see [llms.txt](https://docs.satisfilabs.com/resource-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.satisfilabs.com/resource-center/ai-agent-engine/manage-your-content/response-types/prewritten-plus-responses/enrichments/videos.md).

# Videos

## Embed a Video

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FIdV5AvRmKrBU54FCgp4v%2Fembed%20video.mp4?alt=media&token=66f2fae5-c221-4f7e-8866-6dea28b416b7>" fullWidth="true" %}

1. In the Satisfi Labs dashboard, go to **Studio -> NLP Manager -> Responses**
2. Click the response you wish to update and select the pencil icon
3. Switch to **Code View**
4. Add the following line and hit enter:

```
#HTML
```

5. Copy and paste your desired video's embed code into your response. For example:

{% code overflow="wrap" %}

```
<iframe width="315" height="200" src="https://www.youtube.com/embed/XBPQE84h1mI" title="Learn more about Bridge Live Chat" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
```

{% endcode %}

To find your video's embed code, use the instructions in the table below:

{% tabs %}
{% tab title="YouTube" %}

<div data-full-width="true"><figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FMU5Xlkva9t7jJFPY9sW3%2Fimage.png?alt=media&amp;token=ad9e709c-c14b-4d6f-a11e-95b8fc2bed93" alt=""><figcaption></figcaption></figure></div>

1. Find your desired video
2. Right-click the video and select Copy Embed Code
   {% endtab %}

{% tab title="Vimeo" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FwWiSIyN4KHRKcx0LhpvJ%2FVimeo%20Embed%20Code.gif?alt=media&amp;token=1bf48ad5-f7be-47bb-906f-36ed522df261" alt=""><figcaption></figcaption></figure>

1. Find your desired video
2. Click on **Share**
3. Copy the embed code
   {% endtab %}

{% tab title="Other Sources" %}
For video files hosted on other sites, you can use the code below to host your video within a response. You will need to swap out the URL and title placeholders. Note that certain video permissions and policy guidelines may restrict you from iframing a video.

{% code overflow="wrap" %}

```
<iframe width="315" height="200" src="YOUR VIDEO URL" title="VIDEO TITLE" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Note that you cannot host videos on your dashboard. Only image and GIF files are supported within the image library.
{% endhint %}

6. Adjust the embed code as needed and add response text:

{% tabs %}
{% tab title="Adjust Size" %}
There is no set video width and height we recommend, as chat containers vary in size. We recommend adjusting the width to 315 and the height to 200 to start; however, test the video response in your chat and make further adjustments as needed. &#x20;
{% endtab %}

{% tab title="Autoplay" %}
We recommend removing autoplay from the embed code; however, you can choose to keep it if you'd like.
{% endtab %}

{% tab title="Response Text" %}
Don't forget to add text to your response! After your embed code, write your response as shown in the example below:

{% code overflow="wrap" %}

```
<iframe width="315" height="200" src="YOUR VIDEO URL" title="VIDEO TITLE" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> ADD YOUR RESPONSE TEXT HERE. THIS WILL APPEAR IN ADDITION WITH THE VIDEO!
```

{% endcode %}
{% endtab %}
{% endtabs %}

7. Publish your response and test it in your chat. You may need to resize the iframe to ensure the video is not cut off.&#x20;

## **Best Practices**

### **Keep Users Engaged**

{% tabs %}
{% tab title="Why it Helps" %}
Including videos can make the chatbot interface more appealing and retain user attention compared to text. A visually captivating chatbot can enhance the overall user experience, making interactions more pleasant and memorable.
{% endtab %}

{% tab title="Examples" %}
&#x20; ![](https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FUmW8gva1AfFmhTrxDvwF%2Fimage.png?alt=media\&token=fda64783-7c0b-451c-a0f7-93b138d4a459)  ![](https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2Fx6Pk19fiQdjb2a5WkjhZ%2Fimage.png?alt=media\&token=3da790a0-f268-4840-9d20-2018c76aa3c2)
{% endtab %}
{% endtabs %}

### **Connect Emotionally**&#x20;

{% tabs %}
{% tab title="Why it Helps" %}
Videos have the power to evoke emotions. By choosing the right visuals, your chatbot can connect on a more personal level with users.
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2FQdxmzVtrzOooLO16LRg9%2Fimage.png?alt=media&amp;token=d5d51658-43a0-4f4f-910e-64b44f2614f9" alt="" width="375"><figcaption><p>A Sizzle Reel or Promotional Video Can Invoke Strong Fan Emotions and Promote Sales</p></figcaption></figure>
{% endtab %}
{% endtabs %}

### **Assist Visual Learners**

{% tabs %}
{% tab title="Why it Helps" %}
Videos can play a functional role by guiding users through complex instructions, such as downloading an app or accessing their event tickets.&#x20;
{% endtab %}

{% tab title="Example" %}

<figure><img src="https://167344003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsxN9AGLZMIc5C8dx3zU7%2Fuploads%2F9TqItxHQ8r6dCWLLyD12%2Fimage.png?alt=media&amp;token=0ca951b4-56c7-4681-9ce8-d49dea0d2abd" alt="" width="323"><figcaption><p>Video Walkthrough of How to Download the App</p></figcaption></figure>
{% endtab %}
{% endtabs %}