OLD BUILDER - Ways to embed Videos in Landbot

This article corresponds to the V2 (Classic) of the app. You can check the equivalent for the new version V3 (Bricks) here

Video is a great way to communicate information, and in Landbot we understand that. Here are three main ways to that:

Here is a Demo where you can see the different ways

1. Native Youtube Integration

As you may know already, in the block Send A Message there is a possibility to add Youtube videos easily

Just press the "play" icon and add the Youtube url.

Then in the text area, a youtube placeholder text will show up. There you paste the video you want to show

And once pressed "Apply" a block like the one below will appear in the builder:

2. Videos hosted in a server with public access

Sometimes, our video is hosted in our site, and is not hosted in a video streaming service (like Youtube), but we have a url where is hosted, and we can access it directly from the browser.

Then the way to go is with the html5 <video> tag

{html}
<video width="320" height="240" controls>
<source src="https://static.landbot.io/support/video.mp4" type="video/mp4">
</video>
{/html}

Use the above code, and only replace it with the url of the location of your video

3. Videos stored in Google Drive

In some very specific cases we might find that we don't have an external video streaming service or a server where to store the video. Then google drive comes to the rescue, but only will be visible in Chrome Browser. Set up your video public and then grab the ID from the URL.

After just embed as below the code in your block:

{html}
<iframe src="https://drive.google.com/file/d/1CufAZW-umh6QAlfaOn163p-SXvm0OBZW/preview" width="320" height="240">
</iframe>
{/html}

Use the above code, just replace the id of the url, with the one of google drive

src="https://drive.google.com/file/d/{URL_ID}/preview"

Other video services:

Vimeo

There great streaming services, like Vimeo that offer their own custom code to embed in your site. In this case, we just need to add {html} {/html} and the code offered by Vimeo in between like below:

{html}
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/311210434?title=0&byline=0&portrait=0"
style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"
webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<p><a href="https://vimeo.com/311210434">The Basics of Landbot Building</a> from <a
href="https://vimeo.com/user93888596">Landbot</a> on <a
href="https://vimeo.com">Vimeo</a>.</p>
{/html}

When we select the embedding option from Vimeo, the best option is the Responsive

Wistia

Other great business option to host videos is Wistia. In case you are interested to use their service like above add their code in between the {html} {/html} tags.

Note that to be able to embed it in Landbot you need to use the Inline Embed / Fallback (iframe) Embed type.

These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.  Due to platform updates, some scripts might stop working in the future.Please, note that in case of Scripts and Workaround the Custom Success Team can deliver limited support.


How did we do?