How to integrate Landbot on your Softr app

Narek Bayadyan • Jul 26, 2022 • 2 min read

In this tutorial, we'll share the step-by-step process of adding a Landbot chatbot on a Softr app.

Build, Test & Publish your Bot

Before you jump into embedding your bot on your Softr project, make sure it works and looks just the way you need. Thanks to Landbot, the whole process of creating a conversational assistant is fairly simple and straightforward.

Get the Chatbot Embed Code

Log into your Landbot account, access the chatbot canvas you want to embed on your site, and select Share in the top navigation bar, as indicated in the video above.

getting chatbot embed code

Next, select the embed type you want to implement to make the bot part of the existing page or project design. Even if you have some design or settings changes left to do, don’t worry. You can go ahead and still proceed with the embed. Every time you update your bot, the embed will be updated automatically.

Choose Embed Format

The embed code is generated automatically upon clicking on your preferred embed type. Make your choice, press the "Copy" button and then simply proceed to your Softr app project to finish the implementation. 

choosing embed format

Adding the Embed Code (Embed, Live Chat & Popup)

First, we will show how to add the embed code for all formats except the full-page format (to see how to do a full-page embed skip to the next section). 

Inside your Softr project, the embed code can be added using the Custom Code block. You just need to paste the code inside the block as shown below.

Please note, if you are using the “Embed” format, you need to place the Custom Code block exactly in the part of the page you want the bot to appear.

On the other hand, Live Chat and Pop-up code blocks can be placed anywhere as they both appear as a widget at the bottom right corner of the page

Live Chat format opens up into a typical website chat window:

landbot templates

While the Popup format enables the bot to take over the whole screen to minimize distractions:

adding landbot to softr

Adding a Full-Page Embed Code

If you want to add a full-page Lanbot chatbot, use the Custom Code section inside Page Settings instead.

adding landbot to softr

This way you can have a conversational landing page up and running in a few clicks.

Client Portal | Internal Tools | Web App Builder | Free Website Builder Made with Softr