Usabilla for Email is a great way to engage with your users and allow them to give your Customer Support and Customer Service agents feedback. If you've had contact with someone from Usabilla Support by email you may have noticed that they had a set of smileys in their email signature. These smileys can be clicked by customers for giving feedback. Allowing your customers to give you feedback is the first step toward a customer-centric organization that is agile and can respond the needs of the customer.
Tip: Don't have Usabilla for Email yet, reach out to your Customer Success Manager or your contact at Usabilla for more information.
In this article, we'll explain how you can integrate Usabilla for Email in your Zendesk Customer Support Process. This article will only explain how to integrate Usabilla or Email in the Zendesk Email channel.
Note: Keep in mind that the exact setup may be slightly different for your depending on how you have set up Zendesk in the beginning. Only follow this guide when you're familiar with both Usabilla and Zendesk.
Reading Time: 6min 30sec
Difficulty: Intermediate/Advanced
Prerequisite skills: HTML, CSS, Usabilla, and Zendesk
Create your Usabilla for Email Group Campaign
First, we'll need to create a Usabilla for Email Group Campaign. To do so log into your Usabilla account and go to the email product. 
Next, you'll need to create a "Group Campaign" and apply a theme that fits your needs. Proceed by following the on-screen instructions and finish your Usabilla for Email Group Campaign by saving it and return to the Setup page.
Making the widget ready
Because of the limitations that Zendesk has with regard to adding HTML, we'll need to make a slight alteration to the widget of your newly created Usabilla for Email Campaign.
On the setup page navigate to the Group Campaign that you created and click on the "Widget installation instructions". Next, you'll see a modal show up where you find the three ways of implementing your Usabilla for Email widget. Copy the HTML code and paste it into an empty HTML file using your favorite code editor. (You can also use JSfiddle or Codepen if you prefer that). Next, we'll make some changes to the default HTML code to make it compatible with Zendesk. The first change is the styling and the second change is the adding of Zendesk placeholders.
Change 1: Update HTML and CSS for the styling
In order to make the Usabilla for Email widget usable in Zendesk, we'll need to remove the default table tags that are added, and we'll need to change the styling from "display: block" to "display:inline-block". After you've done this we'll be adding the Zendesk Placeholders.
Note: Changing styling of your Usabilla for Email widget is completely optional, however, we recommend that you make these changes because Zendesk does not render the table tags invisible, which in turn has a negative effect on the aesthetics of the widget.
Change 2: Add Zendesk Placeholders as Custom Variables
Zendesk allows you to use numerous placeholders. These placeholders can be used to for example automatically show the first name of the ticket requester somewhere in the email or show the organization name. When you combine Zendesk Placeholder with Usabilla for Email Custom Variables you'll be able to get valuable contextual feedback on which can be acted if needed. To add the Zendesk placeholder as a Custom
Zendesk Placeholders are recognized by the double curly brackets around them. For example, the placeholder {{ticket.organization.name}} will result in the organization name being added. You can find the full overview of placeholders available in Zendesk by going to their Support Center.
Adding Custom Variables to a Usabilla for Email widget works by adding URL parameters to each of the "href" URLs of the links behind each of the smileys in the widget. In this case, we'll be adding the Zendesk Placeholders as customer variables in the Usabilla for Email widgets. Open your code editor and find the 6 <a> tags in your widget code. In your <a> tags go to the "href" attribute and edit the URL that is set. The edit that you'll need to make is as follows:
- Append a "&" character followed by the name you want to use for your custom variable. You cannot use special characters in the custom variable name.
- Append a "=" character followed by the Zendesk placeholder code.
- Repeat these steps when you want to add multiple Custom Variables.
For reference, we've added a full example of how it will look down below using JSfiddle. Keep in mind that this example will need to be changed to match your own widget.
Note: Because of the way how Zendesk deals with URL formatting in rich content emails you need to make sure to only use placeholders that will not contain a space. We, therefore, recommend splitting up combined placeholder like the "name" of the recipient to "first name" and "last name".
Adding your Usabilla for Email widget to Zendesk
Now that you've created your Usabilla for Email widget with custom variables you'll need to add it to Zendesk. While Zendesk does not allow you to add HTML on an email-by-email basis, Zendesk does allow you to add rich content to your emails. This means that you'll need to copy the widget itself instead of the HTML code that generates the widget. To do so simply follow the steps below:
- Open your HTML file using a web browser to see how the widget looks.
- While pressing the left mouse-button drag-select the whole widget
- After selecting copy the widget to your clipboard by "Right-Click -> Copy" or by hitting "Cmd + C / Ctrl + C" on your keyboard.
Creating a "Usabilla Feedback" Macro in Zendesk
Now that you have your Usabilla for Email widget ready we're going to add your widget to Zendesk. To add the Zendesk widget we're going to use the Macro feature that Zendesk offers. The macro feature allows you to quickly add content to your email and set certain values into the ticket. In this case, we're going to create a macro that sets the comment mode to "public" and sets the content in a way that our widget is added.
Simply follow the on-screen instructions and add two macro actions. The first action is setting the "Comment mode" to public.
The second action is pasting the widget you previously copied into the text-area with the action "Comment/description" selected. Finish by saving your macro.
You may want to add additional actions depending on your customer support or customer service processes. We recommend that you for example also add the ticket assignee name or add labels to the ticket. You may also want to make the macro only available to certain agents.
Tip: You can add multiple Macros with different each macro having a different Usabilla for Email campaign added. This allows you to measure, compare and gather feedback per brand, Team, Agent, or language.
Finishing it up
After saving you'll be able to use your Usabilla for Email widget in Zendesk. To add the Usabilla for Email widget to your email simply use the macro when you respond to the ticket. After you've sent the email the recipient will receive an email where the smileys are included which in turn allows them to give feedback. Because Zendesk will automatically process any placeholders that you've added in the URL parameters you'll receive feedback with custom variables added that come from Zendesk.
Any feedback on this article? Use the feedback button on the right-hand side or use the in-page widget down below.