Table of Contents

Pop up modal to embed third party elements copy

Pau Sanchez Updated by Pau Sanchez

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:

In Landbot 3

Only 1 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>this.window.openModal()</script>

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

In the ADD JS section paste the code below:

<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <button class="modal-close is-large js-close" aria-label="close"></button>
  	<div class="modal-content">
    	<div>
      	<iframe style="border: none; width:500px; height:405px" src="https://cards.producthunt.com/cards/posts/210805?v=1" frameborder="0" scrolling="no" allowfullscreen></iframe>
    	</div>
    </div>
</div>

<script>
  var _landbot = this;

  this.onLoad(function() {
    // Be careful with the function scope. `this` won't be available anymore as the widget instance
    var modal = _landbot.document.getElementById('myModal');
    // Open modal function
    _landbot.window.openModal = function openModal() {
      modal.classList.add('is-active');
    }
    // Close modal function
    _landbot.window.closeModal = function closeModal() {
      modal.classList.remove('is-active');
    }
    // Close event handler
    _landbot.document.querySelectorAll('.js-close').forEach(function(button) {
      button.addEventListener('click', function(event) {
        _landbot.window.closeModal();
      });
    });
  });
</script>

Here you can see an example:

  1. To display your iframe, just need to replace this line:
<iframe style="border: none; width:500px; height:405px" src="https://cards.producthunt.com/cards/posts/210805?v=1" frameborder="0" scrolling="no" allowfullscreen></iframe>

Multiple modals different iframe urls

In case we want to display more than one modal but with different content, we should adapt the code accordingly.

In the builder we will add the following blocks to trigger the scripts:

As you can notice we are using the same function, but with a different parameter, in the first case is "myModal_1" and in the second one is "myModal_2"

Then, using such name, we will add different names to the divs that contain our specific iframes:

<div class="modal" id="myModal_1">
  <div class="modal-background"></div>
  <button class="modal-close is-large js-close" aria-label="close"></button>
  	<div class="modal-content">
    	<div>
      	<iframe style="border: none; width:500px; height:405px" src="https://cards.producthunt.com/cards/posts/210805?v=1" frameborder="0" scrolling="no" allowfullscreen></iframe>
    	</div>
    </div>
</div>

<div class="modal" id="myModal_2">
  <div class="modal-background"></div>
  <button class="modal-close is-large js-close" aria-label="close"></button>
  	<div class="modal-content">
    	<div>
        <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/256153253&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
    	</div>
    </div>
</div>

<script>
  var _landbot = this;

  this.onLoad(function() {
    
    var modal;
    // Open modal function
    _landbot.window.openModal = function openModal(modalId) {
      modal = _landbot.document.getElementById(modalId);
      modal.classList.add('is-active');
    }
    // Close modal function
    _landbot.window.closeModal = function closeModal() {
      modal.classList.remove('is-active');
    }
    // Close event handler
    _landbot.document.querySelectorAll('.js-close').forEach(function(button) {
      button.addEventListener('click', function(event) {
        _landbot.window.closeModal();
      });
    });
  });
</script>

In case we want to display more than one modal but with different content, and at the same time with urls that change every time, here is how:

In the builder we will add the following blocks to trigger the scripts:

We use a code block to trigger the modal display:

With this code:

this.window.openModal('@{dynamicurl}')

In this case @dynamicurl is a string variable, that will contain in it's value the url that will be displayed in the iframe

Now in the Design > Custom Code > Add JS section we will add the following code:

<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <button class="modal-close is-large js-close" aria-label="close"></button>
  	<div class="modal-content">
    	<div id="modaliframe">
      	
    	</div>
    </div>
</div>

<script>
  var _landbot = this;

  this.onLoad(function() {
    // Be careful with the function scope. `this` won't be available anymore as the widget instance
    var modal = _landbot.document.getElementById('myModal');
    
    
    
    // Open modal function
    _landbot.window.openModal = function openModal(url) {
      var modaliframe = _landbot.document.getElementById('modaliframe');
      
   
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute('src', url);
    ifrm.style.border = "none";
    ifrm.style.width = "500px";
    ifrm.style.height = "405px";
    
    modaliframe.appendChild(ifrm);

     
      modal.classList.add('is-active');
    }
    // Close modal function
    _landbot.window.closeModal = function closeModal() {
      var modaliframe = _landbot.document.getElementById('modaliframe');
      modaliframe.innerHTML = "";
      modal.classList.remove('is-active');
    }
    // Close event handler
    _landbot.document.querySelectorAll('.js-close').forEach(function(button) {
      button.addEventListener('click', function(event) {
        _landbot.window.closeModal();
      });
    });
  });
</script>

In Landbot 2

  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?

Contact