Table of Contents

Different ways to embed Videos in Landbot

Ana Updated by Ana

Video is a great way to communicate and in Landbot we know it.

For videos that are not using our native integration with YouTube, to be displayed on 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:

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?

How to embed a .gif file inside a message

Display video and hide button to continue until video has ended

Contact