Pop up modal to embed third party elements

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{html}
<script>
function openModal () {
window.modal.style.display = "block";
}
openModal();
</script>
{/html}

  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>
var modal;
var span = document.getElementsByClassName("close")[0];
</script>

  1. In the Settings / Seo & Tracking / Custom Tracking Snippets section add the below code, as in the picture

CODE (Copy and Paste)

<div id="myModal" class="modal" style="height:100%;">
<div class="modal-content">
<span class="close">&times;</span>

<!-- EMBEDS BELOW THIS LINE, DO NOT EDIT ABOVE THIS LINE -->


<!-- TODO: REPLACE THIS LINE FOR THE THIRD PARTY CODE YOU WANT TO EMBED -->


<!-- EMBEDS ABOVE THIS LINE, DO NOT EDIT BELOW THIS LINE-->
</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>

  1. In this last code, is where we are going to add our 3rd party embed. Just replace the line below for the code you want:
<!-- TODO: REPLACE THIS LINE FOR THE THIRD PARTY CODE YOU WANT TO EMBED -->

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?