-
Notifications
You must be signed in to change notification settings - Fork 146
/
Copy pathexamples_feedback_widgets.html
139 lines (117 loc) · 5.49 KB
/
examples_feedback_widgets.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
<!-- Page styling here -->
<link rel='stylesheet' type='text/css' href='./style/style.css'>
<!--Countly script-->
<script type='text/javascript' src='../lib/countly.js'></script>
<script type='text/javascript'>
const COUNTLY_SERVER_KEY = "https://your.server.ly";
const COUNTLY_APP_KEY = "YOUR_APP_KEY";
if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
console.warn("Please do not use default set of app key and server url")
}
// initializing countly with params
Countly.init({
app_key: COUNTLY_APP_KEY,
url: COUNTLY_SERVER_KEY, //your server goes here
debug: true
});
//=================================================
// Displaying feedback widgets
//=================================================
Countly.feedback.showNPS();
// OR with a specific ID, name or tag
// const id = 'ID_from_server';
// Countly.feedback.showNPS(id);
// Other feedback widgets
// Countly.feedback.showSurvey();
// Countly.feedback.showRating();
//=================================================
// ADVANCED: Fetching and displaying feedback widgets
//=================================================
function fetchAndDisplayWidget() {
// Fetch user's feedbacks widgets from the server (must have been created at server first)
Countly.get_available_feedback_widgets(feedbackWidgetsCallback);
}
// Callback function to execute after fetching the feedback widgets
function feedbackWidgetsCallback(countlyPresentableFeedback, err) {
if (err) { // error handling
console.log(err);
return;
}
// Decide which which widget to show. Here the first rating widget is selected.
const widgetType = "rating";
const countlyFeedbackWidget = countlyPresentableFeedback.find(widget => widget.type === widgetType);
if (!countlyFeedbackWidget) {
console.error(`[Countly] No ${widgetType} widget found`);
return;
}
// Define the element ID and the class name (optional)
const selectorId = "";
const selectorClass = "";
// Define the segmentation (optional)
const segmentation = { page: "home_page" };
// Display the feedback widget to the end user
Countly.present_feedback_widget(countlyFeedbackWidget, selectorId, selectorClass, segmentation);
}
//=================================================
// Fetching and reporting feedback widgets manually
//=================================================
// an example of getting the widget list, using it to get widget data and then recording data for it manually. widgetType can be 'nps', 'survey' or 'rating'
function getFeedbackWidgetListAndDoThings(widgetType) {
// get the widget list
Countly.get_available_feedback_widgets(
// callback function, 1st param is the feedback widget list
function (feedbackList, err) {
if (err) { // error handling
console.log(err);
return;
}
// find the widget object with the given widget type. This or a similar implementation can be used while using fetchAndDisplayWidget() as well
const countlyFeedbackWidget = feedbackList.find(widget => widget.type === widgetType);
if (!countlyFeedbackWidget) {
console.error(`[Countly] No ${widgetType} widget found`);
return;
}
// Get data with the widget object
Countly.getFeedbackWidgetData(countlyFeedbackWidget,
// callback function, 1st param is the feedback widget data
function (feedbackData, err) {
if (err) { // error handling
console.error(err);
return;
}
const CountlyWidgetData = feedbackData;
// record data according to the widget type
if (CountlyWidgetData.type === 'nps') {
Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, { rating: 3, comment: "comment" });
} else if (CountlyWidgetData.type === 'survey') {
var widgetResponse = {};
// form the key/value pairs according to data
widgetResponse["answ-" + CountlyWidgetData.questions[0].id] = CountlyWidgetData.questions[0].type === "rating" ? 3 : "answer";
Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, widgetResponse);
} else if (CountlyWidgetData.type === 'rating') {
Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, { rating: 3, comment: "comment", email: "email", contactMe: true });
}
}
);
})
}
</script>
</head>
<body>
<!-- Header, banner etc. Top part of your site -->
<div id="header">
<h1>Feedback Widgets</h1>
<img id="logo" src="./images/logo.png">
</div>
<center>
<img src="./images/team_countly.jpg" id="wallpaper" />
<p><a href='https://countly.com/'>Countly</a></p>
<p><button onclick="fetchAndDisplayWidget()">Enable Feedback Widget</button></p>
<p><button onclick="getFeedbackWidgetListAndDoThings('nps')">Manually Record NPS Data</button></p>
<p><button onclick="getFeedbackWidgetListAndDoThings('survey')">Manually Record Survey Data</button></p>
<p><button onclick="getFeedbackWidgetListAndDoThings('rating')">Manually Record Rating Data</button></p>
</center>
</body>
</html>