Embed into your website

Updated 2 months ago by Cris Villar

So you may be using one of the hundreds Landing Page providers out there, and when trying to insert Landbot's HTML Snippet you see it's not working, what can you do?

Here will be covering how to solve the issue for the most common web builders. Stay tuned because we periodically update this article with more providers.



WordPress



(Here's a video where we explain step-by-step the whole process.)

Wordpress is an excellent Landing Page provider but may cause you problems when trying to insert your Landbot. All you have to do is following the below process:

  1. At Wordpress use Plugin "File Manager" if you do not have FTP access.
  2. You should copy within wp-content / Themes / YOUR THEME into the following PHP files (you will be able to see your theme name in Appearance > Theme).

    template-landbot-head-foot.php
    template-landbot-full.php 
  3. Create a new page and in the right column and chose the template you need: Landbot with head and foot or Landbot full page.
  4. Copy the content between the "iframe" tags (<iframe>...</iframe>) from your Landbot snippet.
  5. Save it and your Landbot will live in the URL of the newly created page

Feel free to modify the templates in order to make them perfectly fit into your website! 



Unbounce

If you're trying to integrate your Landbot into an Unbounce landing page, you may encounter a class conflict and all you have to do to solve it is add this snippet to your Landbot's HTML:

<script type="text/javascript">     $(document).ready(function(){         $("div").removeClass("lp-element lp-pom-root");     }); </script>
          

It basically removes the class that causes the incompatibility. You'll be good to go! 



Instapage

Instapage is a great Landing Page provider but may cause you problems when trying to insert your Landbot too. All you have to do is add this HTML line at the end of the snippet, before the </body> tag:

<script type="text/javascript"> $(document).ready(function(){ $("#i-page").hide(); }); </script> 
          
Squarespace

Squarespace already provides its users with a step by step guide to help you in embedding third-party applications, please take a look at the following page for full details:  https://support.squarespace.com/hc/en-us/articles/206543167-Using-the-Code-Block

Again, you'll be ready to go.


How did we do?