How to customize post chat survey

Before you start

Before you start customizing your survey, there are a few things to consider:

1. Post chat survey results are included in chat statistics only if one of the templates from the gallery is selected. If you manually uploaded a survey to your account, even if no changes had been made to it, the statistics will ignore it. This said, first, make sure that selecting a different template from the gallery wouldn't be enough. If not, then keep on reading further.
2. Post chat survey is strictly tied to your chat window styles, so you need to edit it carefully. We recommend changing only texts. Surveys use the same colors and fonts you chose for your chat widget, they are hardcoded on the server side and cannot be changed via survey files.

Part 1. Basic: edit HTML

All components of the survey are encoded in the post-chat-survey-form.html file. Here is how you can customize the survey template with only this file involved:

• change texts: you can replace texts of the header, questions and confirmation
• add more questions in a 5-star survey or delete an existing question. If you want to have more than two questions, you might need to make them short enough so that they don't add to the survey height too much and push the submit button out of the users' sight
• hide the comments section (open-ended question and text area)

To start making updates launch the post-chat-survey-form.html file in a text editor (a simple one that has no formatting options, like Notepad or Notepad++) and take a look at the code.

Edit survey header text

Post chat survey header is a bold text at the top of the survey.

The 5-star template has its header in the following block of the code:

 <header class="vertical-align-wrapper">
 	<h1 class="vertical-align">How did we do</h1>
 	<div class="vertical-align">
 		<div class="circle">?</div>
 	</div>
 </header> 

To change the header text, just replace it in the code (text within tag <h1>).

The question mark is added as a separate graphic element of the header, but you can remove it to gain space for a few more symbols in favor of the header text. To remove it, delete the line <div class="circle">?</div> from the block (or you can comment it out putting the tags <!-- and --> at each side of the line so that you can have it back at any moment). You can also change the question mark to any other character (including Unicode entities).

If you use a smiley/thumbs survey template, your header block will look like this:

 <header>
 	<h1 class="vertical-align-bottom">Happy with our service?</h1>
 </header> 

This template's header allows longer texts without breaking the layout. You can change text in the same way.

Edit questions (5-star survey)

This part exists only in the 5-star survey template. All question blocks have the same pattern and are created with this code:

 <div class="row-rating vertical-align-wrapper">
 	<div class="rating-label vertical-align">Politeness:</div>
 	<div class="rating-box" id="Politeness">
 		<input id="rating1-5" type="radio" name="Politeness" value="5">
 		<label for="rating1-5">5</label>
 		<input id="rating1-4" type="radio" name="Politeness" value="4">
 		<label for="rating1-4">4</label>
 		<input id="rating1-3" type="radio" name="Politeness" value="3">
 		<label for="rating1-3">3</label>
 		<input id="rating1-2" type="radio" name="Politeness" value="2">
 		<label for="rating1-2">2</label>
 		<input id="rating1-1" type="radio" name="Politeness" value="1">
 		<label for="rating1-1">1</label>
 	</div>
 </div> 

First goes the block wrapper which includes the question text and a block with rates in the form of stars. Make sure to strictly follow the instructions below to keep your survey functional.

Add more questions to the survey:

1. Copy one entire block and paste it to the empty space of the code right above <div class="row-descriptions"> and below the last block of questions:

    <div class="row-rating vertical-align-wrapper">
    	<div class="rating-label vertical-align">Proficiency:</div>
    	<div class="rating-box" id="Proficiency">
    		<input id="rating2-5" type="radio" name="Proficiency" value="5">
    		<label for="rating2-5">5</label>
    		<input id="rating2-4" type="radio" name="Proficiency" value="4">
    		<label for="rating2-4">4</label>
    		<input id="rating2-3" type="radio" name="Proficiency" value="3">
    		<label for="rating2-3">3</label>
    		<input id="rating2-2" type="radio" name="Proficiency" value="2">
    		<label for="rating2-2">2</label>
    		<input id="rating2-1" type="radio" name="Proficiency" value="1">
    		<label for="rating2-1">1</label>
    	</div>
    </div>
   
    <div class="row-descriptions"> 

2. Replace the question-text in <div class="rating-label vertical-align">question-text:</div>, e.g.:

    <div class="row-rating vertical-align-wrapper">
    	<div class="rating-label vertical-align">Attitude:</div> 

3. Change the ID in <div class="rating-box" id="ID-of-the-question"> to a new one that would reflect the question, e.g.:

    <div class="row-rating vertical-align-wrapper">
    	<div class="rating-label vertical-align">Attitude:</div>
    	<div class="rating-box" id="Attitude"> 

   Note! Answers to the new question will appear under this new ID in chat transcripts.
4. Replace values of the attribute name in each <input> of the block with the new ID from the previous step, ex.:

    <div class="rating-box" id="Attitude">
    	<input id="rating2-5" type="radio" name="Attitude" value="5">
    	<label for="rating2-5">5</label>
    	<input id="rating2-4" type="radio" name="Attitude" value="4">
    	<label for="rating2-4">4</label>
    	<input id="rating2-3" type="radio" name="Attitude" value="3">
    	<label for="rating2-3">3</label>
    	<input id="rating2-2" type="radio" name="Attitude" value="2">
    	<label for="rating2-2">2</label>
    	<input id="rating2-1" type="radio" name="Attitude" value="1">
    	<label for="rating2-1">1</label>
    </div> 

5. Update IDs of each <input> and attributes for of each <label> of the block (the part rating#-#) - change the first digit of the values to the serial number of the new question (for example, you add the third question):

    <div class="rating-box" id="Attitude">
    	<input id="rating3-5" type="radio" name="Attitude" value="5">
    	<label for="rating3-5">5</label>
    	<input id="rating3-4" type="radio" name="Attitude" value="4">
    	<label for="rating3-4">4</label>
    	<input id="rating3-3" type="radio" name="Attitude" value="3">
    	<label for="rating3-3">3</label>
    	<input id="rating3-2" type="radio" name="Attitude" value="2">
    	<label for="rating3-2">2</label>
    	<input id="rating3-1" type="radio" name="Attitude" value="1">
    	<label for="rating3-1">1</label>
    </div> 

   Note! Each input must have a unique id throughout the survey.

Here is what we get after editing:

On the above example you see how the "Submit" button got partially hidden from the visible area and the scroll bar appeared. To fix this, you can remove the comments section, make the text area smaller, or reduce text size. But for the two latter options you would need to edit the CSS file of the survey, and it requires advanced skills. If you're on it, we'll talk about it in Part 2 of this article.

Delete an existing question block:

Select the block and delete it from the code (or comment it out using the tags <!-- and -->).

Change an existing question:

Follow steps 2, 3 and 4 of the instructions from Add more questions to the survey.

Hide the comments section

The same way as with the header, each template has its own code for the comment section.

5-star survey comments block looks like this:

 <div class="row-descriptions">
 	<div class="descriptions-label vertical-align">Why you rated this way:</div>
 	<textarea name="Comments"></textarea>
 </div> 

And the smiley/thumb survey comment block looks like this:

 <div class="row-rating">
 	<div class="rating-label vertical-align">Comments:</div>
 	<textarea name="Comments"></textarea>
 </div> 

To hide the comment section from the survey, simply delete the block from the code, or comment it out using tags <!-- and -->. Here is how the survey from our example looks with the comment section removed:

And this is the standard smiley/thumb survey with no comment section:

It has now a lot of empty space. This is the case when you can edit the window-features file and reduce the height of the visible area:

Edit confirmation text

The confirmation window appears after a user submits the survey. The block with its content is located at the beginning of the <body> section of the code.

The survey template confirmation block has the following code:

 <div class="success-content">
 	<header class="vertical-align-bottom">
 		<h1 class="word-wrap">Thank you!</h1>
 	</header>
 	<div class="post-chat-survey">
 		<h2>We greatly appreciate your feedback</h2>
 		<div class="button-send">
 			<button class="submit-btn" onclick="onClose();">CLOSE WINDOW</button>
 		</div>
 	</div>
 </div> 

The smiley/thumb survey template confirmation block has this one instead:

 <div class="success-content">
 	<header>
 		<h1 class="vertical-align-bottom">Thank you!</h1>
 	</header>
 	<div class="post-chat-survey">
 		<h2>We greatly appreciate your feedback</h2>
 		<div class="button-send">
 			<button class="submit-btn" onclick="onClose();">CLOSE WINDOW</button>
 		</div>
 	</div>
 </div> 

You can modify the following parts: header text (tag <h1>), confirmation body text (tag <h2>), and close button label (within tag <button>).

Part 3. Expert: edit rating stars, smiley faces and thumbs images

Images in the surveys are created as vector graphics in SVG format. You can change their appearance by updating their SVG sources, or you can replace them with other images in SVG/PNG/JPG format. The image files are located in the images folder of the archive.

If you already have suitable samples of SVG images to use in your survey instead of the default ones, then you can simply replace them with your files in the images folder. To not do any extra editing in the codes, keep the same file names. If you use files of different forman, you'll need to update the files' names in CSS styles anyway.

We can show you how to change the orange color of stars when they are hovered over.

Open the file star-on.svg in a text editor and find in the code the following words: fill and stroke. fill means the fill color of the star, stroke – the color of its frame. They are in the HEX format widely used in HTML and CSS - #rrggbb. Replace values of both attributes with the desirable color and save changes. To check the result, open (or reload) the post-chat-survey-form.html file in a browser and move your mouse over the stars.