Hello @Elli ,

while this isn’t an answer to your specific question… this is what we implemented and why.

We required more control within the feedback form. Such as:

1. A legal paragraph to the user providing feedback
2. Not having a dropdown if there is only 1 type configured (feedback, support, etc.)

We setup the feedback form as much as we could to meet all of the requirements, but QA couldn’t get past the form. So many questions. Knowing that QA doesn’t get tripped up easily, we opted to NOT launch the KB feedback form.

Instead we launched a KB with:

1. A single step survey with just a feedback form available
2. The original intro tour - for the user to replay the Intro tour

We also have a KB that is triggered after the original intro tour letting the user know what they can find within the KB.

So we were able to accomplish our objectives, but sadly could not implement the feedback form. 

Feedback form, we had to greatly manipulate the css to get the lovely legal verbiage in the survey. So as you can imagine, we learned A LOT about how the engagements are created, modified, etc., when we delivered this.

Thank you for your detailed response; I appreciate the workaround.
I too had hard time with the ‘feedback type field’ with just one option.

If i may, how did you implement the feedback form, is this an embed from some app ?

@lpicone such a great walkthrough! I’m saving this link for the future.

Hi @Elli , hope this info is still helpful.

Due to our legal requirements we were not able to use the KCB feedback form so I started with a multistep survey form, added two different content types, then used CSS to control the rendering to the customer.

This was one of the first engagements we created and I have not gone back to optimize what was originally done. Below are the two css patterns for the step and survey css.

The easiest way to do it is to get the form setup then have a front-end developer manipulate the engagement css with the engagement presented within your product. This will give you the most control over the final result.

Good luck!

STEP css

.px-tii-title{
  font: var(--tdl-font-headline-medium, 500 28px/36px "Lexend Deca", "Noto Sans", arial, sans-serif);
  color: #191919;
  margin-bottom: 0px;
  width: 480px;

}

div.apt-engagement-wrapper-survey div.apt-survey-submit {
  justify-content: space-between;
}

.px-close-button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  color: #191919;
    background-size: 50px;

}




.px-survey-page-footer{
 justify-content: space-between;
  margin-bottom: 6px;
  min-width: 100px;
 }

div.apt-survey-step {
   justify-content: space-between;
  margin-bottom: 12px;
  min-width: 100px;

}

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

.px-step-navigation-snooze:hover{
		background-color: #2C5E66;
    color: #FFFFFF;;
	border-radius: 8px;
}

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;
}

.px-step-navigation-snooze{
	height: 40px;
  min-width: 108px;

}

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;
}

div.px-legal-disclaimer{
    font: var(--tdl-font-body-small-regular);
    color: var(--tdl-color-custom-gray);
  color: #888888;
  width: 107%;
}

.px-survey-high-score {
/* Rating High score label LOCATION*/
  font: var(--tdl-font-label-medium, 600 14px/20px "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-label-medium, 600 14px/20px "Noto Sans", "Open Sans", arial, sans-serif);
  color: #636363;
  text-align:left;

}


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%;
}

Survey CSS:

.px-tii-title{
  font: var(--tdl-font-headline-medium, 500 28px/36px "Lexend Deca", "Noto Sans", Arial, sans-serif);
  color: #191919;
  margin-bottom: -5px;
  width: 480px;
}

.comment{ 
  font: var(--tdl-font-label-large, 600 16px/24px "Noto Sans", "Open Sans", arial, sans-serif);
  color: #2D2D2D;
  margin: 20px 0px 0px 0px;
}


div.bottom-feedback-container > textarea {
	  font: var(--tdl-font-body-medium-regular, 400 14px/20px "Noto Sans", "Open Sans", arial, sans-serif);
		width: 110%;
  	height: 111px;
  	color: #888888;
    scroll-behavior: smooth;
  	border: 0px solid #CDCDCD;
		border-radius: 8px;

}

.px-tii-question-title{
  font: var(--tdl-font-label-large, 600 16px/24px "Noto Sans", "Open Sans", arial, sans-serif);
  color: #191919;
  margin: -2px 0px 0px 0px;
}


div.answer-wrapper{
  visibility:hidden;
  display: none;
  margin:0px 0px 0px 0px;
}

div.apt-survey-multi-choices-wrapper-1{ 					visibility:hidden;
  display: none;
  margin:0px 0px 0px 0px;
} 

div.answers-wrapper{
  visibility:hidden;
  display: none;  
  margin:0px 0px 0px 0px;
}

div.answers{
  visibility:hidden;
  display: none;

} 

div.px-survey-page-footer{
		flex-wrap: wrap;
    margin-bottom: 6px;
  	align-content: flex-end;
  display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-end;
    flex-direction: column;
    flex-wrap: wrap;
  flex-direction: column;
    align-content: flex-end;
}