Overview

The Web Widget now supports adding custom thumbnails to video replies in chatbot conversations. This feature allows chatbot users to set a desired thumbnail for video replies, enhancing user interaction by displaying a preview before the video plays.

Benefits:

• Improved user experience: Thumbnails give a visual hint about the video content, making it more engaging for users.
• Better engagement: Users are more likely to click on videos when an appealing thumbnail is present.
• Customizability: Chatbot developers can choose relevant thumbnails that match the context of the conversation.

Key Features

• Custom Thumbnails: You can now upload a specific thumbnail for each video the chatbot shares.
• Seamless Integration: The feature is designed to work natively with the Web Widget.
• Enhanced Accessibility: Thumbnails can provide context even before videos are played, offering better content understanding.

Prerequisites:

• The chatbot should be capable of sending video messages as part of the conversation.
• Thumbnail images must meet the recommended size and format (e.g., PNG/JPEG).

How to add video thumbnails from Flow Replies

To enhance your chatbot’s video replies with a custom thumbnail, follow these detailed steps:

1. Select a Flow
   Navigate to the Flow where you want to add a video response. In the Flow editor, locate the Replies section and drag any media-enabled reply element into your Flow. This is the area where you'll configure the media response for your chatbot.
2. Select Video as the Media Type
   In the media item dropdown list, select Video. This dropdown offers two options: Image and Video. Choosing Video will allow you to include a video file in the chatbot’s reply, which can be accompanied by a custom thumbnail image.
3. Provide the Video URL
   In the URL to the video field, paste the direct URL link to the video you want the chatbot to display. Ensure that the URL points to a valid, publicly accessible video file.
4. Add the Thumbnail URL
   In the URL to the video thumbnail field, enter the URL of the image you wish to use as the video’s thumbnail. This image will serve as the preview displayed in the chat before the video plays. Ensure the thumbnail URL links to a valid image file (such as PNG or JPEG), and the image is sized appropriately to fit within the Web Widget's display area.
5. Save and Preview the Changes
   Once you have added both the video and thumbnail URLs, click Save to apply the changes. You can then use the Try it out section above to test how the video and its thumbnail appear in the chatbot interface. This section allows you to see the full interaction in real time, ensuring that both the video and thumbnail work as expected.

📘

Important Note:

The thumbnail for the video must be added as a URL. The system does not support direct image uploads for thumbnails. Instead, ensure the thumbnail image is hosted online and accessible via a valid URL.

Thumbnail Relevance: Use thumbnails that are closely related to the content of the video to avoid misleading users.

FAQs

Q1: What happens if no thumbnail is added?

A: If no thumbnail is provided, the system will display a default video icon or a random frame from the video.

Q2: Can I change the thumbnail later if required?

A: Yes, you can replace the thumbnail by going to the video’s settings and updating it with a new image URL.

Q3: What file formats are supported for video thumbnails and maximum file size?

A: Thumbnails images must be URL links of images with an aspect ratio of 1.91:1 (width: height)format.
Conclusion

By enabling custom thumbnails for video replies in your Web Widget chatbot, you can improve user engagement and provide a richer, more interactive experience. This simple but effective feature enhances the clarity and appeal of chatbot-driven video communication.