Table of Contents

Advanced (Custom CSS & Custom JS)

Pau Sanchez Updated by Pau Sanchez

Landbot 3 ๐Ÿš€

Landbot 3 is the new version of our chatbots UI.

As well as in the previous version, you can add custom:

CSS

JS

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.

The CSS and JS changed from the old to the new version.
Since we don't have a reference for the CSS classes at the moment, we recommend using the Dev Tools in Chrome.

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.

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

To access the Design / Advanced section, you need to click on 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):
    .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.

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 at 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?

Design Section Guide ๐ŸŽจ

Contact