Table of Contents

CSS Customization Examples: "Translucid"

Abby Updated by Abby

In this example, we'll create a translucid modal that overlays our webpage in order to provide a more simple way to chat.

The CSS

This is a very simple CSS template as it's just a few lines of CSS:

#Background{
background-color: transparent !important;
}
.Header__NavigationButton.custom-button{
color: black !important
}

We add this to the 'Design'>'Add CSS' section of our bot:

In the Builder

Here's what it looks like in the builder:

Note that we've added the function myLandbot.close(); this will make the modal close automatically at the end of our flow.

We've selected the embed type 'Popup'

Tips

This design works best for pop up, although if you have a plain background you can also use the embed option like here

You can also change the opacity of the background:

Live example:

How did we do?

CSS Examples: Lead Gen

CSS Customization Examples: "Minimalist" Theme

Contact