-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
240 lines (240 loc) · 16.1 KB
/
popup.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>e-satisfaction Integration Configuration</title>
<script src="js/popup/core/jquery.min.js"></script>
<script src="js/popup/core/bootstrap.min.js"></script>
<script src="js/popup/plugins/forms.js"></script>
<script src="js/popup/plugins/navigation.js"></script>
<script src="js/popup/plugins/notifications.js"></script>
<script src="js/popup/plugins/forms/selects/bootstrap_select.min.js"></script>
<script src="js/popup/plugins/forms/selects/select2.min.js"></script>
<script src="js/popup/plugins/forms/styling/switch.min.js"></script>
<script src="js/popup/plugins/forms/styling/uniform.min.js"></script>
<script src="js/popup/plugins/notifications/jgrowl.min.js"></script>
<script src="js/popup/popup.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato|Montserrat">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900">
<link rel="stylesheet" type="text/css" href="css/lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/lib/core.css">
<link rel="stylesheet" type="text/css" href="css/lib/components.css">
<link rel="stylesheet" type="text/css" href="css/lib/colors.css">
<link rel="stylesheet" type="text/css" href="css/popup.css">
<link rel="stylesheet" type="text/css" href="css/icons/icomoon/styles.css">
<link rel="stylesheet" type="text/css" href="css/template.css">
<link rel="stylesheet" type="text/css" href="css/branding.css">
<link rel="stylesheet" type="text/css" href="css/forms.css">
<link rel="stylesheet" type="text/css" href="css/panels.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top esat-navbar">
<div class="navbar-header">
<a class="navbar-brand pt-10 pb-10" href="https://www.e-satisfaction.com" target="_blank">
<img src="logo-white-rectangle.png" alt=""></a>
</div>
</div>
<div class="main-panel panel">
<form id="e-satisfaction-config-form" class="panel-body">
<input type="hidden" class="form-control" name="update_integration" value="0">
<div class="form-group actions" style="float: right">
<button type="button" class="btn btn-primary bg-esat-cta btn-clear-cache">Clear Cache</button>
</div>
<div class="form-group config-labels" style="float: left;">
<span class="label bg-info position-left with-e-satisfaction">e-satisfaction</span>
<span class="label bg-teal position-left with-jquery">jQuery %{jquery_version}</span>
<span class="label bg-purple position-left with-gtm">GTM</span>
<span class="label bg-danger position-left with-require-js">RequireJs</span>
</div>
<div class="form-group" style="clear: both;">
<label for="application-id">Application Id</label>
<span class="text-danger">*</span>
<input type="text" class="form-control" id="application-id" placeholder="Application Id" name="application_id" required>
<small id="application-id-help" class="form-text text-muted">Type in the Application Id you want to integrate to this website.</small>
</div>
<div class="questionnaire-overrides"></div>
<template class="questionnaire-override-container-template">
<div class="questionnaire-override-container panel panel-collapsed">
<div class="panel-heading">
<h6 class="panel-title">Questionnaire</h6>
<div class="heading-elements not-collapsible">
<ul class="icons-list">
<li><a data-action="delete"><i class="icon-trash"></i></a></li>
<li><a data-action="collapse" class="rotate-180"></a></li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label for="questionnaire-id">Questionnaire Id</label>
<input type="text" class="form-control" id="questionnaire-id" placeholder="Questionnaire Id" name="questionnaire_id">
<small class="form-text text-muted">Type in the Questionnaire Id you want to set the integration settings for.</small>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6 questionnaire-active">
<label for="integration-active">Active</label>
<br/>
<input id="integration-active" type="checkbox" name="active" class="form-control esat-bootstrap-switch" data-on-text="On" data-off-text="Off">
</div>
<div class="col-xs-6 questionnaire-active-mobile">
<label for="integration-active-mobile">Mobile</label>
<br/>
<input id="integration-active-mobile" type="checkbox" name="active_mobile" class="form-control esat-bootstrap-switch" data-on-text="On" data-off-text="Off">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-6 integration-locale-auto-detect">
<label for="integration-locale-auto-detect">Auto-detect Language</label>
<br/>
<input id="integration-locale-auto-detect" type="checkbox" name="locale_autodetect" class="form-control esat-bootstrap-switch" data-on-text="On" data-off-text="Off" checked>
<span class="help-block">Enable Auto-detect to allow the browser to determine the questionnaire language for the user.</span>
</div>
<div class="col-xs-6">
<label for="questionnaire-locale">Language</label>
<select id="questionnaire-locale" name="locale" class="bootstrap-select questionnaire-locale" data-width="100%">
<option value="ca">Catalan</option>
<option value="el">Greek</option>
<option value="el-formal">Greek (formal)</option>
<option value="en">English</option>
<option value="en-us">English (US)</option>
<option value="es">Spanish</option>
<option value="ro">Romanian</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="integration-type">Type</label>
<select id="integration-type" name="type" class="bootstrap-select integration-type" data-width="100%" tabindex="-98">
<option id="box" class="type-list-item" value="box">Box</option>
<option id="box_classic" class="type-list-item" value="box_classic">Box Classic (Popup)</option>
<option id="embed" class="type-list-item" value="embed">Embedded</option>
</select>
</div>
<div class="form-group integration-position integration-position-box">
<div class="row">
<div class="col-xs-6">
<label for="integration-position-box">Questionnaire Position</label>
<select id="integration-position-box" name="position-box" class="bootstrap-select" data-width="100%">
<option id="left-top" value="left|top">Top left corner</option>
<option id="right-top" value="right|top">Top right corner</option>
<option id="left-bottom" value="left|bottom" selected>Bottom left corner</option>
<option id="right-bottom" value="right|bottom">Bottom right corner</option>
</select>
</div>
<div class="col-xs-6">
<label for="box-maximized">Maximized</label>
<br/>
<input id="box-maximized" type="checkbox" name="box_maximized" class="form-control esat-bootstrap-switch" data-on-text="On" data-off-text="Off">
<span class="help-block">If On, the questionnaire will be displayed automatically to the user. If Off, the user will have to click on the launcher to activate it.</span>
</div>
</div>
</div>
<div class="form-group integration-position integration-position-embed">
<div class="row">
<div class="col-xs-6">
<label for="integration-position-embed">Questionnaire Position</label>
<input id="integration-position-embed" name="position-embed" type="text" class="form-control">
<span class="help-block">
<span>Write your own placeholder to set questionnaire's position. See</span>
<a href="https://www.w3schools.com/cssref/css_selectors.asp" target="_blank">css selectors</a>
</span>
</div>
<div class="col-xs-6">
<label for="integration-position-type">Position Type</label>
<select id="integration-position-type" name="position_type" class="bootstrap-select" data-width="100%">
<option value="before">Before</option>
<option value="inside" selected>Inside</option>
<option value="after">After</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label>Delay Cap</label>
<div class="row">
<div class="col-xs-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix">Minutes</span>
<input name="delay_cap_minutes" type="number" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix">Hours</span>
<input name="delay_cap_hours" type="number" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix">Days</span>
<input name="delay_cap_days" type="number" class="form-control">
</div>
</div>
</div>
<span class="help-block">Define the time that the user should wait before the Questionnaire is displayed for the first time.</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label>Frequency Cap</label>
<div class="row">
<div class="col-xs-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix">Minutes</span>
<input name="frequency_cap_minutes" type="number" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix">Hours</span>
<input name="frequency_cap_hours" type="number" class="form-control">
</div>
</div>
<div class="col-xs-4">
<div class="input-group bootstrap-touchspin">
<span class="input-group-addon bootstrap-touchspin-prefix">Days</span>
<input name="frequency_cap_days" type="number" class="form-control">
</div>
</div>
</div>
<span class="help-block">Define the time that the same visitor should wait before seeing again the questionnaire.</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="blacklist" data-translate="partials-questionnaire-integration-settings-form-blacklist">Blacklist</label>
<textarea rows="6" id="blacklist" name="blacklist" class="form-control integration-blacklist" readonly style="resize: vertical"></textarea>
<span class="help-block" data-translate="partials-questionnaire-integration-settings-form-blacklist-helper">Write multiple urls using separate lines.</span>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-12">
<label for="whitelist" data-translate="partials-questionnaire-integration-settings-form-whitelist">Whitelist</label>
<textarea rows="6" id="whitelist" name="whitelist" class="form-control integration-whitelist" readonly style="resize: vertical"></textarea>
<span class="help-block" data-translate="partials-questionnaire-integration-settings-form-whitelist-helper">Write multiple urls using separate lines.</span>
</div>
</div>
</div>
</div>
</div>
</template>
<div class="controls text-right">
<button type="submit" class="btn btn-primary bg-esat-primary">Apply Integration</button>
</div>
</form>
</div>
</body>
</html>