Table of Contents

CSS Customization Examples: Carrd Embed Beginner

Abby Updated by Abby

This template is apt for basic pro Carrd accounts so all of the CSS will be in the bot

Here's a basic embed in Carrd template example with CSS recommendations for this specific type of embed.

For this example the we'll use a basic template from Carrd.

Here's what it will look like:

Background Image

So the first thing we'll do is add the background image for both mobile and desktop, here's the ideal size.

As this template doesn't have any color we want our bot to stand out by adding a background image, you can get lots of free background images on Unsplash.

For 'Embed' types I prefer to remove the header to provide a more simplistic and clean page.

Targeting welcome message

I also used the node reference to center the welcome message and button and make them larger, as well as add letter spacing so it's more aligned with the container page:

[data-block="welcome_0"] .MessageBubble{
  font-size: larger;
	 margin-left: 16vw;
  letter-spacing: .1em;
}
[data-block="welcome_0"] .input-button{
  margin-left: 22vw;
}

Then I removed the background color from all of the bot messages:

.MessageBubble{
    background-color: transparent;
}

Font

If you'd like to use the same font that you have in your website you can use Google Fonts if yours isn't already available in Landbot.

Container Size

I'll change the width directly in the Carrd template, keeping in mind that the width is based on the size of the highlighted box and not the page itself.

The ideal height is a minimum of 400px, if you decide to do any less it's recommended to remove the scroll bar.

::-webkit-scrollbar {
-webkit-appearance: none;
width: .1px;
}

I've also minimized the height of the chat spacer, so I don't have disappearing elements, keep in mind that the smaller your container is the more likely it is to scroll past the element you want to keep in focus:

.Chat__spacer{
	height:0px!important;
}

Extra

When you change the button help text color you're also changing the time stamp color, if you'd like to remove it altogether here's how.

For the buttons and user message I used options from the design section of the bot, changing the border and colors to match the container page.

The CSS

Here's a link to the page if you'd like to test the bot, and here's the CSS:

[data-block="welcome_0"] .MessageBubble{
  font-size: larger;
	 margin-left: 16vw;
  letter-spacing: .1em;
}
[data-block="welcome_0"] .input-button{
  margin-left: 22vw;
}

.MessageBubble{
	background-color: transparent;
}

.Chat__spacer{
	height:0px!important;
}

How did we do?

CSS for Typewriter Effect

Dynamically Change a Bot's Background

Contact