How to embed your Landbot

Embedding your Landbot into your website is really easy! 

Once you have created your account you will have access to the HTML snippet of your Landbot. 

To get your snippet all you need to do is selecting Chatbots from the platform, selecting the Bot, click on Edit and getting inside the Bot Builder:

Once here, click on Design and you will find the HTML snippet

Your Snippet will be something like:

  <html>

    <head>

      <meta charset="UTF-8"><meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

      <title>Landbot | Convert a Landing Page into a Chatbot</title>

      <style type="text/css">html { margin: 0; height: 100%; overflow: hidden; } iframe { position: absolute; left:0; right:0; bottom:0; top:0; border:0; }</style>

    </head>

    <body>

      <iframe id="landbot-frame" width="100%" height="100%" frameborder="0" src="https://landbot.io/index.html"/>

    </body>

  </html>

If your web page is empty, you can use the Snippet code as it is. If you already have some content, the recommendation is to eliminate the following etiquettes, you webpage will already have them:

<html> <head> <meta> <title> and <body>

Moreover, if you add the content of <style> into <head> and <iframe> into <body> you will avoid any kind of incompatibilities.

Finally, to avoid Landbot occupy your entire page you will have to modify the percentages of width and height within <iframe> until you see that it occupies the space you want. If you also want to move it, modify the values of left, right, top and bottom within <style> to place it in the desired position.

Still need help? Contact Us Contact Us