Advanced Settings (CSS, JS)

Updated 2 months ago by Fran

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

Note: the Advanced Design Settings are only available on Premium Plans.
  1. To add Advanced  Settings, click on the  Advanced Settings button at the bottom of the design menu:

     
  2. You'll see two different sections:
    1. Advanced CSS. 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. 
    2. Advanced JS. Here you can add custom JavaScript functions to trigger special functionalities in your landbot, often related to event/conversion tracking or URL parameters. Learn how to send variables using the URL.
Tip: Drag the bottom right corners of the text boxes to make them bigger and get to see more lines of code.
Examples

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

Short video tutorial:

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

How did we do?