How to Create an HTML Email Feedback

Written By Fikri Ghazi

Screenshot: HTML feedback email in Outlook

There are 3 components when adding an HTML email feedback. First is the HTML email itself; second is the API to submit the feedback to; and third is the HTML page that you want the users to get redirected to after submitting the feedback from the email.

Step 1 - Add email action to your chat workflow

Open your chat workflow settings, and add an action to send an email. Typically this action is located at the end of the chat workflow.

Screenshot: Adding email action to the support chat workflow

Step 2 - Add the HTML template

Copy paste the following HTML template into the chat workflow email settings. Make sure to test on Outlook and that the HTML works there.

Screenshot: Chat workflow email settings

Step 3 - Create a web page to redirect user after submitting feedback from email

There are buttons in the feedback email to rate the experience from 1 to 5. Each button is a clickable link. When a user clicks on that link, it should open a web page and the feedback will be submitted from that web page.

Screenshot: Web page to submit the feedback

And here is an example code of that feedback page users redirect to. 

<div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-12 col-lg-5">
                <div class="card shadow-none my-5">
                    <div class="card-body p-4">                      
                        <div id="feedbackContent">
                          {% form asp_action:"PostFeedback", asp_controller: "Feedback", asp_area: "ChimeV5.GuestFeedback",  method:"post" %}
                            <h4 class="text-center mb-2">Thank you for the feedback!</h4>
                            
                            <div class="text-center star-rating mb-4">
                                <i class="fas fa-star" onclick="updateStars(1)"></i>
                                <i class="fas fa-star" onclick="updateStars(2)"></i>
                                <i class="fas fa-star" onclick="updateStars(3)"></i>
                                <i class="fas fa-star" onclick="updateStars(4)"></i>
                                <i class="far fa-star" onclick="updateStars(5)"></i>
                            </div>

                            <div class="mb-1 text-center">
                                <label for="feedback" class="form-label">Would you mind sharing more details about your experience?</label>
                                <textarea class="form-control" id="feedback" rows="4" placeholder="Tell us more about your experience..."></textarea>
                            </div>

                            <button class="btn btn-primary w-100" onclick="submitFeedback(event)">Submit Details</button>
                          {% endform %}
                        </div>
						
                        <div id="thankYouMessage" class="text-center py-4" style="display: none;">
                            <h4 class="text-success mb-3">Thank you for your feedback!</h4>
                            <p class="text-muted">Your response has been recorded.</p>
                        </div>
						<div id="errorMessage" class="text-center py-4" style="display: none;">
                            <h4 class="text-danger mb-3">Error saving feedback!</h4>
                            <p class="text-muted">Your response has not been recorded.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
      	let sessionId = "";
        document.addEventListener('DOMContentLoaded', function() {
            const urlParams = new URLSearchParams(window.location.search);
            const rating = urlParams.get('rating') || 4;
            //document.getElementById('ratingValue').textContent = rating;
            updateStars(rating);
      		sessionId = urlParams.get("SessionId");
      		if (!sessionId){
				sessionId = urlParams.get("sessionId");
      		}
      		console.log("SessionId is ", sessionId);
            for (const [key, value] of urlParams.entries()) {
              console.log(`${key}: ${value}`);
            }
        });

        function updateStars(rating) {
            const stars = document.querySelectorAll('.star-rating i');
            stars.forEach((star, index) => {
                star.className = index < rating ? 'fas fa-star' : 'far fa-star';
            });
        }

        function submitFeedback(e) {
            e.preventDefault();
            let postUrl = "/feedback/PostFeedback";
            postUrl = $("#feedbackContent form").attr("action");
            let numStars = 0;
            const stars = document.querySelectorAll('.star-rating i');
            stars.forEach((star, index) => {
              if (star.className.indexOf('fas fa-star')>=0){
				numStars++;
			  }
            });
      		const comment = document.getElementById("feedback").value;
            const antiForgeryToken = $("input[name='__RequestVerificationToken']").val();
      		const data = {
      			__RequestVerificationToken: antiForgeryToken,
      			SessionId : sessionId,
				Feedback : [
      				{Key:"Guest.SessionRating", Value: numStars},
      				{Key:"Guest.SessionComment", Value: comment}
      			]
      		};
      		$.post({
      			url: postUrl,
      			data: data
      		}).done(function(response){      
            	document.getElementById('feedbackContent').style.display = 'none';
				document.getElementById('errorMessage').style.display = 'none';
            	document.getElementById('thankYouMessage').style.display = 'block';
      		}).fail(function() {
                console.log("Error submitting chat session feedback");
      			document.getElementById('errorMessage').style.display = 'block';
            	document.getElementById('thankYouMessage').style.display = 'none';
            });
        }
    </script>
Fikri Ghazi
Next

Escalate your support from chat to Teams Meeting