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.


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

background-color: transparent !important;
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'


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 Customization Examples: Call To Action: WhatsApp

CSS Customization Examples: "Minimalist" Theme