CSS customization for your bot design

You can add custom CSS to fully customize the look and feel of your bot and the landing page if the design settings are not sufficient:

These are just some examples for you to play around with, hopefully, it leads to something amazing!!

#qre{
    background: url("https://example.com/cover.jpg");
    background-size: cover;
}

html{
    overflow: hidden;
    bottom: 0px;
    position: fixed;
    left: 0px;
}

.input--inner{
    border-radius: 1px 10px 1px 10px;
}

.input-error{
    width: 90%;
    margin-left: 5%;
}

.quriobotWidgetButton, .quriobotWidgetPopup--button{
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0px 10px 1px 0px;
}

#arrow--icon::before,.input--button:before{
    border-radius:0px;
}

#close #close--button{
    background-color:#cccccc;
}

#toolbar--inner{
    box-shadow:none;
}

textarea {
    box-shadow: 0 0 10px rgba(0,0,0,0.04);

}

.bot--body, .bot--bubble.isCold .bot--body {
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    border-radius: 1px 10px 1px 10px;
}

.answer--body
{
    box-shadow: 0 0 40px rgba(0,0,0,0.1);
    border-radius: 1px 10px 1px 10px;
}

#quriobotWidgetContainer{
    max-width:100% !important;
}

.panel--autocomplete .panel--main li{
    cursor:pointer;
}

.dot--a:before, .dot--b:before, .dot--c:before{
    height:2px;
    width:4px;
    border-radius: 1px 2px 1px 2px;
}

.large--button, .done--button {
    border-radius: 5px 10px 5px 10px;
    height:100%;
    right:0px;
}

.panel--optionsInner.hasScroll .panel--arrow .arrow:before {
    height: 12px;
    width: 12px;
    border-bottom: 3px solid #d4d7d9;
    border-right: 3px solid #d4d7d9;
    border-radius: 0px;
}

Fonts: If you want to add a custom font to your bot you will need to add the source of that font to the script, as using @import does not work due to security reasons. The following snippet can be added to the Bot CSS to enable the ‘Fira Sans’ font in the bot:

/* cyrillic-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmojLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvk4jLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvm4jLazX3dGTP.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvlIjLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmIjLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5VvmYjLazX3dGTP.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v9/va9E4kDNxMZdWfMOD5Vvl4jLazX3dA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: 'Fira Sans', sans-serif !important;
}

button{
  font-family: "Fira Sans",sans-serif !important;
}

*{
    font-family: "Fira Sans",sans-serif !important;
}

The source for this font can be found on: https://fonts.googleapis.com/css?family=Fira%20Sans

The CSS above is all added to this demo bot: https://quriobot.com/qb/qbtests/CSS-demo

If you want to control the width of the Centered bot:

.quriobotWidgetContainer.position--center{
    max-width: calc(50% - 20px);
    min-width: 520px;
}

If you want to control the width of the Right or Left positioned bot:

.quriobotWidgetContainer{
max-width: 500px !important;
}

If you want to change the color of the close button and the start button of the soft-start:

.quriobotWidgetPopup .quriobotWidgetPopup--button {
	background-color: red !important
}
.quriobotWidgetPopup .quriobotWidgetPopup--close {
	background-color: blue !important
}

If you want to change the width of the soft-start popup:

.quriobotWidgetButton.showPopup .quriobotWidgetPopup {
    max-width: 280px !important;
}

Change the colors of the Yes/No buttons separately

Add this code to the CSS of the Bot chat:

[dir] .yesno--option.option--yes .option--content:hover
,[dir] .yesno--option.option--yes.selected--option .option--content {
    border-color: green !important;
}

[dir] .yesno--option.option--yes .option--text:hover
,[dir] .yesno--option.option--yes.selected--option .option--text {
    color: green !important;
}

[dir] .yesno--option.option--yes .option--content .check::before
,[dir] .yesno--option.option--yes .option--content .check::after {
background-color: green !important
}

[dir] .yesno--option.option--no .option--content:hover
,[dir] .yesno--option.option--no.selected--option .option--content {
    border-color: red !important;
}

[dir] .yesno--option.option--no .option--text:hover
,[dir] .yesno--option.option--no.selected--option .option--text {
    color: red !important;
}

[dir] .yesno--option.option--no .option--content .check::before
,[dir] .yesno--option.option--no .option--content .check::after {
background-color: red !important
}

Edit this page

Tags
See also