Customize your chat survey using an advanced editor

Feature Requests & Ideas
1

Hello :smiley:,

With Advance Editor you can add your custom CSS to personalize your conversational surveys

Note: 

 1. This is applicable to all conversational surveys ie Chat surveys, NPS, and CES surveys.

Where to find Advanced style editor?

Navigate to the design section of your builder. You can find the Open Advanced Editor under CSS Customization. Click to open and paste your custom CSS code.

Advance editor
Advance editor1920×1146 94.8 KB

1. To change the font color of your chat survey header paste the following code in your advanced editor

.surveysparrow-chat__header-left .ss-survey-text-size--xl{
  color: black;  /* apply your color here */
}

2. To change the bubble color of your chat survey paste the following code in your advanced editor

.ss-chat-row__bubble {
    background-color: pink;   /* apply your color here */
}

3. To Decrease/Increase chat survey container width paste the following code in your advanced editor

.surveysparrow-chat__wrapper{
    max-width: 800px !important; 
} /*change max-width to change the size of the container*/

4. To change custom background color to chat window paste the following code in your advanced editor

.surveysparrow-chat__split-layer{
   /*adjust transparency with values ranging from 0 to 1;*/
   background: rgba(255, 255, 255, 0.5); 
}
.surveysparrow-chat-userinput{
   background: transparent;
}

Follow this link for more details on the CSS customization.

Please do share your custom code snippets :technologist: in the thread so that it will benefit our community members.

:wave:t4:

1 Like