Bring Your Own Survey
In an economy where customer experience trumps price and product, the Cisco Webex Experience Management (referred to as Experience Management here on in the document) platform helps organizations exceed customer expectations and deliver business outcomes through its three pillars of customer experience:
- Measuring the customer journey: Understanding the customer experience through a continuous collection of moments across their journey.
- Obtaining a 360-degree view of the customer: Bringing disparate data together to enable actionable insights, proactive support, and advanced marketing automation.
- Becoming predictive: Understanding predictively how changes to the customer experience will affect outcomes and impact financial metrics.
Experience Management offers 17 different channels to collect feedback from customers. Besides the standard Experience management channels, our clients have the flexibility to build their own channel to bring experience data into Experience management platform.
Various enterprises have needs that are very specific. There could be websites or mobile apps that are built with very precise UI considerations and a default channel offered by Experience Management (like the micro survey or web survey) might not fit the UI specifications a 100%. In these cases, brands can build their own user interface that will fit the color schemes and themes of their preference perfectly and collect response from the customer. Post collection of response from the customer, the same can be plugged in the reference implementation provided in this document to submit the response to Experience Management platform.
For the purpose of selecting one reference implementation, we are choosing a custom HTML survey.
- Should have a valid Experience Management account
- Should have Postman app installed
- Should have a webserver set-up to test this reference solution
3. Workflow Diagram
4. Configuration Steps
4.1 Experience Management related configurations
Click on this link to launch Experience Management login screen
Sign into Experience Management. Once the dashboard loads, switch to CX Setup using the menu button on the top left of the screen. Select CX Setup.
Next step is to set-up a Questionnaire which should contain the customer facing questions(NPS, CSAT, User Comments etc.) and prefill questions to capture the metadata of the customer such as Name, Employee ID, Department, Call duration etc. You can refer to this video for step-by-step directions to create questionnaire.
After the questionnaire is set-up, we would move to create a multi-use survey token. A survey token is required to submit a survey response to Experience Management. In this reference example, for ease of implementation, the same survey token would be used to capture all survey responses. Hence, we would create a multi-use survey token using WXM APIs.
We choose to create the survey token using the API (instead of creating it from Experience management product UI) as we look to add an additional security layer in the token settings. Passing the field “restrictBySignature” in the request body along with other fields, adds a signature for every response, thereby decreasing the risk of rogue responses. This secures the response submission process. The same signature (passphrase chosen by the brand) must be hashed using HmacSHA256 and then encoded and passed in the API request for response submission to happen successfully.
This hashing mechanism is already implemented in BYOS reference solution and so in this step we will create a multi-use token using Postman app. The postman collection and documentation can be referred here.
4.2 Reference Solution
BYOS reference solution can be downloaded from this link
This is how the solution structure looks like:
4.3 BYOS UI
BYOS provides flexibility to the organization to use any custom UI to represents the customer facing questions. You can add as many questions as you require to display in the UI and can link it with the provided JS code in this reference solution to submit the responses.
Let’s look at the UI we are using in this reference solution.
If you take a quick look at index.html file, you can see these three questions are assigned with id as “text1”, “text2” and “text3” respectively. Screenshot is provided below for “text1”.
If you add more questions in the UI, please go ahead with the same naming convention and add them as “text4”, “text5” …. and so on.
Also, checkout the Ids where the responses entered by the user are captured. These Ids will also be used while configuring the reference solution.
4.4 Configure Reference Solution
Let’s take a look at how the code of the reference solution is submitting the survey responses and how can we configure for any custom UI which is added.
Once the UI is set-up, we will move on the configure and bind these UI elements to a questionId and questionText
In the downloaded solution, navigate to “js” folder and open main.js. Here first few lines are the configurations to be set-up.
Let’s look at the each one of these in detail.
baseURL – This is Experience management live API Base URL. Should be used as is.
SurveyToken – Pass the Survey token created using postman collection. Example: KN-12345
securityPassphrase – Pass security passphrase used in survey token creation in Postman request
responses are collection of JSON object where each object is required for the UI elements. In this solution, we have three UI elements for three customer facing questions. So, we will be configuring three such objects here. The details of each object are described below.
- id – UI element id as described in this section
- questionId – QuestionId should be passed for the question which should be linked with this UI element. In this example, it is an NPS question, so we are passing NPS question ID from Experience management questionnaire
- questionText – The text which should be displayed to customers for this UI element
- questionType – All the questions (customer facing or prefills) created in Experience Management Questionnaire are either Number type or Text type.
- Number – NPS, CSAT, CES and all rating questions
- Text – All questions except Number type questions
- valueid – pass the element id where the UI is capturing the customer entered response as described in this section
We are all set to configure the customer facing questions linked to UI elements. Now we look at how prefills can be passed dynamically for every response submission.
4.5 Passing Prefills Dynamically
Capturing contextual data (referred to as Prefills) of your customer is important. It helps identify your customer (in case you are looking to close the loop with the customer) and also provides for rich analytics in Experience Management Dashboard. To add any prefills in the BYOS reference solution, you should provide the QuestionId of the prefill question and set the dynamic value of that prefill. For example:
Here, prefill1 is the sample prefills added. Here questionId is taken from the Questionnaire and answer should be passed dynamically. If this solution is integrated in a website, then the customer name should already be known once the customer logs in and that should be set here along with questionId of the question “Name”. Similarly, you can capture more prefills for any such data which is available and helpful in gaining insights.
5. How to test
All configurations are done. Load these files behind any webserver and load the URL in any browser to test. Once the survey response is submitted using browser, it can be verified from Experience Management response section.