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:

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:

On the navigation menu, click Experiences.
In the experience list, click Create > Web.
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.
Click Create to create a new experience.
In the Experience tile, click Create variant.
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.

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

RequestResponse

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

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:

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:
RequestResponse
```
{
   "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"
}
```
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.

Do you have some feedback for us?

If you have suggestions for improving this article,