Display images that on click pop up

This article corresponds to the V2 (Classic) of the app. You can check the equivalent for the new version V3 (Bricks) here

Landbot offers the opportunity to display images, but sometimes we want to display them bigger, so the user can check on details. Like in this DEMO

To do that we are going to follow these steps:

  1. As a holder of the pictures we are going to use, Ask A Question (buttons) block. So that we make sure, the flow stops, right after the small picture is displayed:

  1. In the text area, we will add this code:
{html}
<script>
setAtts("pic1", "https://storage.googleapis.com/media.helloumi.com/customers/6936762/0.png")
</script>
<a id="pic1" onclick='openPopUp()'>
<img style="width:100%">
</a>
{/html}
Click to make it bigger

In this code we need to be aware of the 3 elements, that we will change depending on the picture url source, and the number of pop images we want to be in this bot:

In the third line:

setAtts("SHORT NAME OF THE PICTURE", "URL_OF_YOUR_PICTURE")

and in the fifth line

<a id="SHORT NAME OF THE PICTURE" onclick='openPopUp()'>

  1. Then we will copy and paste the below code in the Design / Advanced / Add JS section:

These scripts and how to's are not native functionalities. Landbot won't be able to support, help or guarantee these scripts and how to's. These Workarounds and How to's are for developers, as a learning and example material on how to extend or modify some of the platform limitations.  Due to platform updates, some scripts might stop working in the future.Please, note that in case of Scripts and Workaround the Custom Success Team can deliver limited support.


How did we do?