Table of Contents

How to display images with a variable url source

Pau Sanchez Updated by Pau Sanchez

Let's say we have a catalog of products or different properties that we want to show to our customers. Every product or property has it's own picture.

Building a bot with a flow for every single element is not possible or practical. If we have all the URLs of the pictures in a database, we can pull them and display them as we want. In the following guide we will learn how to set it up in no time:

BASIC SETUP: USING THE FROM URL OPTION OF THE MEDIA BLOCK

  1. Add a Media block

  1. Hover until you see the pencil icon and click on it

  1. Click on FROM URL tab

  1. You will see at the bottom a button that says VARIABLES, click on it

  1. Select (or create a new variable with String format) the variable that will contain the URL of the picture you want to display, and press SEND

  1. Now what we need is that the variable @src is the URL of the picture. As a variable it can dynamically change the value. It means it can change the URL as you need
Once the Media block is set up, it doesn't display the information anymore in the builder. Please use the Note block, for future references
Images with a variable source cannot be used in the WELCOME MESSAGE block

USER CASE 1: DISPLAY IMAGES STORED IN A GOOGLE SPREADSHEET:

  1. Build a Spreadsheet like below, with a column for the name of the product (product_name ) and a column for the URL to the image (product_picture)

  1. In the "product_name" column, we will add the name of the items we will search during the conversation (as a reference) and in the "product_picture" column, we will add the URL where the images are hosted

  1. Now in the builder add a Buttons type of question block with the three options in the Spreadsheet

  1. After the Buttons type of question block add a Google Spreadsheets integration

  1. Set up as below to get the row information based on the button selected

  1. We will use the variable @options to search for the row in our Google Spreadsheet
  2. Then we will store the value we get from the spreadsheet column named product_picture in a variable called @src (as a String)

  1. So the set up of the Google Spreadsheets Integration should look like this:

  1. Add a Media block, where we are going to display the picture

  1. Select FROM URL, and click on VARIABLES

  1. Select the variable @src, and press SEND

  1. Save and test the bot

Final view on Landbot 2

Final view on Landbot 3

  1. You will see that every single option has it's specific image, without the need to upload every single url or image. Neither you need to build a flow for every specific option.

Whenever you use the Set Variable to add a url, make sure is a simple text, not an hyperlink

USER CASE 2: DISPLAY IMAGES WITH TEXT THAT CHANGES BASED ON USER INPUTS

We will use a third party tool called Hyperise (https://hyperise.com/) is a tool that let's you personalise images with text based on variables that you use in the source URL.

In this example we will build a Greetings Image. Here is how you can do it:

  1. Set up the image in Hyperise (for more information please check their documentation)

  1. Once you have the URL with its variables we will return to the Landbot builder and create the following flow:

  1. To display the variable that contains the name, first we need to capture the value in a Name type of question

  1. Now we will add a Set Variable block were we are going to build the URL, which will be the source of the image, then add our Landbot variable @name to the url we are building. MAKE SURE IS PLAIN TEXT! NOT A HYPERLINK

  1. Once the source is done, add a Media block, and add the variable we just created a variable of the URL

  1. Now we can test it out

Final view on Landbot 2

Final view on Landbot 3

MEDIA CONTENT FORMATS AND HOW ARE DISPLAYED

Gif => Can be displayed

Images => Can be displayed

Audio => As a file

PDFs => As a file

Youtube url => As a file

How did we do?

Media block

Contact