Table of Contents

How to control embedded videos with custom code

Desirée M Updated by Desirée M

Custom code lets your agent show a video from a host the Media block doesn't support inside the chat, and hide the chat's buttons until a visitor has watched a video to the end. For YouTube, Vimeo and Wistia videos you don't need any code: the Media block embeds them with Video Embed.

These scripts are workarounds for developers, not built-in features, and a platform update can stop them working. Landbot support can only help with them in a limited way.

How to show a video from another host in the chat

To show a video the Media block can't embed, save the host's embed code in a Field with a Set a field block, then add that Field to a Send a message block. The chat turns the Field's HTML into a real video player, as long as the host allows its videos to be embedded on other sites.

1️⃣ Copy the video's embed code (an <iframe>) from the video host, and add style="width:100%;aspect-ratio:16/9;border:0" to it, so the video fills the message bubble at a 16:9 shape.

2️⃣ Add a Set a field block. In Field to edit, create a Text Field, for example calm_video, and paste the embed code in Type the value as plain text (Cmd+Shift+V on Mac, Ctrl+Shift+V on Windows). A paste that keeps a link saves the address twice, as link (link), and the video doesn't load.

3️⃣ In the next Send a message block, add the Field as its own message with Use field.

In this example, a yoga studio agent, Bamboo Yoga, offers a 🌊 Take a calm break option that plays a short waterfall video hosted on Wikimedia Commons, a host Video Embed doesn't accept. The Bamboo Yoga agent saves this embed code in @calm_video:

<iframe src="https://commons.wikimedia.org/wiki/File:Video_from_behind_Kawaida_Waterfall_through_hanging_roots,_Kiambu_County.webm?embedplayer=yes" style="width:100%;aspect-ratio:16/9;border:0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Set a field panel saving an iframe embed code in the calm_video Field, next to the Bamboo Yoga flow

When a visitor clicks 🌊 Take a calm break, the Bamboo Yoga agent sends "Breathe in, breathe out 🌊" followed by the video player, inside the chat:

Chat showing a waterfall video from Wikimedia Commons playing inside a message bubble
The style attribute in the embed code sizes the video, so this method needs no Custom CSS.

How to hide the buttons until a video ends

To make visitors watch a video before they can move on, show the video with a <video> tag that has the class watch-to-continue, and add a script in Design > Custom code that hides the chat's buttons until that video ends. Use it when the video matters more than a quick glance, such as a safety briefing before a booking.

1️⃣ Get a public link to the video file, such as an .mp4 on your website or storage.

2️⃣ Add a Set a field block. Create a Text Field, for example safety_video, and type this value in Type the value, with your link in src:

<video class="watch-to-continue" controls playsinline src="https://example.com/safety-video.mp4"></video>

3️⃣ In the next Send a message block, add the Field as its own message with Use field, and follow it with the Buttons block the visitor answers after the video.

4️⃣ Go to Design > Custom code > Add JS (Custom scripts), paste the script below, click Apply and publish the agent.

Set a field panel saving a video tag with the watch-to-continue class in the safety_video Field
<script>
// Hide the chat's buttons until every video with the class "watch-to-continue" has ended
var landbot = this;
this.onLoad(function () {
  var chat = landbot.document;
  var style = chat.createElement('style');
  style.textContent = 'body.video-locked .input-button { visibility: hidden; }';
  chat.head.appendChild(style);
  new MutationObserver(function () {
    chat.querySelectorAll('video.watch-to-continue:not([data-lock])').forEach(function (video) {
      video.setAttribute('data-lock', 'on');
      chat.body.classList.add('video-locked');
      video.addEventListener('ended', function () {
        video.setAttribute('data-lock', 'done');
        if (!chat.querySelector('video.watch-to-continue[data-lock="on"]')) {
          chat.body.classList.remove('video-locked');
        }
      });
    });
  }).observe(chat.body, { childList: true, subtree: true });
});
</script>
Custom code panel with the hide-buttons script in Add JS Custom scripts

The script hides every button in the chat while a watch-to-continue video is on screen and unwatched, and shows them again when the video's ended event fires. Videos without the class don't affect the buttons.

In this example, the Bamboo Yoga agent asks first-time visitors to watch a 15-second "What to bring" video before they book, and the I'm ready to book 🧘 button appears only when the video ends:

Chat where the I'm ready to book button appears only after the 15-second video ends
Custom code runs on your published agent only, not in the builder's Preview, so test it on your website or on the agent's share link.

For developers: on an embedded agent, Custom JS runs in your website's page, not inside the chat. this is the Landbot agent, and this.document is the chat's own page, which is why the script works on the chat through landbot.document. Read more about the HTML <video> element on w3schools.

Was this article helpful?

Media block

Contact