You can make the most of your video content and create dynamic conversation by inserting videos directly into your bots. As the videos are not hosted natively, this won’t negatively impact any page load speeds.
We support embedded videos from YouTube, Vimeo. If you need to embed videos from any other source, contact your Customer Success Manager for support.
Embedding an image or video into a ChatBot, InpageBot or VisualBot
How to add an image
1. Open up your bot in the editor
2. Choose the node you want to add it to and open it to edit
3. At the top of the node, you’ll see the option to add an image or video. Click to expand.
3. To add an image, click to open your image library and add the image you wish to use and change the settings as you wish for the location and size.
In VisualBots, you can already easily add images to answers, but you can use the same method above to add images above the answers with a few more options for location and size.
How to add a video
1. Select the video tab
2. Copy and paste the URL of the video from YouTube or Vimeo
3. Select the size, location and start point settings you wish to use
How to add images and videos with greater control
From YouTube
1. Click the share button below the YouTube video you want to use
2. Select the embed option, copy this code and paste it into the Question area of a BotSays, SingleChoice or MultipleChoice node.
3. Highlight your text and convert it to a code block by clicking the icon in the top-right corner of the box. You’ll notice that the text will now be in a grey box with an HTML tag in the corner.
4. Change the width to 100% and the height to auto. This will ensure your video resizes dynamically.
From Vimeo
1. Either click “Copy embed code” from the pop-up menu under the 3 dots in your library or, click the embed button at the top of the page.
2. Follow steps 2-4 from the YouTube instructions.
From Wistia
Embedding videos from Wistia is a little trickier than YouTube and Vimeo as you can’t use the embed code produced from the platform but an iframe code as mentioned in their article here – https://support.wistia.com/en/articles/8233354-embedding-and-sharing-media.
1. Find the code for your video from the link URL which will look something like this: https://wistia.com?wvideo=pj1mryf8bi or https://acmeinc.wistia.com/medias/pj1mryf8bi
2. Use this code and replace the highlighted video ID with yours:
<iframe src="https://acmeinc.wistia.com/medias/pj1mryf8bi?seo=true&videoFoam=false" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" msallowfullscreen="" width="100%" height="auto"></iframe>3. Follow steps 2-4 from the YouTube instructions.
Embedding a video in a VisualBot
Embedding a video in a visualbot is much the same as adding them to an InpageBot or ChatBot but to ensure the video always scales correctly you need to add some extra information to the code you are using.
1. Copy the URL or video ID of your video from YouTube, Vimeo or Wistia as above so that would be:
– YouTube: https://www.youtube.com/embed/e9lxFPrccfY?si=qW4IYfZPwp4UrQQX
– Vimeo: https://player.vimeo.com/video/812054001?badge=0&autopause=0&player_id=0&app_id=58479
– Wistia: https://acmeinc.wistia.com/medias/pj1mryf8bi?seo=true&videoFoam=false
2. Replace the Video URL in the code below and follow steps 2-4 from the YouTube instructions.
<div class="embed-container" style=" position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; width: 800px;"><iframe src="https://www.youtube.com/embed/e9lxFPrccfY?si=qW4IYfZPwp4UrQQX" frameborder="0" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; "></iframe></div>
If you need help, please reach out to your Customer Success Manager.
