Table of Contents

Different ways to embed Videos in Landbot

Pau Sanchez Updated by Pau Sanchez

Video is a great way to communicate and in Landbot we know it. Here is a Demo where you can see the 3 different ways Landbot let you do it.

In Landbot v3

Videos that are not using our native integration with Youtube, to be displayed in your site, the best approach would be to:

  1. Go to the Design > Custom Code > Add CSS Section, and add the following code:
.videoiframe {width: calc(55vh); height: calc(36vw); max-height: 300px; }

@media screen and (max-width: 767px){
.videoiframe {width: calc(70vw); margin-top: 0.2vh;}
}
  1. Now in the builder before the block where we want to display the video, we will use a Set Variable block, and a Send Message block where we are going to display the video:

  1. In the Set Variable block, we are going to create a variable (type string) that has the name of @videosnippet
    And we are going to add the following value to the Set Variable:
<div><iframe src=""class = "videoiframe" allow="autoplay; fullscreen"></iframe></div>
  1. In the next block where we want to display the video, we will add the variable recently created
  2. Now in the Set Variable, we will add the link that the video platform has given to us in the src="" field:

If the url is displayed in the Set Variable block as a HYPERLINK like in the picture below IT WILL NOT WORK. Make sure when you paste it that is just plain text:

In Landbot v2

Specifically:

1. 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:


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

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

2. 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:


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

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 need to adapt it, just use the code below and change the id of for the one in your video. In the example below the id is 311210434.

Here is the code:

<iframe src="https://player.vimeo.com/video/417790753?title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Make sure the url is not a hyperlink, just plain text. If you see the url displayed with underline it won't work. To edit it, you can use your text editor to "unlink" it
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?

Pop up modal to embed third party elements

How to embed a .gif file inside a message

Contact