Custom Video Background

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

To change the Video Background for one of your own, you need a video hosted in public accessible url (that you can access from your browser) and this video should be in .mp4 format. DEMO

Note: Youtube hosted videos are not valid for this workaround.

  1. First of all go to the Design section

  1. Then select "Colors & Background", and on "Video", select any of the available options and press "Apply"

  1. Inside the Design section, select "Advanced"

  1. Copy and paste the following code in the "Add JS (Custom scripts)" editor
<script>

const videoSource = 'https://static.landbot.io/support/video.mp4'; //EXAMPLE URL, PLEASE CHANGE IT


(function (){
document.getElementById("bgvid").childNodes[0].remove()
document.getElementById("bgvid").childNodes[0].setAttribute('src', videoSource );
document.getElementById("bgvid").load()
}());
// ualee_059 //
</script>

  1. Now to add your video url, just change it in the videoSource variable, as shown below
const videoSource = '{PASTE YOUR VIDEO URL HERE}';

Should look something like this:

const videoSource = 'https://static.landbot.io/support/video.mp4'; 

Bear in mind that: The size of the video can affect the loading times. The video will play on a loop. If you use Jump Bot block, this workaround won't work. Sound is disabled.

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?