How to display images with a variable url source
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
- Add a Media block

- Hover until you see the pencil icon and click on it

- Click on FROM URL tab

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

- 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

- 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
USER CASE 1: DISPLAY IMAGES STORED IN A GOOGLE SPREADSHEET:
- 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)

- 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

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

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

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

- We will use the variable @options to search for the row in our Google Spreadsheet
- Then we will store the value we get from the spreadsheet column named product_picture in a variable called @src (as a String)
- So the set up of the Google Spreadsheets Integration should look like this:

- Add a Media block, where we are going to display the picture
- Select FROM URL, and click on VARIABLES

- Select the variable @src, and press SEND
- Save and test the bot

- 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.
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:
- Set up the image in Hyperise (for more information please check their documentation)

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

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

- 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

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

- Now we can test it out
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