OLD BUILDER - How to display Calendly in Landbot (with preloaded user data)

This guide is only valid for V2 (classic version). For V3 (bricks version), please check Bricks to import

Scenario: You want to offer visitors a frictionless experience to schedule a meeting/call with you in Calendly

Here, step by step, we will show you how to display Calendly in Landbot (in a modal) and at the same time using variables (name and email) that we asked previously to prefill the inputs in Calendly for a better user experience.

To see the demo here is the link

And in the builder will be the following flow:

  1. After the Welcome Message, we will ask (and assign) name and email of the user
  1. To use the variables in our JS code, we will use a Send a Message block with the following code:

Code:

Thanks{html}
<script>
emailCalendly = "@email";
nameCalendly= "@name"
</script>
{/html}
  1. Due to the way Landbot works, we need an extra input from the user. In this case we use a simple YES/NO question
  1. Now we will use a Question Buttons block, where we will add the following code to display the modal

In the following code please change "https://calendly.com/pau-sanchez/" for your Calendly url

Code:

Schedule Event{html}
<script>
function openModal () {
var srcIframe="https://calendly.com/pau-sanchez/?name=@name&email=@email"
window.myIframe[0].src = srcIframe;   
window.modal.style.display = "block";
}
openModal();
</script>
{/html}
  1. Now our modal to work, needs custom code. We will add the following code in the Design/Advanced Section:

Code (Add CSS (Custom Style Sheet)):

* {
z-index:1
}
.modal {   
display: none;
    position: fixed;
    z-index: 2;
    left: 0;   
top: 0;   
width: 100%;
height: 100px;
overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {   
background-color: #fefefe;   
margin: 15% auto;
  padding: 0px;   
border: 1px solid #888;   
width: 95%;
}
.close {   
color: #aaa;   
float: right;   
font-size: 28px;   
font-weight: bold;
}
.close:hover,.close:focus {   
color: black;   
text-decoration: none;   
cursor: pointer;
}

Code (Add JS (Custom scripts)):

<script>
var modal;
var span = document.getElementsByClassName("close")[0];
</script>
  1. And finally we will add the following code in the Settings/Seo & Tracking section

Code (Custom Tracking Snippets (facebook pixel, etc.))


<script> 
var nameCalendly; 
var emailCalendly; 
var srcIframe;  
</script>
<div id="myModal" class="modal" style="height:100%;">   
<div class="modal-content">   
<span class="close">&times;</span>   
<iframe class="myIframe" style="min-width:100%; height:580px; padding:1px" ></iframe> 
</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.

Credits: W3S


How did we do?