Advanced (Custom CSS & Custom JS)

Landbot 2

You can add Custom Style Sheets (CSS) and JavaScript functions (JS) to your Landbot to make it look unique or to add special functionalities.

To access the Design / Advanced section, you need to click in the Artist emoji, located in the Top Menu of the Builder and Select Advance:

1. To add Advanced  Settings, click on the  Advanced Settings button at the bottom of the design menu:

You'll see two different sections:

Advanced CSS - Add CSS (Custom Style Sheet)

Here you can add Custom Style Sheet (CSS) to your landbot to customize the shape, size, and color of every element. Want rounded bubbles, remove the timestamp or make the avatar bigger? This is the way to go. Here is also, where Landbot styling options will be placed if you select any custom stylings or templates. There is no need to use the <style> tag

Examples of Custom CSS

Here are some examples of what you can do with some CSS in your landbot:

1. Customize the timestamp to add text instead of the message delivery time:
   
   .hu-message.brand .hu-message-date { color: transparent; } .hu-message.brand .hu-message-date::after { content: "Landbot"; position: absolute; left: 0; top: 1px; color: white; }
   
   You can add other parameters like display: none to fully remove the timestamp from your landbots.
2. Change the shape of the buttons (to rounded):
   

   .hu-input-menu_button:not(.icon) {
     border-radius: 100px!important;
   }

   
   You can add your custom radius (in pixels).

Advanced JS - Add JS (Custom scripts) [Javascript inside HTML <script> tags]

Here you can add custom JavaScript functions to trigger special functionalities in your landbot, often related to event/conversion tracking or URL parameters.

In case you added custom Javascript and you want to test it, please use the Share Url opening in a new tab or window.

Examples of Custom JS

For more information and examples of what can be done with Javascript in this section, take a look to the Workarounds & Codes section

Landbot 3 🚀

Landbot 3 is the new version of our chatbots UI.

As well as in the previous version, you can add custom CSS and JS in the corresponding text editor.

You can also expand them like this:

Click on Apply, then on Save, to save your changes. You'll see the changes applied in real time to the preview on the right side.