Skip to main content

We always customize our engagements to the extreme.  We are trying to create a multi-step survey engagement but are frustrated that there isn't a code-view or edit like on traditional sliders and dialogue engagements.  Namely, we want to add to the submit button or change the layout of the survey questions.  

 

Is there a reason why this doesn’t exist?  Is there a way to enable it?

Maybe something changed in the last 6 months, but I see code view in dialog and slider engagements, even in the V1 editor. If you don’t see code view, make sure that you are seeing edit mode, and note the steps view.

Hi @bryanpaul ,

 

  1. Guides - old and new editor both have CSS and HTML Code View
  2. Sliders - has a HTML Code View
  3. Dialogs - has a HTML Code View
  4. Multi Question Survey - there is no dedicated code view on the editor. However, you can design your questions and choice options with their individual code views, which are available when the question or option is selected
     


     


     

 

Thanks,

Abhilash

 

Revisiting this as we are also trying to edit the code for our multi-question surveys. Specifically, button padding. I’ve done all I can in the CSS editor, but would love the ability to jump into the code and fix it in place.

 

 

@bostonjillian I wasn’t sure if you received the help you requested. Here is how we resolved this scenario.

.px-step-navigation-snooze {
padding: 8px 16px;
  font: var(--tdl-font-body-small-regular, 400 14px/16px "Noto Sans", "Open Sans", arial, sans-serif);
		background-color: #FFFFFF;
    color: #191919;
	border-radius: 8px;
  border: 1px solid #CDCDCD !important;
}

.px-step-navigation-snooze:hover{
  padding: 8px 16px;
    font: var(--tdl-font-body-small-regular, 400 14px/16px "Noto Sans", "Open Sans", arial, sans-serif);
		background-color: #EDEDED;
    color: #191919;
	border-radius: 8px;
  border: 1px solid #0095FF !important;
}


 

 

 

padding: 8px 16px;
Adding text maintains padding

 

Here is a little bit more…

Before the CSS changes are applied, as the changes only work outside of gainsight.

After: 

https://drive.google.com/file/d/1WG3dsx6ggnDvF0c-VOcOVHc4JJf6Bv3w/view?usp=sharing

Before:

 

 

 


div.px-legal-disclaimer{
      font: var(--tdl-font-body-small-regular, 400 12px/16px "Noto Sans", "Open Sans", arial, sans-serif);
  color: #636363;
  width: 107%;
}


div.apt-survey-step {
   justify-content: space-between;

 margin-bottom: 12px;
  min-width: 100px;

}

div.apt-survey-page {
  margin-bottom: 0px;
}

.px-step-navigation-snooze {
padding: 8px 16px;
  font: var(--tdl-font-body-small-regular, 400 14px/16px "Noto Sans", "Open Sans", arial, sans-serif);
		background-color: #FFFFFF;
    color: #191919;
	border-radius: 8px;
  border: 1px solid #CDCDCD !important;
}

.px-step-navigation-snooze:hover{
  padding: 8px 16px;
    font: var(--tdl-font-body-small-regular, 400 14px/16px "Noto Sans", "Open Sans", arial, sans-serif);
		background-color: #EDEDED;
    color: #191919;
	border-radius: 8px;
  border: 1px solid #0095FF !important;
}

label.apt-survey-dynamic-rating-radio:focus-within {
    border: 1px solid #10831008 !important;
}


/* 
div.apt-engagement-wrapper-survey {
  margin-bottom: 12px;
} 
*/

div.apt-survey-dynamic-rating-labels-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: space-between !important;
}

.px-multi-survey-question {
    padding: 1px 0px 3px 5px;
}


div.apt-snooze-container{
/*	height: 40px;
  min-width: 108px; */
}

/*  THIS ONE HERE SHOULD BE THE SPACING!!*/
div.px-survey-rating-button {


}

/*  THIS ONE HERE SHOULD BE THE SPACING!!*/
div.apt-survey-dynamic-rating-radio-answers 
{
  margin: 10px 0 10px 0;
  justify-content: space-between;
}



.px-survey-high-score {
/* Rating High score label LOCATION*/
  font: var(--tdl-font-body-small-semibold, 600 12px/16px "Noto Sans", "Open Sans", arial, sans-serif);
  color: #636363;
  text-align:right;

}

/* Rating Low score label*/

.px-survey-low-score {
/* Rating Low score label LOCATION*/
  font: var(--tdl-font-body-small-semibold, 600 12px/16px "Noto Sans", "Open Sans", arial, sans-serif);
  color: #636363;
  text-align:left;

}

 

@lpicone - Thank you so much for the Snooze button CSS!  I was looking for something like this. 

Thank you so much! This is very helpful :D
I ended up changing the content, which resulted in less users answering the survey. This will be a much better option. 

Examples of before and after

  • Engagement rendered in Gainsight UI
  • Engagement rendered in product

 

 

 

@lpicone  - When I see Gainsight content rendered differently in the product from within Gainsight PX, that usually means that the product CSS is affecting my content. You have to  include CSS in Gainsight for the behavior that you want. 

In your situation, it looks like your product has CSS for full justification everywhere. You likely have to set CSS for left justification or centering on the applicable elements.

Reply


Terms & ConditionsCookie settings