Table of Contents

CSS Customization Examples: CV Template

Abby Updated by Abby

In this example we're going to build an interactive CV template, with a persistent menu and some call to action functionalities such as open email, WhatsApp, and redirect to a PDF that the user will be able to download.

The flow

In the builder we'll divide each main section into 'buttons' and then have a persistent menu that connects to each button in case the user wants to go back to a specific point in the flow.

For the 'Portfolio' we've used HTML in an iframe to embed examples, here's a similar way to do it

In the end we'll also have various ways to contact such as WhatsApp redirect, email redirect, and last we'll open a PDF that the user can download.

The CSS

Although it's not visible, we've kept the header to add extra space between the persistent menu and the body.

Since we're keeping the header we'll need to use CSS to remove the shadow and make the color transparent.

Here's what we did:

.Header{
  box-shadow: none!important;
  background-color: transparent!important;
}

More header classes

Persistent menu

We wanted our design to be a more clean, so we removed the buttons from the header, here's the before:

After that we changed the persistent menu background color, text color and button using the following:

Here's the CSS (here too):

.is-vertically-centered{
	display: none;
}

.OffsetMenu__Content{
  background-color: #282828;
}

.button--PersistentMenu {
	background-color: transparent;
  border-radius: 3px 3px 3px 3px!important;
}

.OffsetMenu__CloseButton{
 background-color: white!important;
  border-radius: 59%
}

.button--PersistentMenu .label{
	font-size: large;
  text-align: left;
}

Welcome message

As the design for the welcome message will be unique to the rest of the bot we'll add block identifiers

The first thing we did was create a title by making the font size larger, removing padding and removing the background.

We then added some CSS to create a rounded image and scaled it down to fit the bubble.

Lastly we made our button align with the rest of the welcome page.

[data-block="welcome_0"] .MessageBubble {
  background-color: transparent;
  font-size: large;
  width: 600px!important;
  padding-top: 0px;
}
[data-block="welcome_0"] .MessageBubbleText {
padding-left: 130px!important; 

}
/* Rounded Image*/
.image{
	right: 18px;
  bottom: 12px;
  transform: scale(0.9, 0.9);
}
[data-block="welcome_2"] .MessageMediaBubble{
  max-height: 190px;
  max-width: 190px;
	border-radius: 50%;
    margin-bottom: 20px;
}
[data-block="welcome_2"] .Message__message{
padding-left: 200px!important;
}
/*End Rounded Image*/
[data-block="welcome_2"] .input-button{
	width: 330px;
  background-color: transparent!important;
  color: black!important;
  margin-top: 40px;
  border-color: black;
  margin-left: 0px!important;
}
[data-block="welcome_2"] .InputButtons{
	margin-left: -40px!important;

}
/*End Welcome Page*/

User message

We wanted the user message to align with the rest of the page, so here's what we added:

/* User Messages*/
.is-author-user{
	margin-bottom: 200px;
  background-color: white!important;
  color: black!important;
  font-size: large;
}
.MessageBubble{
	font-size: large;
}

Message Bubbles

Lastly we edited the message bubbles and input button in a way that the content was more legible for the user, again using the data blocks:

[data-block="Nkljnghvq_0"] .MessageBubble{
  margin-top: 40px;
	width: 644px!important;
 text-align: center!important;
  border-radius: 25px!important;
}
[data-block="Nkljnghvq_0"] .MessageBubbleText{
margin-left: 30px;
}

[data-block="Nkljnghvq_0"] .input-button{
	width: 350px;
  background-color: white!important;
  color: black!important;
  margin-top: 1px;
  border-color: black!important;
}

Demo

You can test the bot here

How did we do?

CSS Customization Examples: Video Bubble

Contact