Solved

Guiding user to leave feedback on KCB

  • 8 February 2024
  • 4 replies
  • 71 views
E
Rank
Userlevel 2

I am currently exploring ways to motivate our users to provide feedback through the Feedback tab in our Knowledge Center Bot (KCB). The default setting displays guides and articles, which is useful, but not quite what I need in this context.

While I am aware of the custom button functionality that allows for the opening of the KCB in its default tab, I have not been able to find a solution to open the KCB directly to the Feedback tab. This would be particularly helpful when triggered by an engagement custom button or a similar action.

I would greatly appreciate any insights or suggestions you might have on how to achieve this. 

Thank you very much for your time and support.

Best regards, Elli

icon

Best answer by lpicone 6 March 2024, 04:00

View original
Cheers, Elli from Proggio

4 replies

L
Rank
Userlevel 3

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! Leah
E
Rank
Userlevel 2

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 ?

Cheers, Elli from Proggio
romihache
Rank
Userlevel 5
Badge +5

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

Continuous improvement is better than delayed perfection
L
Rank
Userlevel 3

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

 

~ Thank you! Leah

Reply


Terms & ConditionsCookie settings