Display video and hide button to continue until video has ended

Pau Sanchez Updated by Pau Sanchez

We might need sometimes to display media like videos, and make the user focus on the video and don't let the user continue until the video has ended.

Here is how you can make it in Landbot.

Here is the overview:

  1. First we need to get the block reference code where the media is located. To do that we press right click on the Send Message block:

And click to Copy the reference of the block. To make it simpler paste the reference in a Note block:

  1. Now we will create 3 set Variable blocks:

  1. In the first Set Variable we will store in the variable @noderef the node reference:

  1. In the second Set Variable we will add the url where the media is hosted

In this case we are using the example from w3schools, please check to know more about video tags

  1. In the third Set Variable block, we will add code that will trigger the video:
<script>window.hideButton('@{noderef}')</script><video controls onended="showButton()"><source src="@{mediasrc}"></video>
  1. And we connect it to the Send Message block:

  1. Now in the Design / Custom Code / Add JS section we will add the following snippet:

<script>
	var landbotScope = this;
  this.onLoad(function() {
    window.hideButton = function (ref) {
        landbotScope.document.styleSheets[0].insertRule(`[data-block="${ref}_0"] .input-button:nth-child(1){visibility:hidden`);
    }
		landbotScope.window.showButton = function () {
       landbotScope.document.styleSheets[0].cssRules[0].style.visibility = 'visible';
       landbotScope.document.styleSheets[0].cssRules[1].style.visibility = 'visible';
     	}
 	})
</script>

Note, that if you want to display more videos like that, this last snippet you just need to add it once

And that's it!

How did we do?

Different ways to embed Videos in Landbot

Contact