Click Here For More Support
Page cover image

Add a Full Banner/Header Image

  1. In the Satisfi Labs dashboard, go to Studio -> Page Themes

  2. Select the theme you'd like to edit

  3. Upload the banner to the Satisfi Labs dashboard under Images

  4. Copy the image URL for later use

  5. Add the following CSS to the Custom CSS container

.satisfi_headerContainer{
background-image : url(INSERT IMAGE URL HERE);
height: 85px;
width: auto;
background-size : 100% 100%;
background-repeat : no-repeat;
}

  1. Paste the image URL you copied in Step 4 into the area of code above (INSERT IMAGE URL HERE)

  2. Find the headerTextColor field in the page theme settings and update the custom setting to transparent

  3. Save the theme

Confirm there is no header image uploaded within page settings!

Adjust the Avatar Size

Avatars Can Be Added in Page Settings

  1. In the Satisfi Labs dashboard, go to Studio -> Page Themes

  2. Select the theme you'd like to edit

  3. Add the following CSS to the Custom CSS container:

.satisfi_avatar{background-size: 3.5rem auto; padding-left: 3.75rem;}

  1. You can adjust the size as needed by changing the 3.5 and 3.75 values above

  2. Save the theme

The avatar needs to be uploaded under page settings before completing these steps!

Shift Input Container Text

"Ask a Question" was shifted to align on the right side vs. the traditional left side

  1. In the Satisfi Labs dashboard, go to Studio -> Page Themes

  2. Select the theme you'd like to edit

  3. Add the following CSS to the Custom CSS container:

.satisfi_textInput.satisfi_textAreaInput::placeholder {
    text-align: right !important;
}

  1. Save the theme

  2. Click on Studio -> Pages

If you'd like to adjust this for only one page, duplicate the existing page theme and name it accordingly.

Custom Font Size

  1. In the Satisfi Labs dashboard, go to Studio -> Page Themes

  2. Select the theme you'd like to edit

  3. Add the following CSS to the Custom CSS container:

.satisfi_headerContainer h1 {
border-bottom: 0px dotted #000066 !important;
}
.satisfi_chat {
font-size: 14px !important
}

  1. Adjust the font size next to the font family field

  2. Save the theme

Custom Popup Settings

  1. In the Satisfi Labs dashboard, go to Studio -> Page Themes

  2. Select the theme you'd like to edit

  3. Add the following CSS to the Custom CSS container:

.satisfi_chat-button:hover{ background-color: var(--chatButtonBackground) !important; color: var(----chatButtonFontColorMobile) !important;  }

For Simpleview Users:

.satisfi_chat-button:hover { color: var(--chatButtonFontColor); padding: var(--chatButtonPadding); background-color: var(--chatButtonBackground); }

  1. Save the theme

Last updated

Was this helpful?