Pop up modal to embed third party elements (v3)

Displaying html and scripts in Landbot sometimes can be limited by the size of the messages, and it's more useful to display 3rd party elements on top of the messages for better visualisation. Here we will show how to do it with a pop up modal:

  1. Here is how is going to be the builder flow:
  • A welcome message
  • An Ask A Question block, with 1 button and the code that will trigger the modal pop up. The button will be used to continue the flow once the modal is closed
  • A last message, just for the example

The Ask A Question block, is going to be used, to trigger an internal function once the user arrives to this point

3rd party element <script>openModal();</script>

  1. Design / Advanced / Add CSS & ADD JS Section

In the ADD CSS section paste the code below:

* {
z-index:1
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 2; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100px; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 95%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

In the ADD JS section paste the code below:

<script>
function openModal() {window.modal.style.display = "block";}
var modal;
var span = document.getElementsByClassName("close")[0];
</script>
<div id="myModal" class="modal" style="height:100%;">
<div class="modal-content">
<span class="close">&times;</span>



<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/Rd6sn03ncIklmprvy6" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/mostexpensivest-viceland-most-expensivest-Rd6sn03ncIklmprvy6">via GIPHY</a></p>



</div>
</div>
<script>
var modal = document.getElementById('myModal');
var myIframe = document.getElementsByClassName('myIframe')
var span = document.getElementsByClassName("close")[0];
window.span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

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?