How to add custom rating icons to CodeTwo One-click surveys

Problem:

You would like to use your own rating icons in CodeTwo One-click surveys.

Solution:

To use custom icons in your one-click customer satisfaction (CSAT) survey design, you need to upload their images to a secure (https) online location of your choice and then add the images’ URL to the survey’s HTML code.

Here’s how to do it:

1. First, before you design your custom icons, make sure their size matches the size of the icons used in your survey. That way, your email signature layout won’t be affected when you apply custom icons. The icon size is provided in the second step of the one-click survey creation wizard (Design), as shown in Fig. 1. You can access the wizard by editing your survey, as described here.

Fig. 1. Checking the size of the one-click survey icons to prepare custom ones of the same size.

2. Once you’ve designed your custom icons, upload them to a secure (https) online location. You might use instructions from this blog article to create direct links to icon images hosted in some popular online hosting services like OneDrive, Google Drive, etc.
3. Copy the links to your icons to, e.g. Notepad, as you will need them later.
4. Sign in to the signature management app in CodeTwo Email Signatures 365.
5. Hover your mouse cursor over the thumbnail of your existing email signature (with the one-click survey you want to customize) and click Edit signature to open the editor (Fig. 2.).

Fig. 2. Opening an existing email signature design for editing.

6. In the editor, click HTML source on the ribbon (Fig. 3.) to open the HTML source code view window.

Fig. 3. Accessing the signature’s HTML code in the editor.

7. In the window that opens, use the Find text feature to search for {Survey. Locate the src attribute that follows directly after your searched text (Fig. 4.).

Fig. 4. Locating the first src attribute in the survey’s HTML code.

8. Replace the URL of the src attribute with the URL to your custom icon (Fig. 5.).

Fig. 5. Replacing the image for the first rating icon in a survey.

9. Search for other occurrences of {Survey and replace the remaining icons’ URLs with the URLs of your other custom icons. The final HTML code of your survey should look as shown in Fig. 6. 

Fig. 6. One-click survey’s HTML code with URLs of custom rating icons.

10. Click Apply & Close in the top left corner (see Fig. 6.) of the window to save your changes. When you’re back to the editor’s main window, you should see the survey updated with the custom icons (Fig. 7.).

Fig. 7. The one-click survey updated with custom icons.

11. Finally, click Publish & Close in the editor (see Fig. 7.) to save your changes.

From now on, your users and recipients who use the CodeTwo signature with the survey added will see the updated & customized survey icons (Fig. 8.).

Fig. 8. An email signature with a customer satisfaction survey as seen by a recipient.

See also:

• How to use placeholders with links
• How to add a placeholder-based image