Skip to main content
Sitecore Documentation
  • Learn
  • Downloads
  • Changelog
  • Roadmap
PersonalizeCloud Portal
Sitecore Personalize
    • A/B Test Analysis report
    • Analyze and Export report
    • Goals report
    • Offers report
    • UTM report
        • Create a Voice of the customer experience
  • Using client-side JavaScript
  • Glossary
  1. Voice of Customer dashboard
  1. Sitecore Personalize
  3. View dashboards
  5. Voice of Customer dashboard
  7. Create a Voice of the customer experience

Create a Voice of the customer experience

The Voice of the customer (VOC) experience is an effective tool for gathering customer feedback, providing insights into their expectations, preferences, and concerns. By analyzing this data, you can track overall customer satisfaction and make informed decisions to improve your business practices.

For example, a feedback button can be embedded on a flight booking page, allowing customers to easily provide input during their flight search and booking experience. This type of feedback mechanism is a key component of the VOC experience, helping capture real-time feedback from users to improve services.

This walkthrough guides you through the process of creating a VOC experience and sending a stream FEEDBACK event to capture customer feedback. The collected data will then populate the Voice of the customer dashboard, allowing you to monitor metrics like Net Promoter Score (NPS) and Customer Satisfaction Score (CSAT).

This walkthrough describes how to:

  1. Create a VOC experience using a custom web template.

  2. Format a FEEDBACK event and send it to capture customer feedback.

Create a VOC experience using a custom web template

This procedure shows you how to create a VOC web experience by creating a custom web template and configuring the HTML, CSS, and JavaScript code.

To create a VOC experience using a custom web template:

  1. On the navigation menu, click Experiences.

  2. In the experience list, click Create > Web.

  3. In the Name your Experience dialog, enter a name for the voice of the customer experience. Sitecore Personalize automatically creates an ID when you name the experience.

  4. Click Create to create a new experience.

  5. In the Experience tile, click Create variant.

  6. Click Create template to create a new web template using custom code. The code editor displays for you to customize the template using HTML, CSS, JavaScript, and FreeMarker.

  7. Copy and paste the following HTML, CSS, and JavaScript codes into the relevant tabs and then click Save. You can preview the VOC web experience to see how it will display on your organization’s website.

    HTML

    <div id="bx-modal_overlay">
    <div class="bx-modal_content abper-112-modal">
        
        <div class="bx-options" id="bx-options">
            <div id="abper-112-feedback-content" class="abper-112-feedback-content">
                <a class="abper-112-link abper-112-feedback abper-112-submit-feedback" href="[[Button Link 1 | string | #]]" id="bx-feedback_option" role="link" tabindex="0">
                    <i class="abper-112-icon abper-112-icon-feedback"></i>
                    <h2 class="abper-112-title">[[Title 1 | string | Leave website feedback]]</h2>
                    <hr class="abper-112-hr">
                    <p class="abper-112-text">[[Message 1 | text | Your opinion is important to us. Help us improve your online experience]]</p>
                    <span class="abper-112-button abper-112-secondary abper-112-submit-feedback">[[Button text 1 | string | Submit feedback]]</span>
                </a>
                <a class="abper-112-link abper-112-contact" id="bx-contact_link" href="[[Button link 2 | string | #]]" role="link"
                    tabindex="0">
                    <i class="abper-112-icon abper-112-icon-contact"></i>
                    <h2 class="abper-112-title">[[Title 2 | string | Get in touch]]</h2>
                    <hr class="abper-112-hr">
                    <p class="abper-112-text">[[Message 2 | text | Need answers? Here are the most convenient ways to contact us]]</p>
                    <span class="abper-112-button abper-112-secondary">[[Button text 2 | string | Contact us]]</span>
                </a>
                <a class="abper-112-link abper-112-complaint" id="bx-complaint_link" href="[[Button link 3 | string | #]]" role="link" tabindex="0">
                    <i class="abper-112-icon abper-112-icon-complaint"></i>
                    <h2 class="abper-112-title">[[Title 3 | string | Raise a concern]]</h2>
                    <hr class="abper-112-hr">
                    <p class="abper-112-text">[[ Message 3 | text | If you've had a less than satisfying experience, we'd like to hear from you]]</p>
                    <span class="abper-112-button abper-112-secondary">[[Button text 3 | string | Submit a complaint]]</span>
                </a>
            </div>
        </div>

        <div class="bx-rating bx-hidden qubit-VisitorPulse-question" id="bx-rating">
            <h1 class="bx-header_question" id="bx-header_question">How satisfied were you with your website experience?</h1>
            <fieldset class="rating" id="bx-rating_buttons">
                <input type="radio" id="star5" name="rating" value="5" /><label class="bx-star5" for="star5" title="Excellent"></label>
                <input type="radio" id="star4" name="rating" value="4" /><label class="bx-star4" for="star4" title="Good"></label>
                <input type="radio" id="star3" name="rating" value="3" /><label class="bx-star3" for="star3" title="Average"></label>
                <input type="radio" id="star2" name="rating" value="2" /><label class="bx-star2" for="star2" title="Poor"></label>
                <input type="radio" id="star1" name="rating" value="1" /><label class="bx-star1" for="star1" title="Very Poor"></label>
                <span class="bx-radio_label bx-label5">Excellent</span>
                <span class="bx-radio_label bx-label4">Good</span>
                <span class="bx-radio_label bx-label3">Average</span>
                <span class="bx-radio_label bx-label2">Poor</span>
                <span class="bx-radio_label bx-label1">Very Poor</span>
            </fieldset>
        </div>

        <div class="bx-comment bx-hidden" id="bx-comment">
            <h1 class="bx-header_question">How satisfied were you with your website experience?</h1>
            <textarea class="bx-comment_textarea" id="bx-comment_textarea" maxlength="1500" placeholder="Tell us how we can make your experience better*"></textarea>
            <div class="bx-comment_warning">* Do not enter personal information here</div>
            <div class="bx-comment_submit qubit-VisitorPulse-submit" id="bx-submit_feedback" role="button" tabindex="0">Submit feedback</div>
        </div>

        <div class="bx-thank_you bx-hidden" id="bx-thank_you">
            <div class="qubit-VisitorPulse-thankYou" aria-hidden="false">
                <div class="abper-112-thank-you">
                    <i class="abper-112-icon-check abper-112-hidden-desktop"></i>
                    <div class="qubit-VisitorPulse-thankYouText">Thank you for your feedback</div>
                    <i class="abper-112-icon-check abper-112-hidden-mobile"></i>
                    <p class="abper-112-text">If you have any questions or need help please visit our
                        <a class="abper-112-faq-link" id="bx-faq_link" href="#"
                            title="">Resources</a> or
                        <a class="abper-112-contact-us-link" id="bx-contact_link2" href="#"
                            title="">Contact us</a> section.
                    </p>
                </div>
                <button aria-label="Close" class="abper-112-button abper-112-primary abper-112-close-button" id="bx-close">Close</button>
            </div>
        </div>

        <div class="bx-modal__btn-close-icon"></div>
    </div>
</div>

    CSS

    #bx-modal_overlay {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0,0,0,0.4);
    font-family: Arial,HelveticaNeue,Helvetica Neue,Helvetica,Lucida Grande,sans-serif;
}

#bx-modal_overlay .bx-modal_content {
    display: flex;
    flex-direction: column;
    position:relative;
    background-color: #F6F6F6;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 2px 10px 6px rgba(0,0,0,0.3);
    height: 100%;
    width: 100%;
    border: none;
}

@media screen and (min-width: 1024px) {
    #bx-modal_overlay .bx-modal_content {
        max-width: 1056px;
        height: auto;
        min-height: 100px;
        width: auto;
    }
}

#bx-modal_overlay .bx-modal_button-wrapper {
    display: flex;
    margin-top: auto;
}

#bx-modal_overlay .bx-modal_button {
    display: inline-block;
    border-radius: 4px;
    color: #fff;
    background-color: #00B377;
    padding: 10px 23px;
}

.bx-hidden {
    display: none ;
}

.bx-hidden_important {
    display: none !important;
}

/* Options Screen */
.bx-options {
    display: flex;
}

.bx-options .abper-112-text {
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.5;
    margin: 16px 0 30px;
    padding-bottom: 0;
}

.abper-112-link {
    cursor: pointer; 
}

/* Radio button modal */

.bx-modal_content h1 {
    font-size: 30px;
    line-height: 34px;
    font-family: Georgia,"Times New Roman",Times,serif !important;
    max-width: 90%;
    margin: auto;
    text-align: center;
}

.bx-modal_content {
    text-align: center;
}

.bx-comment > .bx-comment_textarea {
    height: 174px;
    width: 80%;
    border: 1px solid #666;
    border-radius: 3px;
    padding: 15px 18px 16px 20px;
    resize: none;
    margin: 10px auto 10px;
    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 16px;
    font-weight: 300;
} 

.bx-comment > .bx-comment_warning {
    color: #999;
    text-align: left;
    width: 80%;
    margin: 10px auto 30px;
    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 300;
}

/* Rating screen */
.bx-modal_content > #bx-rating {
    padding: 30px 20px 20px;
}

.bx-radio_label {
    display: none;
}

@media screen and (min-width: 1024px) {
    .bx-radio_label {
      right: 0;
      left: 0;
      bottom: 10px;
      position: absolute;
      font-size: 14px;
    }

    .rating .bx-star5:hover ~ .bx-label5 {
       display: block;
    }

    .rating .bx-star4:hover ~ .bx-label4 {
       display: block;
    }

    .rating .bx-star3:hover ~ .bx-label3 {
       display: block;
    }

    .rating .bx-star2:hover ~ .bx-label2 {
       display: block;
    }

    .rating .bx-star1:hover ~ .bx-label1 {
       display: block;
    }
}

/* Rating Stars */
.rating {
    display: inline-block;
    border: none;
    height: 75px;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    padding:0.3em .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:300%;
    line-height:1.2;
    color:#ddd;
}

.rating:not(:checked) > label:before {
    content: url(https://c.ekstatic.net/ecl/iconography/e72585a018510638901dd029c05d0724_40_38.png);
}

.rating > input:checked ~ label {
    content: url(https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016_40_38.png);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    content: url(https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016_40_38.png);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    content: url(https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016_40_38.png);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}

/* Comment Screen */
.bx-comment {
    padding: 30px 20px 20px;
}

/* Thank You Screen */
.bx-thank_you {
    padding: 30px 20px 20px;
}

/* close button */
.bx-modal__btn-close-icon {
    background: transparent;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    margin-top: 20px;
    margin-right: 25px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.bx-modal__btn-close-icon:after {
    content: '';
    height: 30px;
    border-left: 2px solid #75808F;
    position: absolute;
    transform: rotate(45deg);
}

.bx-modal__btn-close-icon:before {
    content: '';
    height: 30px;
    border-left: 2px solid #75808F;
    position: absolute;
    transform: rotate(-45deg);
}

/* Comment Screen */

    /*font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;*/
    
/* Mobile Web Feedback Button */
.abper-112-toggle .bx-mobile_web_feedback_button {
    padding: 15px 25px;
}

@media screen and (min-width: 1024px) {
    .abper-112-toggle .bx-mobile_web_feedback_button {
        padding: 0;
    }
}

/******* EK CSS *******/

@font-face {
    font-family: ek-font-icons;
    src: url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.eot);
    src: url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.ttf) format("truetype"), url(https://cdn.ek.aero/shared/fonts/ek-icons/ek-font-icons.svg#ek-font-icons) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: heroic-condensed-black-oblique;
    src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.eot);
    src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.ttf) format("truetype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-black-oblique.svg#heroic-condensed-black-oblique) format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: heroic-condensed-medium-oblique;
    src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.eot);
    src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-medium-oblique.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: heroic-condensed-light-oblique;
    src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.eot);
    src: url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.eot?#iefix) format("embedded-opentype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.woff) format("woff"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.ttf) format("truetype"), url(https://cdn.ek.aero/shared/fonts/heroic/heroic-condensed-light-oblique.svg#heroic-condensed-light-oblique) format("svg");
    font-weight: 400;
    font-style: normal;
}


/*.abper-112-modal {
[tabindex]:focus {
    border: none;
    border-radius: 3px;
    box-shadow: none;
    outline: none;
}*/

a {
    text-decoration: underline;
}

a:active,
a:focus,
a:hover {
    text-decoration: none;
}


.abper-112-modal.qubit-AdvancedModal {
    align-items: normal;
    left: auto;
    padding: 0;
    right: auto;
    width: 100%;
    z-index: 9999;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal.qubit-AdvancedModal {
        align-items: center;
    }
}
@media (max-width: 768px) {
    .abper-112-modal .qubit-AdvancedModal-body {
        height: 100%;
    }
}
.abper-112-modal .qubit-AdvancedModal-box {
    background-color: #f6f6f6;
    display: block;
    height: 100%;
    max-height: none;
    width: 100%;
    z-index: 9999;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-AdvancedModal-box {
        height: auto;
        width: auto;
    }
}
.abper-112-modal .qubit-AdvancedModal-Icon {
    color: #333;
    font-size: 10px;
}
.abper-112-modal .qubit-VisitorPulse {
    color: #333;
    display: flex;
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 16px;
    flex-grow: 1;
    margin: auto;
}
.abper-112-modal .qubit-VisitorPulse-content {
    display: flex;
    margin: 0 auto;
    overflow: auto;
    padding: 30px 20px 20px;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .abper-112-modal .qubit-VisitorPulse-content {
        margin: auto;
    }
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-content {
        display: block;
        margin: 0 auto;
    }
}
.abper-112-modal .qubit-VisitorPulse-titleContainer {
    display: none;
}
.abper-112-modal .qubit-VisitorPulse-question {
    border-bottom: none;
    margin-bottom: 0;
    max-width: 690px;
    padding-bottom: 0;
    text-align: center;
}
.abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-questionName {
    color: #333;
    font-family: Helvetica, Arial, Lucida Grande, sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 auto 20px;
    text-align: center;
    width: 80%;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-questionName {
        font-size: 30px;
        line-height: 34px;
    }
}
.abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-radios {
    height: 75px;
    position: relative;
    width: 260px;
}
.abper-112-modal .qubit-VisitorPulse-question .qubit-VisitorPulse-radio input {
    display: none;
}
.abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    width: 20%;
}
.abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioOuter {
    background: url('https://c.ekstatic.net/ecl/iconography/e72585a018510638901dd029c05d0724_40_38.png');
    background-repeat: no-repeat;
    height: 40px;
    margin: 0;
    width: 40px;
}
.abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio.abper-112-active .qubit-VisitorPulse-radioOuter {
    background: url('https://c.ekstatic.net/ecl/iconography/27b9f781a94a8af00418bf50ea278016_40_38.png');
    background-repeat: no-repeat;
}
.abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioInner {
    display: none;
}
.abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioText {
    bottom: 10px;
    display: none;
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 14px;
    font-weight: normal;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 100%;
}
.abper-112-modal .qubit-VisitorPulse-question:first-child .qubit-VisitorPulse-radio .qubit-VisitorPulse-radioText.abper-112-visible {
    display: inline-block;
}
.abper-112-modal .qubit-VisitorPulse-question:nth-child(2) {
    display: none;
}
.abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .qubit-VisitorPulse-textarea {
    background: #fff;
    border: 1px solid #666;
    border-radius: 3px;
    box-shadow: inset 4px 4px 0 0 #f6f6f6;
    color: #333;
    display: block;
    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 16px;
    font-weight: 300;
    height: 214px;
    margin: auto;
    padding: 20px 18px 16px 20px;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .qubit-VisitorPulse-textarea {
        height: 174px;
        width: 80%;
    }
}
.abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .abper-112-optional {
    color: #999;
    font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 300;
    margin: 10px auto 30px;
    text-align: left;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-question:nth-child(2) .abper-112-optional {
        width: 80%;
    }
}
.abper-112-modal .qubit-VisitorPulse-question.abper-112-visible {
    display: block;
}
.abper-112-modal .qubit-VisitorPulse-question.abper-112-hide {
    display: none;
    visibility: hidden;
}
.abper-112-modal .qubit-VisitorPulse-submit {
    background-color: #c60c30;
    border-color: #c60c30;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    line-height: normal;
    margin: auto 0 0;
    max-width: 690px;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .abper-112-modal .qubit-VisitorPulse-submit {
        margin: 0 auto;
    }
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-submit {
        width: 317px;
    }
}
.abper-112-modal .qubit-VisitorPulse-submit:hover {
    background-color: #c60c30;
    border-color: #c60c30;
    box-shadow: 0 0 6px 0 #333;
    color: #fff;
}
.abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
    display: inline-block;
    visibility: visible;
}
.abper-112-modal .qubit-VisitorPulse-thankYou {
    flex-direction: column;
    flex-grow: 1;
    margin: 0 auto;
    max-width: 690px;
    overflow: auto;
    padding: 40px 20px 20px;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .abper-112-modal .qubit-VisitorPulse-thankYou {
        margin: auto;
    }
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-thankYou {
        margin: 0 auto;
        overflow: hidden;
    }
}
.abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-icon-check {
    border: 2px solid green;
    border-radius: 50px;
    box-sizing: border-box;
    height: 70px;
    margin: 0 auto 30px;
    width: 70px;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-icon-check {
        margin: 40px auto 20px;
        height: 60px;
        width: 60px;
    }
}
.abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-icon-check::before {
    border-bottom: 2px solid green;
    border-right: 2px solid green;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    height: 30px;
    margin-top: -5px;
    position: relative;
    top: 50%;
    transform: rotate(45deg) translateX(-60%) translateY(-35%);
    width: 15px;
}
.abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-text {
    flex-grow: 0;
    padding-left: 0;
    padding-right: 0;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-text {
        margin-bottom: 30px;
    }
}
.abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-close-button {
    margin: auto 0 0;
}
@media screen and (min-width: 768px) {
    .abper-112-modal .qubit-VisitorPulse-thankYou .abper-112-close-button {
        margin: 0;
    }
}
.abper-112-modal .abper-112-tripadvisor {
    border-top: 2px solid #d8d8d8;
    flex-grow: 1;
    padding: 20px 0 0;
}
.abper-112-modal .abper-112-tripadvisor.abper-112-tripadvisor-hide {
    display: none;
}
.abper-112-modal .abper-112-tripadvisor-logo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 80px;
    margin: auto;
    width: 100px;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .abper-112-tripadvisor-logo {
        height: 50px;
        position: relative;
        top: -10px;
        width: 63px;
        vertical-align: middle;
    }
}
.abper-112-modal .abper-112-tripadvisor-copy {
    display: inline-block;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .abper-112-tripadvisor-copy {
        text-align: left;
        width: 70%;
    }
}
.abper-112-modal .abper-112-close-button {
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 20px;
    min-height: 40px;
}
@media screen and (min-width: 1024px) {
    .abper-112-modal .abper-112-close-button {
        width: 317px;
    }
}
.abper-112-modal .abper-112-text {
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.5;
    margin: 16px 0 30px;
    padding-bottom: 0;
}
.abper-112-modal a,
.abper-112-modal a:hover {
    color: #333;
}
.abper-112-modal:hover,
.abper-112-modal:active,
.abper-112-modal:focus {
    outline: none !important;
}
.abper-112-modal *:focus {
    outline: none !important;
}
.abper-112-toggle {
    border-top: 1px solid rgba(255, 255, 255, .13);
    margin-top: auto;
}
.abper-112-toggle:hover,
.abper-112-toggle:active,
.abper-112-toggle:focus {
    outline: none;
}
.abper-112-toggle+.country-selector-mobile {
    margin-top: 0;
}
.abper-112-toggle .abper-112-text {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 14px;
    position: relative;
    vertical-align: middle;
}
@media screen and (min-width: 1024px) {
    .abper-112-toggle .abper-112-text {
        color: #333;
        width: auto;
    }
}
@media screen and (min-width: 1024px) {
    .abper-112-toggle {
        background-color: #fff;
        border-radius: 3px 3px 0 0;
        box-shadow: 0 1px 4px 1px #666;
        color: #333;
        cursor: pointer;
        font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 14px;
        height: 40px;
        overflow: hidden;
        padding: 10px 15px 25px 25px;
        position: fixed;
        right: 0;
        top: calc(50% - 120px);
        transform: rotate(-90deg);
        transform-origin: 100% 100%;
        z-index: 99;
    }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .abper-112-toggle {
        top: calc(25% - 120px);
    }
}
.abper-112-toggle .abper-112-toggle-container {
    position: relative;
}
.abper-112-toggle .abper-112-icon {
    background-image: url('https://c.ekstatic.net/ecl/iconography/4fb725e86a700af2f5a185035d78d864_48_42.png');
    background-size: cover;
    display: inline-block;
    height: 22px;
    vertical-align: middle;
    width: 25px;
}
@media screen and (min-width: 1024px) {
    .abper-112-toggle .abper-112-icon {
        background-image: url('https://c.ekstatic.net/ecl/iconography/9a9731bdeeac7dabae8183d63729c015_81_68.png');
        height: 20px;
        position: absolute;
        transform: rotate(90deg) translateY(15px);
    }
}
.abper-112-toggle .abper-112-text {
    display: none;
    line-height: 20px;
    padding: 0 0 0 15px;
}
.qubit-VisitorPulse-modal {
    display: none;
}
#abper-112-feedback-content {
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    margin: 0 auto;
    max-width: 690px;
    padding: 70px 10px;
    text-align: center;
    width: 100%;
}
@media screen and (min-width: 768px) {
    #abper-112-feedback-content {
        margin: auto;
    }
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content {
        display: flex;
        margin: 0 auto;
        max-width: 1056px;
        padding: 60px 40px;
    }
}
#abper-112-feedback-content .abper-112-feedback,
#abper-112-feedback-content .abper-112-contact,
#abper-112-feedback-content .abper-112-complaint {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.19);
    display: block;
    margin-bottom: 20px;
    padding: 10px 10px 0;
    position: relative;
    text-decoration: none;
}
#abper-112-feedback-content .abper-112-feedback span.abper-112-button,
#abper-112-feedback-content .abper-112-contact span.abper-112-button,
#abper-112-feedback-content .abper-112-complaint span.abper-112-button {
    pointer-events: none;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-feedback,
    #abper-112-feedback-content .abper-112-contact,
    #abper-112-feedback-content .abper-112-complaint {
        background: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-basis: auto;
        flex-direction: column;
        margin: 0;
        padding: 30px;
        width: 33.3333%;
    }
    
    #abper-112-feedback-content .abper-112-feedback::after,
    #abper-112-feedback-content .abper-112-contact::after,
    #abper-112-feedback-content .abper-112-complaint::after {
        border-right: 1px solid #d8d8d8;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
    }
}
#abper-112-feedback-content .abper-112-title {
    text-align: center;
}
#abper-112-feedback-content .abper-112-title,
#abper-112-feedback-content .abper-112-hr,
#abper-112-feedback-content .abper-112-text {
    display: none;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-title,
    #abper-112-feedback-content .abper-112-hr,
    #abper-112-feedback-content .abper-112-text {
        display: inline-block;
    }
}
#abper-112-feedback-content .abper-112-complaint::after {
    border: none;
}
@media screen and (max-width: 1023px) {
    #abper-112-feedback-content .abper-112-button,
    #abper-112-feedback-content .abper-112-button:hover {
        background: none;
        border: none;
        box-shadow: none;
        color: #333;
        font-weight: bold;
        margin-bottom: 10px;
        padding: 6px;
        width: 100%;
    }
}
#abper-112-feedback-content .abper-112-icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 55px;
    margin: 0 auto;
    width: 60px;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-icon {
        height: 68px;
        margin: 0 auto 20px;
        width: 80px;
    }
}
#abper-112-feedback-content .abper-112-icon-feedback {
    background-image: url('https://c.ekstatic.net/ecl/iconography/9a149a9f19b5506ca8a908f23f01c24f_60_60.png');
    height: 34px;
    width: 34px;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-icon-feedback {
        background-image: url('https://c.ekstatic.net/ecl/iconography/9a9731bdeeac7dabae8183d63729c015_81_68.png');
        height: 68px;
        width: 81px;
    }
}
#abper-112-feedback-content .abper-112-icon-contact {
    background-image: url('https://c.ekstatic.net/ecl/iconography/dcb2d20bb523a4d1b635194758896024_60_60.png');
    height: 34px;
    width: 34px;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-icon-contact {
        background-image: url('https://c.ekstatic.net/ecl/iconography/c8be9d69c9aa7b9c193ce1049e616f36_81_68.png');
        height: 68px;
        width: 81px;
    }
}
#abper-112-feedback-content .abper-112-icon-complaint {
    background-image: url('https://c.ekstatic.net/ecl/iconography/f633a3e3102979ba5c912a4b09c74c86_60_60.png');
    height: 34px;
    width: 34px;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-icon-complaint {
        background-image: url('https://c.ekstatic.net/ecl/iconography/fbc91a6287d56b2f84607070934ba7d8_81_68.png');
        height: 68px;
        width: 81px;
    }
}
#abper-112-feedback-content .abper-112-title,
.abper-112-thank-you .qubit-VisitorPulse-thankYouText {
    color: #333;
    font-family: Helvetica, Arial, Lucida Grande, sans-serif !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}
@media screen and (min-width: 1024px) {
    #abper-112-feedback-content .abper-112-title,
    .abper-112-thank-you .qubit-VisitorPulse-thankYouText {
        font-size: 30px;
        line-height: 34px;
    }
}
.abper-112-modal .qubit-VisitorPulse-thankYouText {
    font-size: 30px;
    line-height: 1.25;
    margin: 0;
}
hr.abper-112-hr {
    background: none;
    border: none;
    border-top: 2px solid #c60c30;
    display: inline-block;
    margin: 0 auto;
    width: 60px;
}
.abper-112-button,
.qubit-VisitorPulse-submit {
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    padding: 11px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
@media screen and (min-width: 1024px) {
    .abper-112-button,
    .qubit-VisitorPulse-submit {
        width: auto;
    }
}
.abper-112-button:hover,
.qubit-VisitorPulse-submit:hover {
    box-shadow: 0 0 6px 0 #666;
}
.abper-112-button.abper-112-primary,
.qubit-VisitorPulse-submit.abper-112-primary {
    background-color: #c60c30;
    border-color: #c60c30;
    color: #fff;
    font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 14px;
    font-weight: 700;
}
.abper-112-button.abper-112-primary:hover,
.qubit-VisitorPulse-submit.abper-112-primary:hover {
    background-color: #c60c30;
    border-color: #c60c30;
    color: #fff;
}
.abper-112--focus {
    border-radius: 2px !important;
    box-shadow: 0 0 2px 1.5px #fff, 0 0 3px 3px #000, inset 0 0 0.5px 0.5px #fff, inset 0 0 0.5px 1.5px #000 !important;
    outline: 0 !important;
}
.qubit-VisitorPulse-hidden {
    visibility: hidden;
}
@media (max-width: 480px) {
    .ekglobal-navigation-megamenu-holder.menu--opened {
        overflow-y: scroll;
    }
}
@media (orientation: portrait) {
    .abper-112-modal .qubit-VisitorPulse {
        display: block;
    }
    
    .abper-112-modal .qubit-AdvancedModal-body {
        flex: none;
        height: 100%;
    }
    
    .abper-112-modal .qubit-VisitorPulse {
        display: block;
    }
    
    .abper-112-modal .qubit-VisitorPulse-content {
        height: 100%;
        position: relative;
    }
    
    .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
        bottom: 30px;
        left: 20px;
        right: 20px;
        position: absolute;
        width: auto;
    }
    
    .abper-112-modal .qubit-VisitorPulse-thankYou {
        height: 100%;
        position: relative;
    }
}
@media (orientation: portrait) and (min-width: 768px) {
    .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
        bottom: 60px;
        left: 30px;
        right: 30px;
    }
}
@media (orientation: portrait) and (min-width: 1024px) {
    .abper-112-modal .qubit-VisitorPulse-submit.abper-112-visible {
        bottom: auto;
        left: auto;
        position: relative;
        right: auto;
        width: 317px;
    }
}
@media (orientation: portrait) and (min-width: 768px) {
    .abper-112-modal .abper-112-button.abper-112-primary.abper-112-close-button {
        bottom: 60px;
        left: 0;
        max-width: 690px;
        position: absolute;
    }
}
@media (orientation: portrait) and (min-width: 1024px) {
    .abper-112-modal .abper-112-button.abper-112-primary.abper-112-close-button {
        bottom: auto;
        left: auto;
        position: relative;
        right: auto;
    }
}
.ek .abper-112-modal [contentEditable=true]:not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal [tabindex]:not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal a:not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal area:not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal button:not([disabled]):not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal iframe:not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal input:not([disabled]):not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal select:not([disabled]):not([tabindex='-1']):not(.panel-disabled):focus,
.ek .abper-112-modal textarea:not([disabled]):not([tabindex='-1']):not(.panel-disabled):focus {
    outline: none !important;
}
.ek .abper-112-modal p a {
    text-decoration: underline;
}
.ek .abper-112-modal p a:hover {
    text-decoration: none;
}
@media screen and (min-width: 1024px) {
    .ek-global-navigation .abper-112-toggle[tabindex="0"]:focus {
        border-radius: 3px 3px 0 0 !important;
        box-shadow: 0 1px 4px 1px #666 !important;
    }
}
.abper-112-toggle[tabindex]:focus:not(a):not(button) {
    border-radius: 0;
    box-shadow: none;
}
@media screen and (min-width: 1024px) {
    .abper-112-toggle[tabindex]:focus:not(a):not(button) {
        border-radius: 3px 3px 0 0;
        box-shadow: 0 1px 4px 1px #666;
    }
}
.abper-112-modal a:focus {
    border-radius: none;
    box-shadow: none;
}
.page-template.leaderboard-template .abper-112-toggle {
    height: 5px;
}
.ekglobal-navigation-megamenu-holder.menu--opened .abper-112-toggle {
    height: auto;
}
.abper-112-modal label.qubit-VisitorPulse-radio * {
    pointer-events: none;
}
.abper-112-modal * {
    -webkit-tap-highlight-color: transparent;
}
.abper-112-toggle {
    display: none;
}
@media screen and (min-width: 1024px) {
    .abper-112-toggle {
        display: block;
    }
}
.abper-112-toggle+.nav__lang-wrapper {
    margin-top: 0;
}
.nav--show .abper-112-toggle {
    display: block;
}
.ek-global-navigation .menu--opened .abper-112-toggle,
.main-navigation__nav .nav--mobile .abper-112-toggle {
    display: block;
}
@media screen and (min-width: 1024px) {
    .ek-global-navigation .menu--opened .abper-112-toggle,
    .main-navigation__nav .nav--mobile .abper-112-toggle {
        display: none;
    }
}
.ek-global-navigation .menu--opened .abper-112-toggle+div,
.main-navigation__nav .nav--mobile .abper-112-toggle+div {
    display: block;
}
.main-navigation__nav .nav--mobile .abper-112-toggle-container {
    padding: 15px;
}
.abper-112-hidden-mobile {
    display: none !important;
}
@media screen and (min-width: 1024px) {
    .abper-112-hidden-mobile {
        display: inline-block !important;
    }
}
.abper-112-hidden-desktop {
    display: inline-block !important;
}
@media screen and (min-width: 1024px) {
    .abper-112-hidden-desktop {
        display: none !important;
    }
}

    JavaScript

    insertHTMLAfter('body');

/* Get all elements required */
var bxMobileWebFeedbackButton = document.getElementById('bx-mobile_web_feedback_button');
var bxModal = document.getElementById('bx-modal_overlay');
var bxFeedback = document.getElementById('bx-feedback_option');
var bxOptions = document.getElementById('bx-options');
var bxRating = document.getElementById('bx-rating');
var bxModalClose = bxModal.querySelector('.bx-modal__btn-close-icon');
var bxRatingButtons = document.getElementById('bx-rating_buttons');
var bxComment = document.getElementById('bx-comment');
var bxCommentTextarea = document.getElementById('bx-comment_textarea');
var bxSubmitFeedback = document.getElementById('bx-submit_feedback');
var bxThankYou = document.getElementById('bx-thank_you');
var bxCloseButton = document.getElementById('bx-close');
var bxModalOverlay = document.getElementById('bx-modal_overlay');
var ratingValue = 0;

function closeModal() {
    bxThankYou.style.display = 'none';
    bxComment.style.display = 'none';
    bxRating.style.display = 'none';
    bxOptions.style.display = 'flex';
    bxModal.style.display = 'none';
    if (document.querySelector(".rating > input:checked")) {
        document.querySelector(".rating > input:checked").checked = false;
        bxCommentTextarea.value = "";
    }
}

function getPos() {
    var re = new RegExp('sitecore.com\/[a-z]{2}\/');
    var matches = re.exec(window.location.href);
    if (matches && matches.length > 0)
        return matches[0].substring(0, matches[0].length - 1);
    else
        return "sitecore.com";
}

bxModal.style.display = 'flex';

bxFeedback.onclick = function() {
    bxOptions.style.display = 'none';
    bxRating.style.display = 'block';
};

function getRadioValue() { 
    var stars = document.getElementsByName('rating'); 
    for(i = 0; i < stars.length; i++) { 
        if(stars[i].checked) 
            return stars[i].value;
    } 
}

bxRatingButtons.onclick = function() {
    ratingValue = getRadioValue();
    if (ratingValue) {
        bxRating.style.display = 'none';
        bxComment.style.display = 'block';
    }
};

bxSubmitFeedback.onclick = function() {
    console.log("Submit feedback clicked");
    var feedbackEvent = {
        "channel": "WEB",
        "type": "FEEDBACK",
        "language": "EN",
        "currency": "EUR",
        "page": "home",
        "pos": getPos(),
        "browser_id": Boxever.getID(),
        "rating": ratingValue,
        "comment": document.getElementById('bx-comment_textarea').value,
        "survey_id": "150174",
        "question_text": document.getElementById('bx-header_question').textContent,
        "page_category": "",
        "visitor_session_id": "",
        "platform_type": "",
        "country_region": "",
        "member_tier": "",
        "page_url": window.location.href
    };
    console.log("Feedback event:", feedbackEvent);
    Boxever.eventCreate(feedbackEvent, function (data) {
        console.log("Feedback event sent:", data);
        // Only toggle visibility after the feedback event is processed
        bxThankYou.style.display = 'block';
        bxComment.style.display = 'none';
    }, 'json');
};

bxModalClose.onclick = function() {
    closeModal();
};

bxCloseButton.onclick = function() {
    closeModal();
};

var pos = getPos();
document.getElementById('bx-contact_link').setAttribute("href", ("https://www." + pos + "/company/contact-us") );
document.getElementById('bx-complaint_link').setAttribute("href", ("https://www." + pos + "/resources/support") );
document.getElementById('bx-faq_link').setAttribute("href", ("https://www." + pos + "/resources/support") );
document.getElementById('bx-contact_link2').setAttribute("href", ("https://www." + pos + "/company/contact-us") );

/* Add feedback to card on Help page */
if (document.querySelector('ul.help-centre-feedback__cards-container > li [data-link="Complaints and feedback:Website feedback"]')) {
    var helpFeedbackCard =  document.querySelector('ul.help-centre-feedback__cards-container > li [data-link="Complaints and feedback:Website feedback"]');
    helpFeedbackCard.onclick = function() {
        bxOptions.style.display = 'none';
        bxRating.style.display = 'block';
        bxModal.classList.remove("bx-hidden_important");
        bxModal.style.display = 'flex';
    };
}

Format and send a FEEDBACK event

To ensure that customer feedback displays on the  Voice of the customer dashboard in Sitecore Personalize, you must format a stream FEEDBACK event as a custom event and send it to capture the data.

To format and send a FEEDBACK event:

  1. Send a custom event with these required attributes:

    • "channel" - the channel through which the event was sent. Possible values include: "WEB", "MOBILE_WEB", or "MOBILE_APP".

    • "type" - the type of events must be set to "FEEDBACK" to represent a feedback event.

    • "question_text" - the specific question asked to the customer, such as How satisfied were you with your website experience?.

    • "rating" - the numerical response to the question, ranging from 1 to 5, where 1 represents the lowest score and 5represents the highest.

    • "comment" - a free-text response from the customer, which can contain written feedback related to their experience.

    • "execution_ref" - a unique reference for the flow execution.

    • "pos" - the point of sale configured for the tenant, for example, retailsite.com.

    • "browser_id" - a unique ID of a browser generated by Sitecore Personalize.

    Here's an example of a FEEDBACK event in JSON format:

    {
   "channel":"WEB",
   "type":"FEEDBACK",
   "question_text":"How satisfied were you with your website experience?",
   "rating":5,
   "comment":"Fantastic customer service when I needed to change my order",
   "execution_ref":"ec5b12fc-f70b-4bcc-950e-338bbf41c66e",
   "pos":"retailsite.com",
   "browser_id":"22860bff-94ba-4d84-aa37-2b5a83d5411b"
}

  2. Optionally, after sending a FEEDBACK event, you can view its details on the  Voice of the customer dashboard. This dashboard aggregates customer feedback and allows you to track key metrics based on attributes included in the FEEDBACK event.

    • The rating value is used to calculate the ratings displayed on the Average Rating and NPS Rating tiles.

    • The text captured in the comment attribute is displayed in the dashboard's Word clouds, if enough customers have responded with similar feedback.

If you have suggestions for improving this article, let us know!

© Copyright 2026, Sitecore A/S or a Sitecore affiliated company.
All rights reserved.

Privacy policySitecore Trust CenterTerms of use