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.
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.
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:
While the Popup format enables the bot to take over the whole screen to minimize distractions:
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.
This way you can have a conversational landing page up and running in a few clicks.
