Table of Contents

Media block

Desirée M Updated by Desirée M

The Media block sends an image, a GIF, a video, an audio or a file such as a PDF in the chat, then moves straight on to the next block without waiting for the visitor.

Prefer watching? The Academy video tutorial shows the Media block in action.

To show media between text messages instead, add it to a Send a message block with + Add media: it opens the same Select media window.

How to add a Media block

To add a Media block, click + at the top left of the builder, open Messages and pick Media. The Select media window opens right away, so you can choose your file without opening the block first.

Building Blocks menu with Messages open and the Media block listed between Send a message and Goodbye message

On the canvas and in its panel, the Media block is titled Messages, because it uses the same editor as Send a message. One Media block can send several files in a row: + Add media adds another one, and visitors get them one after another.

Media block panel with a GIF next to the canvas, where the block sits between a welcome Buttons block and a message with a photo

Which ways can you add media to the Media block?

The Select media window has four tabs, one for each place your media can come from:

● Upload your file: a file from your computer, such as a photo, a video, an audio or a PDF.

● From Url: a file that's already online, or a link saved in a Field.

● Giphy: an animated GIF from GIPHY's library.

● Video Embed: a YouTube, Vimeo or Wistia video that plays inside the chat.

How to upload a file to the Media block

To upload a file, open the Upload your file tab, click Browse and pick the file. Landbot uploads it and adds it to the block straight away, with no extra button to press.

The Media block accepts files up to 20 MB. A bigger file shows "Max file size allowed: 20MB" and isn't added.

How to add a GIF from GIPHY

To add a GIF, open the Giphy tab, type a word in Search GIPHY, click the search button and pick the GIF you like. Click SEND to add it. Pressing Enter in the search box doesn't start the search, so use the button.

Giphy tab of the Select media window with namaste illustration searched and illustrated GIF results

In this example, a yoga studio agent, Bamboo Yoga, welcomes new visitors with an illustrated namaste GIF from GIPHY, followed by a photo of the studio:

Chat showing a namaste GIF and a studio photo after the visitor asks for a look around

A GIF saved on your computer goes in through Upload your file, like any other image, and plays in the chat just like a GIPHY one.

How to embed a YouTube, Vimeo or Wistia video

To play a video inside the chat, open the Video Embed tab and paste the video's link. When the link is valid, a preview of the video appears; click SEND to add it.

Video Embed tab with a YouTube link pasted and a preview of the video
Paste the YouTube link from your browser's address bar (youtube.com/watch?v=…), not the short youtu.be/… link from YouTube's Share button. For Wistia, paste the video's media page link (yourcompany.wistia.com/medias/…): Wistia's /s/… share links and fast.wistia embed links aren't accepted.

For video on another host, or to hide the next button until a video ends, see Display video and hide button to continue until video has ended.

To show a file that's already online, open the From Url tab and paste its link. The link must start with https://: an http:// link shows "Please enter a https URL" and SEND stays greyed out.

From Url tab rejecting an http link with the message Please enter a https URL
The Media block decides how to show a link from the file extension at its end, such as .jpg or .png. A link without an extension, like many image-search and photo-site links, arrives as an Open file button instead of an image.

What do visitors see for each type of media?

Visitors see each type of media in its own way, and the chat moves on to the next block once it's sent:

● Images and GIFs show in the chat.

● Videos in .mp4, .m4v or .webm play in a video player, and embedded YouTube, Vimeo and Wistia videos play in their own player. Avoid .ogv: Chrome shows it as an empty player.

● Audio in .mp3, .m4a, .wav or .ogg plays in an audio player.

● PDFs arrive as an Open file button. Clicking it opens a preview inside the chat, with Open in new tab at the top.

● Other files, such as an Excel timetable, arrive as an Open file button and download to the visitor's device. The downloaded file gets a random name, not the name it had on your computer.

A PDF opens in a preview over the chat, so visitors can read it without leaving your website:

Bamboo Yoga price list PDF previewed inside the chat with an Open in new tab link

How to change the Open file button text

To change the text of the file button, go to Settings > Custom System Messages > Buttons > Open File Button, type your text and click Apply changes, then publish the agent. The default text is "Open file".

Custom System Messages settings with the Open File Button text changed to View file

The Open File Button text applies to every file the agent sends, so pick a label that fits all of them, such as View file. Read more about every text you can change in Custom System Messages.

How to show an image from a URL saved in a Field

To show an image whose link changes during the conversation, put a Field in the From Url tab: click Use field and pick the Field that holds the link. One Media block then shows a different image for each visitor, so you don't need a separate block for every product or option.

In this example, the Bamboo Yoga agent shows visitors which room their class is in. The Bamboo Yoga agent asks "Which class are you booked into?" with three buttons, Hatha, Vinyasa and Yin, saved in @class_type. A Google Sheets block then finds the row for that class in a sheet with the columns CLASS, ROOM and PHOTO, and saves the room's name in @room and its photo link in @room_photo.

Google Sheets panel reading a room and a photo link into Fields, next to the class buttons, sheet lookup, message and Media block

The Media block at the end of the flow has @room_photo in From Url. Use field writes it as @{room_photo}, and the chat replaces it with the link from the sheet.

From Url tab with the room_photo Field inserted as @{room_photo}

When a visitor picks Hatha, the chat shows the Sun room's photo from the sheet:

Chat answering Hatha with Your Hatha class is in the Sun room and a photo of the room
The links in the Field need a file extension at the end, such as .jpg.

How to change or replace media in a block

To change a file, open the block and hover over the media: the pencil opens Select media again, where you can pick a new file or edit the link. The same toolbar copies the media, deletes it (when the block holds more than one) and drags it to change the order.

For WhatsApp

The Media block sends images and YouTube links on WhatsApp. It doesn't send GIFs.

Videos and audio files can be up to 16 MB on WhatsApp.

WhatsApp doesn't accept MP3 audio files. See WhatsApp's supported media types for the full list.

For Facebook Messenger

The Media block sends images, YouTube videos and audio messages on Facebook Messenger.

GIFs sent with a Media block play on their own. In a Send a message block, Facebook Messenger shows only the GIF's link.

Was this article helpful?

How to control embedded videos with custom code