All Categories ​>​ ​Creating a Landbot ​ > ​ ​Design (v3) ​>​   Advanced (Custom CSS & Custom JS)

Advanced (Custom CSS & Custom JS)

Updated 1 month ago by Pau Sanchez

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

Note: the Advanced Design Settings are only available on Premium Plans.

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

Live update: To test your styles, the bot will display in real time the changes applied in this section.
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):

    .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.

The HTML added in the ADD JS section will be placed in the Footer section of the site once Landbot is loaded.

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

 Important: We can't guarantee the correct display of a landbot with Custom CSS since the customization possibilities are unlimited.

How did we do?