How to integrate Landbot on your Softr app

Narek Bayadyan
/
Apr 17, 2025
/
2
min read
Table of Contents

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.

What is Softr
Softr is the easiest way to turn your data into powerful business apps—no code required. Connect to your spreadsheet or database, customize layout and logic, and share with your team or clients.

Join 700,000+ users worldwide, building client portals, internal tools, CRMs, dashboards, project management systems, inventory management apps, and more—all without code.
Get started free
Narek Bayadyan

Categories
Guide
Tutorials

Build an app today. It’s free!

Build and launch your first portal or internal tool in under 30 minutes
Get started free