Tidio Live Chat - Version 4.0.0

Version Description

  • New integration flow
  • Refresh styles to match Tidio design
Download this release

Release Info

Developer lucastidio
Plugin Icon 128x128 Tidio Live Chat
Version 4.0.0
Comparing to
See all releases

Code changes from version 3.5.0 to 4.0.0

Files changed (24) hide show
  1. media/css/app-options.css +0 -0
  2. media/css/options.css +376 -100
  3. media/css/plugin-minicolors.css +0 -259
  4. media/img/16.svg +3 -0
  5. media/img/27.svg +3 -0
  6. media/img/28.svg +3 -0
  7. media/img/29.svg +3 -0
  8. media/img/34.svg +3 -0
  9. media/img/4.svg +3 -0
  10. media/img/8.svg +3 -0
  11. media/img/a-center.png +0 -0
  12. media/img/bg.png +0 -0
  13. media/img/blocks-bg.png +0 -0
  14. media/img/brand-logo.png +0 -0
  15. media/img/checkmark.png +0 -0
  16. media/img/chevron.svg +4 -0
  17. media/img/color-pallete.png +0 -0
  18. media/img/plus.svg +3 -0
  19. media/img/tidio-logo.svg +8 -0
  20. media/img/wp-logo.svg +7 -0
  21. media/js/options.js +283 -140
  22. options.php +56 -41
  23. readme.txt +4 -0
  24. tidio-elements.php +2 -2
media/css/app-options.css DELETED
File without changes
media/css/options.css CHANGED
@@ -1,117 +1,393 @@
1
- @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,200italic&subset=latin,latin-ext);
2
 
3
- #after-install-text{
4
- display: none;
5
- }
6
- #tidio-wrapper div, #tidio-wrapper input{
7
  -webkit-box-sizing: border-box;
8
  -moz-box-sizing: border-box;
9
  box-sizing: border-box;
10
  }
11
- #tidio-wrapper{
 
12
  background: #f1f1f1;
13
- color:#434a54;
14
- font-family: 'Titillium Web', sans-serif;
15
- height:100%;
16
- font-size:15px;
17
- }
18
- #tidio-chat-wp-plugin{
19
- width: 100%;
20
- max-width: 1206px;
21
  height: 100%;
22
- background: url(../img/bg.png) no-repeat 50% top;
23
- z-index:1;
24
- margin: 0 auto;
25
  position: relative;
26
- padding: 177px 190px 0px 190px;
27
  }
28
- #tidio-chat-wp-plugin h1{
29
- margin: 0;
30
- text-align: center;
31
- font-weight: 300;
32
- font-size:30px;
33
- margin-top:15px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34
  }
35
- #tidio-chat-wp-plugin p{
 
 
 
 
 
 
 
 
 
36
  text-align: center;
37
- margin-top: 25px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  font-weight: 300;
39
- font-size: 15px;
40
- }
41
- #input-blocks{
42
- width: 942px;
43
- background: url(../img/blocks-bg.png) no-repeat 50% 167px;
44
- margin: 0 -58px;
45
- overflow: hidden;
46
- padding-left: 100px;
47
- }
48
- #tidio-chat-login,
49
- #tidio-chat-panel{
50
- float:left;
51
- width: 365px;
52
- margin-top: 20px;
53
- padding:20px;
54
- }
55
- #tidio-chat-login{
56
- margin-right: 11px;
57
- }
58
- #tidio-chat-panel{
59
- border: 1px solid #dadada;
60
- border-left: 3px solid #5C9EE8;
61
- background: #FFF;
62
- }
63
- #input-blocks h2,
64
- #select-project h2
65
- {
66
- font-weight: 400;
67
  margin: 0;
68
- font-size: 16px;
69
- border-bottom: 1px solid #dadada;
70
- border-left: 3px solid #5C9EE8;
71
- padding: 12px 18px;
72
- }
73
- #tidio-apply-account {
74
- border: 1px solid #dadada;
75
- padding: 20px;
76
- margin-top: 20px;
77
- padding-left: 61px;
78
- line-height: 1.4;
79
- background: url(../img/checkmark.png) no-repeat 20px 50%;
80
- }
81
- .form-control{
82
- margin-top: 12px;
83
- }
84
- .form-control .text-input{
85
- height: 38px;
86
  width: 100%;
87
- padding: 0 13px;
 
 
88
  font-size: 14px;
89
- max-width: 320px;
90
- }
91
- h2+.form-control{
92
- margin-top:18px;
93
- }
94
- .tidio-button{
95
- font-family: 'Titillium Web', sans-serif;
96
- margin-top:20px!important;
97
- height:40px!important;
98
- line-height:38px!important;
99
- text-align:center;
100
- width:170px;
101
- }
102
- .button-primary.tidio-button{background:#5d9cec;}
103
- .button-primary.tidio-button:hover{background:#4a89dc;}
104
-
105
- /* placeholder */
106
- ::-webkit-input-placeholder { color:#aeb1b8; font-style: italic; font-weight: 200!important}
107
- ::-moz-placeholder { color:#aeb1b8; font-style: italic; font-weight: 200!important} /* firefox 19+ */
108
- :-ms-input-placeholder { color:#aeb1b8; font-style: italic; font-weight: 200!important} /* ie */
109
- input:-moz-placeholder { color:#aeb1b8; font-style: italic; font-weight: 200!important}
110
-
111
- /* Project selector */
112
- #select-project{display:none;margin:0 auto;background: url(../img/blocks-bg.png) no-repeat 50% 171px;padding:28px 244px 40px 244px;}
113
- #select-project select{width: 100%;height: 40px!important;}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
114
 
115
  /* error */
116
- #tidio-wrapper .error{display: none;margin-left: 60px;margin-right: 14px;}
117
- #tidio-wrapper .error p{margin: 10px 0;}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url(https://fonts.googleapis.com/css?family=Muli:300,400,700&subset=latin);
2
 
3
+ #tidio-wrapper,
4
+ #tidio-wrapper *,
5
+ #tidio-wrapper *:before,
6
+ #tidio-wrapper *:after {
7
  -webkit-box-sizing: border-box;
8
  -moz-box-sizing: border-box;
9
  box-sizing: border-box;
10
  }
11
+
12
+ #tidio-wrapper {
13
  background: #f1f1f1;
14
+ color: #080f1a;
15
+ font-family: 'Muli', sans-serif;
 
 
 
 
 
 
16
  height: 100%;
17
+ font-size: 16px;
18
+ max-width: 1234px;
19
+ z-index: 1;
20
  position: relative;
21
+ padding: 66px 24px 0 0;
22
  }
23
+
24
+ .tidio-box-wrapper {
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: stretch;
28
+ justify-content: center;
29
+ margin: -12px
30
+ }
31
+
32
+ .tidio-box {
33
+ background-color: #fff;
34
+ flex-grow: 0;
35
+ flex-shrink: 1;
36
+ margin: 12px;
37
+ padding: 40px 24px;
38
+ display: flex;
39
+ flex-direction: column;
40
+ align-items: center;
41
+ }
42
+
43
+ .tidio-box-actions {
44
+ display: flex;
45
+ flex-direction: row;
46
+ align-items: flex-start;
47
+ justify-content: center;
48
+ position: relative;
49
  }
50
+
51
+ .tidio-box-actions form {
52
+ display: none;
53
+ flex-direction: column;
54
+ align-items: center;
55
+ width: 100%;
56
+ max-width: 360px;
57
+ }
58
+
59
+ .tidio-box-advert {
60
  text-align: center;
61
+ position: relative;
62
+ padding-bottom: 324px;
63
+
64
+ background: url(../img/a-center.png) bottom center,
65
+ url(../img/4.svg) calc(50% + 223px) calc(100% - 82px),
66
+ url(../img/8.svg) calc(50% - 109px) calc(100% - 149px),
67
+ url(../img/16.svg) calc(50% + 234px) calc(100% - 183px),
68
+ url(../img/27.svg) calc(50% + 143px) calc(100% - 248px),
69
+ url(../img/28.svg) calc(50% - 214px) calc(100% - 55px),
70
+ url(../img/29.svg) calc(50% - 223px) calc(100% - 148px),
71
+ url(../img/34.svg) calc(50% - 159px) calc(100% - 226px),
72
+ #fff;
73
+ background-size: 314px 293px, 21px 15px, 23px 15px, 18px 19px, 16px 16px, 14px 22px, 43px 21px, 22px 20px;
74
+ background-repeat: no-repeat;
75
+ }
76
+
77
+ .tidio-box-advert h2, .tidio-box-actions h1 {
78
+ font-size: 24px;
79
+ line-height: 34px;
80
+ font-weight: bold;
81
+ max-width: 400px;
82
+ margin-top: 0;
83
+ margin-bottom: 16px;
84
+ }
85
+
86
+ .tidio-box-actions h1 {
87
+ margin: 32px 0;
88
+ padding-top: 48px;
89
+ }
90
+
91
+ .tidio-box p {
92
+ font-size: 16px;
93
+ line-height: 25px;
94
  font-weight: 300;
95
+ max-width: 350px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  margin: 0;
97
+ }
98
+
99
+ .tidio-box-advert-image {
100
+ position: absolute;
101
+ left: 0;
102
+ right: 0;
103
+ bottom: 0;
104
+ height: 300px;
105
+ background-repeat: no-repeat;
106
+
107
+ background-position: bottom left;
108
+ }
109
+
110
+ .tidio-box-actions form label,
111
+ .tidio-box-actions form input,
112
+ .tidio-box-actions form select,
113
+ .tidio-box-actions form button,
114
+ .tidio-box-actions form .button {
115
  width: 100%;
116
+ }
117
+
118
+ .tidio-box-actions form label {
119
  font-size: 14px;
120
+ }
121
+
122
+ .tidio-box-actions form label + label {
123
+ margin-top: 16px;
124
+ }
125
+
126
+ .tidio-box-actions form input,
127
+ .tidio-box-actions .select-selected {
128
+ margin-top: 8px;
129
+ height: 48px;
130
+ padding: 12px 16px 11px;
131
+ border-radius: 3px;
132
+ font-size: 16px;
133
+ line-height: 24px;
134
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
135
+ border: solid 1px #bcc5d7;
136
+ display: flex;
137
+ align-items: center;
138
+ justify-content: flex-start;
139
+ color: #080f1a;
140
+ }
141
+
142
+ .tidio-box-actions form input:focus,
143
+ .tidio-box-actions form select:focus {
144
+ border-color: #0566ff;
145
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06);
146
+ outline: none;
147
+ }
148
+
149
+ .tidio-box-actions input::placeholder {
150
+ font-style: normal;
151
+ color: #8894ab;
152
+ }
153
+
154
+ .tidio-box-actions form button,
155
+ .tidio-box-actions form .button {
156
+ font-size: 16px;
157
+ color: #fff;
158
+ background-color: #0566ff;
159
+ border-color: #0566ff;
160
+ border-radius: 3px;
161
+ height: 48px;
162
+ display: flex;
163
+ align-items: center;
164
+ justify-content: center;
165
+ font-weight: 300;
166
+ cursor: pointer;
167
+ transition: all .3s;
168
+ }
169
+
170
+ .tidio-box-actions form * + button,
171
+ .tidio-box-actions form * + .button {
172
+ margin-top: 24px;
173
+ }
174
+
175
+ .tidio-box-actions form button:hover,
176
+ .tidio-box-actions form button:focus,
177
+ .tidio-box-actions form .button:hover,
178
+ .tidio-box-actions form .button:focus {
179
+ color: #fff;
180
+ background-color: #0b5bda;
181
+ border-color: #0b5bda;
182
+ }
183
+
184
+ .tidio-box-actions form .btn-link {
185
+ background-color: transparent;
186
+ border-color: transparent;
187
+ color: #0566ff;
188
+ margin-top: 8px;
189
+ box-shadow: none;
190
+ }
191
+
192
+ .tidio-box-actions form .btn-link:hover,
193
+ .tidio-box-actions form .btn-link:active,
194
+ .tidio-box-actions form .btn-link:focus {
195
+ text-decoration: underline;
196
+ outline: none;
197
+ background-color: transparent;
198
+ border-color: transparent;
199
+ color: #0566ff;
200
+ box-shadow: none;
201
+ }
202
+
203
+ @media only screen and (min-width: 480px) {
204
+ .tidio-box-actions {
205
+ padding-top: 64px;
206
+ }
207
+
208
+ .tidio-box-actions h1 {
209
+ margin-top: 44px;
210
+ }
211
+
212
+ .tidio-box-advert h2 {
213
+ margin-top: 24px;
214
+ }
215
+ }
216
+
217
+ @media only screen and (min-width: 1280px) {
218
+ .tidio-box-wrapper {
219
+ flex-direction: row;
220
+ }
221
+
222
+ .tidio-box-actions {
223
+ flex-basis: 530px;
224
+ align-items: flex-start;
225
+ }
226
+
227
+ .tidio-box-actions h1 {
228
+ background-position: top left;
229
+ }
230
+
231
+ .tidio-box-advert h2 {
232
+ margin-top: 32px;
233
+ }
234
+
235
+ .tidio-box-actions form {
236
+ align-items: flex-start;
237
+ }
238
+
239
+ .tidio-box-advert {
240
+ flex-basis: 680px;
241
+ }
242
+ }
243
+
244
+ #after-install-text {
245
+ display: none;
246
+ }
247
+
248
+ .tidio-button {
249
+ font-family: 'Muli', sans-serif;
250
+ margin-top: 20px !important;
251
+ height: 40px !important;
252
+ line-height: 38px !important;
253
+ text-align: center;
254
+ width: 170px;
255
+ }
256
 
257
  /* error */
258
+ #tidio-wrapper .error {
259
+ display: none;
260
+ margin: 12px 0 -12px;
261
+ padding: 0;
262
+ border: none;
263
+ box-shadow: none;
264
+ color: #e81332;
265
+ font-size: 14px;
266
+ line-height: 20px;
267
+ }
268
+
269
+ #tidio-wrapper .error:before {
270
+ content: '!';
271
+ display: inline-flex;
272
+ align-items: center;
273
+ justify-content: center;
274
+ width: 16px;
275
+ height: 16px;
276
+ background-color: #e81332;
277
+ color: #fff;
278
+ font-size: 13px;
279
+ border-radius: 10px;
280
+ margin-right: 8px;
281
+ }
282
+
283
+ .custom-select {
284
+ position: relative;
285
+ font-family: 'Muli', sans-serif;
286
+ }
287
+
288
+ .custom-select select {
289
+ display: none; /*hide original SELECT element: */
290
+ }
291
+
292
+ .select-selected {
293
+ background-color: #fff;
294
+ }
295
+
296
+ .select-selected.disabled {
297
+ color: #8894ab;
298
+ }
299
+
300
+ /* Style the arrow inside the select element: */
301
+ .select-selected:after {
302
+ position: absolute;
303
+ content: "";
304
+ top: 14px;
305
+ right: 14px;
306
+ width: 20px;
307
+ height: 20px;
308
+ background: url(../img/chevron.svg) center center;
309
+ }
310
+
311
+ /* Point the arrow upwards when the select box is open (active): */
312
+ .select-selected.select-arrow-active {
313
+ border-color: #0566ff;
314
+ }
315
+
316
+ .select-selected.select-arrow-active:after {
317
+ transform: rotate(180deg);
318
+ }
319
+
320
+ /* style the items (options), including the selected item: */
321
+ .select-items div, .select-selected {
322
+ color: #080f1a;
323
+ padding: 8px 15px;
324
+ line-height: 24px;
325
+ border: none;
326
+ cursor: pointer;
327
+ }
328
+
329
+ /* Style items (options): */
330
+ .select-items {
331
+ position: absolute;
332
+ background-color: #fff;
333
+ top: calc(100% + 8px);
334
+ left: 0;
335
+ right: 0;
336
+ z-index: 99;
337
+ max-height: 212px;
338
+ overflow-y: auto;
339
+ border: 1px solid #bcc5d7;
340
+ border-radius: 3px;
341
+ padding-top: 4px;
342
+ padding-bottom: 4px;
343
+ font-size: 16px;
344
+ line-height: 24px;
345
+ }
346
+
347
+ /* Hide the items when the select box is closed: */
348
+ .select-hide {
349
+ display: none;
350
+ }
351
+
352
+ .select-items div:hover, .same-as-selected {
353
+ background-color: rgba(5, 102, 255, 0.08);
354
+ color: #0566ff;
355
+ }
356
+
357
+ .logos {
358
+ position: absolute;
359
+ width: 100%;
360
+ max-width: 128px;
361
+ display: inline-flex;
362
+ background: url(../img/plus.svg) no-repeat;
363
+ background-position: 68px 18px;
364
+ }
365
+
366
+ @media only screen and (min-width: 480px) {
367
+ .logos {
368
+ max-width: 360px;
369
+ }
370
+ }
371
+
372
+ .logo {
373
+ position: relative;
374
+ display: inline-flex;
375
+ width: 48px;
376
+ height: 48px;
377
+ border-radius: 20px;
378
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
379
+ }
380
+
381
+ .logo + .logo {
382
+ margin-left: 53px;
383
+ }
384
+
385
+ .tidio-logo {
386
+ background: url(../img/tidio-logo.svg) no-repeat center center;
387
+ background-color: #fff;
388
+ }
389
+
390
+ .wp-logo {
391
+ background: url(../img/wp-logo.svg) no-repeat center center;
392
+ background-color: #fff;
393
+ }
media/css/plugin-minicolors.css DELETED
@@ -1,259 +0,0 @@
1
- .minicolors {
2
- position: relative;
3
- }
4
-
5
- .minicolors-swatch {
6
- position: absolute;
7
- vertical-align: middle;
8
- background: url('../img/color-pallete.png') -80px 0;
9
- border: solid 1px #ccc;
10
- cursor: text;
11
- padding: 0;
12
- margin: 0;
13
- display: inline-block;
14
- }
15
-
16
- .minicolors-swatch-color {
17
- position: absolute;
18
- top: 0;
19
- left: 0;
20
- right: 0;
21
- bottom: 0;
22
- }
23
-
24
- .minicolors input[type=hidden] + .minicolors-swatch {
25
- width: 28px;
26
- position: static;
27
- cursor: pointer;
28
- }
29
-
30
- /* Panel */
31
- .minicolors-panel {
32
- position: absolute;
33
- width: 173px;
34
- height: 152px;
35
- background: white;
36
- border: solid 1px #CCC;
37
- box-shadow: 0 0 20px rgba(0, 0, 0, .2);
38
- z-index: 99999;
39
- -moz-box-sizing: content-box;
40
- -webkit-box-sizing: content-box;
41
- box-sizing: content-box;
42
- display: none;
43
- }
44
-
45
- .minicolors-panel.minicolors-visible {
46
- display: block;
47
- }
48
-
49
- /* Panel positioning */
50
- .minicolors-position-top .minicolors-panel {
51
- top: -154px;
52
- }
53
-
54
- .minicolors-position-right .minicolors-panel {
55
- right: 0;
56
- }
57
-
58
- .minicolors-position-bottom .minicolors-panel {
59
- top: auto;
60
- }
61
-
62
- .minicolors-position-left .minicolors-panel {
63
- left: 0;
64
- }
65
-
66
- .minicolors-with-opacity .minicolors-panel {
67
- width: 194px;
68
- }
69
-
70
- .minicolors .minicolors-grid {
71
- position: absolute;
72
- top: 1px;
73
- left: 1px;
74
- width: 150px;
75
- height: 150px;
76
- background: url('../img/color-pallete.png') -120px 0;
77
- cursor: crosshair;
78
- }
79
-
80
- .minicolors .minicolors-grid-inner {
81
- position: absolute;
82
- top: 0;
83
- left: 0;
84
- width: 150px;
85
- height: 150px;
86
- background: none;
87
- }
88
-
89
- .minicolors-slider-saturation .minicolors-grid {
90
- background-position: -420px 0;
91
- }
92
-
93
- .minicolors-slider-saturation .minicolors-grid-inner {
94
- background: url('../img/color-pallete.png') -270px 0;
95
- }
96
-
97
- .minicolors-slider-brightness .minicolors-grid {
98
- background-position: -570px 0;
99
- }
100
-
101
- .minicolors-slider-brightness .minicolors-grid-inner {
102
- background: black;
103
- }
104
-
105
- .minicolors-slider-wheel .minicolors-grid {
106
- background-position: -720px 0;
107
- }
108
-
109
- .minicolors-slider,
110
- .minicolors-opacity-slider {
111
- position: absolute;
112
- top: 1px;
113
- left: 152px;
114
- width: 20px;
115
- height: 150px;
116
- background: white url('../img/color-pallete.png') 0 0;
117
- cursor: row-resize;
118
- }
119
-
120
- .minicolors-slider-saturation .minicolors-slider {
121
- background-position: -60px 0;
122
- }
123
-
124
- .minicolors-slider-brightness .minicolors-slider {
125
- background-position: -20px 0;
126
- }
127
-
128
- .minicolors-slider-wheel .minicolors-slider {
129
- background-position: -20px 0;
130
- }
131
-
132
- .minicolors-opacity-slider {
133
- left: 173px;
134
- background-position: -40px 0;
135
- display: none;
136
- }
137
-
138
- .minicolors-with-opacity .minicolors-opacity-slider {
139
- display: block;
140
- }
141
-
142
- /* Pickers */
143
- .minicolors-grid .minicolors-picker {
144
- position: absolute;
145
- top: 70px;
146
- left: 70px;
147
- width: 12px;
148
- height: 12px;
149
- border: solid 1px black;
150
- border-radius: 10px;
151
- margin-top: -6px;
152
- margin-left: -6px;
153
- background: none;
154
- }
155
-
156
- .minicolors-grid .minicolors-picker > div {
157
- position: absolute;
158
- top: 0;
159
- left: 0;
160
- width: 8px;
161
- height: 8px;
162
- border-radius: 8px;
163
- border: solid 2px white;
164
- -moz-box-sizing: content-box;
165
- -webkit-box-sizing: content-box;
166
- box-sizing: content-box;
167
- }
168
-
169
- .minicolors-picker {
170
- position: absolute;
171
- top: 0;
172
- left: 0;
173
- width: 18px;
174
- height: 2px;
175
- background: white;
176
- border: solid 1px black;
177
- margin-top: -2px;
178
- -moz-box-sizing: content-box;
179
- -webkit-box-sizing: content-box;
180
- box-sizing: content-box;
181
- }
182
-
183
- /* Inline controls */
184
- .minicolors-inline {
185
- display: inline-block;
186
- }
187
-
188
- .minicolors-inline .minicolors-input {
189
- display: none !important;
190
- }
191
-
192
- .minicolors-inline .minicolors-panel {
193
- position: relative;
194
- top: auto;
195
- left: auto;
196
- box-shadow: none;
197
- z-index: auto;
198
- display: inline-block;
199
- }
200
-
201
- /* Default theme */
202
- .minicolors-theme-default .minicolors-swatch {
203
- top: 5px;
204
- left: 5px;
205
- width: 18px;
206
- height: 18px;
207
- }
208
- .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
209
- left: auto;
210
- right: 5px;
211
- }
212
- .minicolors-theme-default.minicolors {
213
- width: auto;
214
- display: inline-block;
215
- }
216
- .minicolors-theme-default .minicolors-input {
217
- height: 20px;
218
- width: auto;
219
- display: inline-block;
220
- padding-left: 26px;
221
- }
222
- .minicolors-theme-default.minicolors-position-right .minicolors-input {
223
- padding-right: 26px;
224
- padding-left: inherit;
225
- }
226
-
227
- /* Bootstrap theme */
228
- .minicolors-theme-bootstrap .minicolors-swatch {
229
- top: 3px;
230
- left: 3px;
231
- width: 28px;
232
- height: 28px;
233
- border-radius: 3px;
234
- }
235
- .minicolors-theme-bootstrap .minicolors-swatch-color {
236
- border-radius: inherit;
237
- }
238
- .minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
239
- left: auto;
240
- right: 3px;
241
- }
242
- .minicolors-theme-bootstrap .minicolors-input {
243
- padding-left: 44px;
244
- }
245
- .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
246
- padding-right: 44px;
247
- padding-left: 12px;
248
- }
249
- .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
250
- top: 4px;
251
- left: 4px;
252
- width: 37px;
253
- height: 37px;
254
- border-radius: 5px;
255
- }
256
- .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
257
- width: 24px;
258
- height: 24px;
259
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
media/img/16.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19">
2
+ <path fill="#D6D9E3" fill-rule="evenodd" d="M8.575 0C3.94.226.229 4.163.01 9.085c-.219 4.922 3.126 9.212 7.72 9.902.317.05.64-.046.883-.267.243-.22.385-.543.387-.883v-.062c-.009-.59-.426-1.081-.976-1.152-3.45-.533-5.948-3.77-5.762-7.466.185-3.696 2.992-6.633 6.475-6.773m.42.123c3.318-.15 6.2 2.612 6.684 6.407.065.614.513 1.078 1.048 1.086h.057c.308-.002.6-.16.8-.43.2-.27.288-.628.242-.98C17.354 3.48 13.462-.234 9 .012"/>
3
+ </svg>
media/img/27.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
2
+ <path fill="#F54586" fill-rule="evenodd" d="M4 1.474c.002.841.686 1.521 1.53 1.521L10.823 3l-5.63 5.633a1.503 1.503 0 0 0 .02 2.112c.584.58 1.526.588 2.12.017L13 5.188v5.296c0 .403.162.789.448 1.073.286.284.673.444 1.077.443a1.487 1.487 0 0 0 1.056-.45c.277-.285.427-.669.418-1.066V1.542a1.442 1.442 0 0 0-.467-1.046l.016-.017a1.465 1.465 0 0 0-1.055-.466L5.526.001A1.475 1.475 0 0 0 4 1.475zM.393 15.608a1.34 1.34 0 0 1 0-1.898l1.316-1.316a1.34 1.34 0 0 1 1.897-.001c.525.524.525 1.374.002 1.899l-1.316 1.316a1.343 1.343 0 0 1-1.899-.002v.002z"/>
3
+ </svg>
media/img/28.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="22" viewBox="0 0 14 22">
2
+ <path fill="#D6D9E3" fill-rule="evenodd" d="M12.698 2.673L5.814 9.634h4.607c.365-.027.724.107.985.366a1.308 1.308 0 0 1 0 1.84l-9.098 9.196a1.277 1.277 0 0 1-1.243.337c-.444-.12-.79-.471-.91-.92a1.31 1.31 0 0 1 .334-1.256l6.887-6.962H2.769a1.26 1.26 0 0 1-.985-.366 1.308 1.308 0 0 1 0-1.84L10.882.834c.32-.35.804-.493 1.261-.376.457.118.814.48.93.941a1.31 1.31 0 0 1-.375 1.275z"/>
3
+ </svg>
media/img/29.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="43" height="21" viewBox="0 0 43 21">
2
+ <path fill="#303CA5" fill-rule="evenodd" d="M42.671 19.304c-.144.498-.53.89-1.027 1.044a1.552 1.552 0 0 1-1.44-.281c-1.472-1.166-2.08-2.957-2.599-4.477-.675-1.985-1.122-3.125-2.46-3.482-1.337-.357-2.296.406-3.879 1.79-1.652 1.445-3.71 3.244-6.72 2.44-3.012-.803-3.889-3.385-4.595-5.46-.674-1.985-1.12-3.125-2.456-3.481-1.336-.357-2.295.406-3.877 1.79-1.652 1.446-3.709 3.245-6.72 2.441-3.01-.803-3.887-3.386-4.593-5.46C1.8 4.678 1.421 3.663.698 3.099A1.497 1.497 0 0 1 .16 1.53 1.552 1.552 0 0 1 2.63.767C4.1 1.933 4.71 3.724 5.224 5.243c.675 1.984 1.122 3.124 2.458 3.48 1.336.358 2.295-.405 3.876-1.79 1.653-1.445 3.71-3.244 6.72-2.44 3.01.803 3.888 3.385 4.593 5.46.674 1.985 1.121 3.124 2.457 3.481 1.337.357 2.298-.405 3.88-1.79 1.652-1.446 3.709-3.244 6.72-2.44 3.012.804 3.89 3.386 4.596 5.46.508 1.492.886 2.507 1.61 3.07.48.369.691.987.537 1.57z"/>
3
+ </svg>
media/img/34.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
2
+ <path fill="#D6D9E3" fill-rule="evenodd" d="M20.374 11.944l-2.57 1.457-1.94 5.075c-.155.361-.506.603-.905.624a1.048 1.048 0 0 1-.968-.527l-1.33-2.26-5.141 2.914a1.523 1.523 0 0 1-1.138.136 1.494 1.494 0 0 1-.903-.692L.32 9.904A1.445 1.445 0 0 1 .159 8.79c.1-.378.348-.702.69-.9L13.705.608c.72-.4 1.633-.151 2.04.555l5.159 8.766c.203.336.26.737.162 1.115-.1.378-.348.702-.69.9z"/>
3
+ </svg>
media/img/4.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="21" height="15" viewBox="0 0 21 15">
2
+ <path fill="#F8AA09" fill-rule="evenodd" d="M18.769 6.63l-3.68-3.562-3.582 3.463c-.026.03-.037.068-.065.097a1.385 1.385 0 0 1-1.882 0 1.05 1.05 0 0 1-.066-.097L5.911 3.068 2.21 6.648a1.34 1.34 0 0 1-1.827-.022A1.235 1.235 0 0 1 .36 4.86L4.904.466c.026-.03.036-.067.065-.096A1.33 1.33 0 0 1 5.893 0c.347 0 .68.133.925.37l3.68 3.56L14.08.466c.026-.03.037-.067.066-.096a1.385 1.385 0 0 1 1.882 0c.029.029.04.064.065.096l4.523 4.374c.33.32.46.785.34 1.221-.12.437-.473.778-.924.896a1.338 1.338 0 0 1-1.263-.326zM4.92 8.466c.026-.03.037-.068.066-.096A1.33 1.33 0 0 1 5.91 8c.346 0 .678.133.923.37l3.677 3.552 3.578-3.457c.026-.03.037-.068.066-.096a1.385 1.385 0 0 1 1.88 0c.03.029.04.064.065.096l4.519 4.365c.33.319.458.783.337 1.218-.12.436-.472.776-.923.892a1.337 1.337 0 0 1-1.261-.326l-3.676-3.555-3.577 3.456c-.026.03-.037.067-.066.096a1.384 1.384 0 0 1-1.88 0 1.053 1.053 0 0 1-.065-.096l-3.58-3.456L2.23 14.63a1.339 1.339 0 0 1-1.847 0 1.232 1.232 0 0 1 0-1.784L4.92 8.465z"/>
3
+ </svg>
media/img/8.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="23" height="15" viewBox="0 0 23 15">
2
+ <path fill="#D6D9E3" fill-rule="evenodd" d="M18.099 8.113c-.201 1.937-1.297 3.692-2.995 4.795a7.331 7.331 0 0 1-6.831.579c-3.852 1.26-7.01 1.282-7.91-.196-.902-1.477.69-4.046 3.762-6.57.218-2.116 1.503-4.003 3.452-5.069a7.35 7.35 0 0 1 6.373-.304c3.854-1.262 7.01-1.283 7.911.195.901 1.478-.69 4.047-3.762 6.57zM2.771 11.965c.332.542 1.564.527 3.287.062a6.584 6.584 0 0 1-1.7-2.78c-1.289 1.178-1.919 2.175-1.587 2.718zM19.453 2.87c-.332-.543-1.564-.527-3.287-.063a6.583 6.583 0 0 1 1.699 2.78c1.29-1.177 1.92-2.174 1.588-2.717z"/>
3
+ </svg>
media/img/a-center.png ADDED
Binary file
media/img/bg.png DELETED
Binary file
media/img/blocks-bg.png DELETED
Binary file
media/img/brand-logo.png DELETED
Binary file
media/img/checkmark.png DELETED
Binary file
media/img/chevron.svg ADDED
@@ -0,0 +1,4 @@
 
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
+ <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="#bcc5d7"/>
3
+ <path d="M0 0h24v24H0z" fill="none"/>
4
+ </svg>
media/img/color-pallete.png DELETED
Binary file
media/img/plus.svg ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 13 12">
2
+ <path fill="#D6D9E3" fill-rule="evenodd" d="M8 0v4.5h4.5v3H8V12H5V7.499L.5 7.5v-3L5 4.499V0h3z"/>
3
+ </svg>
media/img/tidio-logo.svg ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
+ <g fill="none" fill-rule="nonzero">
3
+ <path fill="#135EEB" d="M15.2.554c-4.062 0-7.508 2.892-8.246 6.892.492-.061.984-.123 1.477-.123-.493 0-.985.062-1.477.123-4 .739-6.892 4.185-6.892 8.246V24H8.43c4 0 7.446-2.83 8.184-6.77H14.77 23.57V8.924c-.062-4.615-3.755-8.37-8.37-8.37zm-8.37 8.37z"/>
4
+ <path fill="#0A60EA" d="M8.43 7.323c-.492 0-.984.062-1.476.123-.062.492-.123.985-.123 1.477 0 4.615 3.754 8.37 8.369 8.308h1.415c.123-.493.123-1.046.123-1.6.062-4.554-3.692-8.246-8.307-8.308z"/>
5
+ <path fill="#15C2FF" d="M15.2 17.292c-4.615 0-8.37-3.692-8.37-8.307 0-.493.062-.985.124-1.477a8.266 8.266 0 0 0-6.892 8.184V24H8.43c4 0 7.446-2.83 8.184-6.77H15.2v.062z"/>
6
+ <path fill="#2C82FF" d="M15.2.554c-4.062 0-7.508 2.892-8.246 6.892.492-.061.984-.123 1.477-.123 4.615 0 8.369 3.692 8.369 8.308 0 .554-.062 1.046-.123 1.6h6.892V8.923C23.508 4.308 19.815.553 15.2.553z"/>
7
+ </g>
8
+ </svg>
media/img/wp-logo.svg ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="28px" viewBox="0 0 28 28" version="1.1">
3
+ <g id="surface1">
4
+ <path style=" stroke:none;fill-rule:evenodd;fill:rgb(19.607843%,21.568627%,23.529412%);fill-opacity:1;" d="M 14.035156 0.078125 C 6.324219 0.078125 0.078125 6.324219 0.078125 14.035156 C 0.078125 21.742188 6.324219 27.992188 14.035156 27.992188 C 21.742188 27.992188 27.992188 21.742188 27.992188 14.035156 C 27.992188 6.324219 21.742188 0.078125 14.035156 0.078125 M 14.035156 0.914062 C 16.648438 0.90625 19.203125 1.6875 21.367188 3.152344 C 22.765625 4.097656 23.96875 5.300781 24.914062 6.699219 C 26.378906 8.863281 27.160156 11.417969 27.152344 14.03125 C 27.160156 16.648438 26.378906 19.203125 24.914062 21.367188 C 23.96875 22.765625 22.765625 23.96875 21.367188 24.914062 C 19.203125 26.378906 16.648438 27.160156 14.035156 27.152344 C 11.417969 27.160156 8.863281 26.378906 6.699219 24.914062 C 5.300781 23.96875 4.097656 22.765625 3.152344 21.367188 C 1.6875 19.203125 0.90625 16.648438 0.914062 14.035156 C 0.90625 11.417969 1.6875 8.863281 3.152344 6.699219 C 4.097656 5.300781 5.300781 4.097656 6.699219 3.152344 C 8.863281 1.6875 11.417969 0.90625 14.03125 0.914062 "/>
5
+ <path style=" stroke:none;fill-rule:evenodd;fill:rgb(19.607843%,21.568627%,23.529412%);fill-opacity:1;" d="M 24.242188 8.453125 C 24.292969 8.824219 24.320312 9.222656 24.320312 9.648438 C 24.320312 10.828125 24.097656 12.15625 23.433594 13.816406 L 19.882812 24.085938 C 23.464844 22.003906 25.667969 18.175781 25.664062 14.03125 C 25.667969 12.082031 25.179688 10.164062 24.242188 8.453125 Z M 14.238281 15.050781 L 10.75 25.191406 C 13.089844 25.882812 15.59375 25.816406 17.898438 25.007812 C 17.863281 24.957031 17.835938 24.902344 17.8125 24.847656 Z M 21.886719 13.449219 C 21.886719 12.007812 21.371094 11.015625 20.925781 10.238281 C 20.339844 9.28125 19.785156 8.46875 19.785156 7.511719 C 19.785156 6.441406 20.59375 5.445312 21.738281 5.445312 C 21.789062 5.445312 21.839844 5.453125 21.886719 5.457031 C 19.746094 3.488281 16.941406 2.398438 14.035156 2.402344 C 10.117188 2.398438 6.464844 4.371094 4.316406 7.644531 C 4.589844 7.652344 4.84375 7.65625 5.0625 7.65625 C 6.28125 7.65625 8.164062 7.511719 8.164062 7.511719 C 8.789062 7.476562 8.863281 8.394531 8.238281 8.46875 C 8.238281 8.46875 7.609375 8.542969 6.90625 8.578125 L 11.144531 21.179688 L 13.6875 13.546875 L 11.878906 8.578125 C 11.46875 8.554688 11.0625 8.515625 10.65625 8.46875 C 10.027344 8.429688 10.101562 7.472656 10.730469 7.507812 C 10.730469 7.507812 12.652344 7.65625 13.792969 7.65625 C 15.011719 7.65625 16.894531 7.507812 16.894531 7.507812 C 17.523438 7.472656 17.59375 8.394531 16.96875 8.46875 C 16.96875 8.46875 16.335938 8.542969 15.636719 8.578125 L 19.839844 21.082031 L 21.039062 17.28125 C 21.574219 15.617188 21.886719 14.441406 21.886719 13.445312 Z M 2.402344 14.03125 C 2.402344 18.492188 4.945312 22.554688 8.957031 24.5 L 3.410156 9.300781 C 2.742188 10.789062 2.402344 12.402344 2.402344 14.035156 Z M 2.402344 14.03125 "/>
6
+ </g>
7
+ </svg>
media/js/options.js CHANGED
@@ -1,160 +1,303 @@
1
- var TidioChatWP = {
2
- apiUrl: 'https://api-v2.tidio.co',
3
- chatUrl: 'https://www.tidiochat.com',
4
- token: null,
5
- setRedirectLink: function(url){
6
- jQuery('a[href="admin.php?page=tidio-chat"]').attr('href', url).attr('target', '_blank');
7
- jQuery("#open-panel-link").attr('href', url);
8
- },
9
- renderProjects: function (data) {
10
- var select_project = jQuery('#select-tidio-project');
11
- for (var i in data.value) {
12
- var project = data.value[i];
13
- var value = {project_id:project.id, private_key:project.private_key, public_key:project.public_key};
14
-
15
- var option = jQuery('<option value="'+project.id+'">' + project.name + '</option>');
16
- option.data('value', value);
17
- select_project.append(option);
18
- }
19
-
20
- jQuery('#input-blocks').fadeOut('fast', function () {
21
- jQuery('#projects-selector').append(select_project);
22
- jQuery('#select-project').fadeIn('fast', function(){
23
- jQuery('#tidio-login-button').prop('disabled', false).text('Log in');
24
- });
25
- });
26
- },
27
- getProjects: function (token) {
28
- jQuery.get(TidioChatWP.apiUrl + '/project', {
29
- api_token: token
30
- }, function (response) {
31
- TidioChatWP.renderProjects(response);
32
- }, 'json');
33
- },
34
- showError: function (message) {
35
- jQuery('#tidio-wrapper .error').empty().append('<p>' + message + '</p>').show();
36
- },
37
- hideError: function () {
38
- jQuery('#tidio-wrapper .error').hide();
39
- },
40
- init: function () {
41
-
42
-
43
- var login_button = jQuery('#tidio-login-button');
44
-
45
- /* Login */
46
- login_button.click(function (e) {
47
- TidioChatWP.hideError();
48
- var error = false;
49
- e.preventDefault();
50
- var email = jQuery('#tidio-login-input').val();
51
- var password = jQuery('#tidio-password-input').val();
52
-
53
- if (email.length == 0 || password.length == 0) {
54
- TidioChatWP.showError('Please fill email and password fields.');
55
- error = true;
56
- } else if (email == '' || email.indexOf('@') == -1 || email.indexOf('.') == -1) {
57
- TidioChatWP.showError('Email is wrong');
58
- error = true;
59
  }
 
 
 
 
 
 
 
60
 
61
- if (error)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  return false;
63
-
64
- login_button.prop('disabled', true).text('Loading...');
 
 
 
 
 
65
 
66
- jQuery.get(TidioChatWP.apiUrl + '/access/getUserToken', {
 
 
 
67
  email: email,
68
  password: password,
69
- }, function (data) {
70
- if (data.status == true && data.value != "ERR_DATA_INVALID") {
 
71
  TidioChatWP.token = data.value;
72
- TidioChatWP.getProjects(TidioChatWP.token);
73
  } else {
74
- TidioChatWP.showError('Wrong email or password');
75
- login_button.prop('disabled', false).text('Login');
76
  }
77
- }, 'json');
78
- });
79
-
80
- /* Load project details */
81
- jQuery('#get-tidio-project').click(function(e){
82
- e.preventDefault();
83
- jQuery('#get-tidio-project').prop('disabled', true).text('Loading...');
84
- var details = jQuery('#select-tidio-project option:selected').data('value');
85
- jQuery.extend( details,{'action': 'get_project_keys'});
86
- jQuery.post(ajaxurl, details, function(response) {
87
-
88
  window.open(response, '_blank');
89
  TidioChatWP.setRedirectLink(response);
90
- jQuery('#welcome-text').fadeOut('fast', function(){
91
- jQuery('#after-install-text').fadeIn('fast');
92
  });
93
- jQuery('#select-project').fadeOut('fast');
94
- });
95
-
96
- });
97
-
98
- /* No account login */
99
- jQuery('#redirect-to-panel').click(function (e){
100
- e.preventDefault();
101
- jQuery('#redirect-to-panel').prop('disabled', true).text('Loading...');
102
- var details = {'action': 'get_private_key'};
103
- jQuery.post(ajaxurl, details, function(response) {
104
- if(response=='error'){
105
- // load trought ajax url
106
- TidioChatWP.accessTroughtXHR(function(response){
107
- window.open(response, "_blank");
108
- TidioChatWP.setRedirectLink(response);
109
- jQuery('#welcome-text').fadeOut('fast', function(){
110
- jQuery('#after-install-text').fadeIn('fast');
111
- });
112
- jQuery('#input-blocks').fadeOut('fast');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
113
  });
114
- return false;
115
  }
116
- //
117
- window.open(response, "_blank");
118
- TidioChatWP.setRedirectLink(response);
119
- jQuery('#welcome-text').fadeOut('fast', function(){
120
- jQuery('#after-install-text').fadeIn('fast');
 
 
 
 
 
 
 
121
  });
122
- jQuery('#input-blocks').fadeOut('fast');
123
- });
124
- });
125
-
126
- /* Trigger on enter */
127
- jQuery('#tidio-login-input, #tidio-password-input').bind("keydown",function(e){
128
- if(e.keyCode == 13)
129
- login_button.trigger('click');
130
- });
131
-
132
- // Open panel
133
-
134
- // open-panel-link
135
- },
136
-
137
- accessTroughtXHR: function(_func){
138
-
139
- var xhr_url = TidioChatWP.apiUrl + '/access/external/create?url=' + location.protocol + '//' + location.host + '&platform=wordpress';
140
- jQuery.getJSON(xhr_url, {}, function(r) {
141
- if(!r || !r.value){
142
- alert('Error occured while creating, please try again!');
143
- return false;
144
  }
145
- _func(TidioChatWP.chatUrl + '/access?privateKey=' + r.value.private_key + '&app=chat&utm_source=platform&utm_medium=wordpress');
146
- // save this in wordpress database
147
- jQuery.post(ajaxurl, {'action': 'tidio_chat_save_keys', 'public_key': r.value.public_key, 'private_key': r.value.private_key}, function(response) {
148
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  });
150
-
151
- }).fail(function(){
152
- alert('Error occured while creating, please try again!');
153
- });
154
-
155
- }
156
- };
157
-
158
- jQuery(document).ready(function () {
159
  TidioChatWP.init();
160
  });
1
+ /* global jQuery */
2
+ jQuery(function ($) {
3
+ var TidioChatWP = {
4
+ apiUrl: 'https://api-v2.tidio.co',
5
+ chatUrl: 'https://www.tidiochat.com',
6
+ token: null,
7
+ init: function () {
8
+ this.error = $('.error');
9
+
10
+ this.form = $('#tidio-start');
11
+ this.form.show();
12
+ var emailField = this.form.find('#email');
13
+ emailField.val('');
14
+ this.form.off().submit(this.onStartSubmit.bind(this));
15
+ },
16
+ onStartSubmit: function () {
17
+ var emailField = this.form.find('#email');
18
+ var submitButton = this.form.find('button');
19
+ if (emailField.val() === '') {
20
+ this.showError('Can’t be empty!');
21
+ return false;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  }
23
+ if (emailField.is(':invalid')) {
24
+ this.showError('Email is invalid!');
25
+ return false;
26
+ }
27
+ this.hideError();
28
+
29
+ submitButton.prop('disabled', true).text('Loading...');
30
 
31
+ $.get(TidioChatWP.apiUrl + '/access/checkIfEmailIsRegistered', {
32
+ email: emailField.val(),
33
+ }).done(function (data) {
34
+ if (data.status === true && data.value &&
35
+ data.value.registered === true) {
36
+ this.form.hide();
37
+ submitButton.prop('disabled', false).
38
+ text('Start using Tidio');
39
+ this.showLoginForm(emailField.val());
40
+ } else {
41
+ this.redirectToPanel();
42
+ }
43
+ }.bind(this)).fail((function() {
44
+ submitButton.prop('disabled', false).text('Start using Tidio');
45
+ this.showError('Something went wrong.');
46
+ }).bind(this));
47
+ return false;
48
+ },
49
+ showError: function (message) {
50
+ this.error.text(message).fadeIn();
51
+ },
52
+ hideError: function () {
53
+ this.error.hide();
54
+ },
55
+ showLoginForm: function (emailValue) {
56
+ this.form = $('#tidio-login');
57
+ this.form.css('display', 'flex');
58
+ var emailField = this.form.find('#email');
59
+ emailField.val(emailValue);
60
+ var passwordField = this.form.find('#password');
61
+ passwordField.val('');
62
+
63
+ this.form.off().submit(this.onLoginSubmit.bind(this));
64
+ },
65
+ onLoginSubmit: function () {
66
+ var emailField = this.form.find('#email');
67
+ var passwordField = this.form.find('#password');
68
+ var submitButton = this.form.find('button');
69
+ if (emailField.val() === '') {
70
+ this.showError('Email can’t be empty!');
71
+ return false;
72
+ }
73
+ if (emailField.is(':invalid')) {
74
+ this.showError('Email is invalid!');
75
  return false;
76
+ }
77
+ if (passwordField.is(':invalid')) {
78
+ this.showError('Password must be at least 6 characters long!');
79
+ return false;
80
+ }
81
+ this.hideError();
82
+ submitButton.prop('disabled', true).text('Loading...');
83
 
84
+ var email = emailField.val();
85
+ var password = document.querySelector(
86
+ '#tidio-login #password').value;
87
+ $.get(TidioChatWP.apiUrl + '/access/getUserToken', {
88
  email: email,
89
  password: password,
90
+ }, (function (data) {
91
+ if (data.status === true && data.value !==
92
+ 'ERR_DATA_INVALID') {
93
  TidioChatWP.token = data.value;
94
+ this.getProjects(TidioChatWP.token);
95
  } else {
96
+ this.showError('Wrong email or password');
 
97
  }
98
+ submitButton.prop('disabled', false).text('Go to Tidio panel');
99
+ }).bind(this), 'json');
100
+ return false;
101
+ },
102
+ redirectToPanel: function () {
103
+ var redirect = function (response) {
 
 
 
 
 
104
  window.open(response, '_blank');
105
  TidioChatWP.setRedirectLink(response);
106
+ this.form.fadeOut('fast', function () {
107
+ $('#after-install-text').fadeIn('fast');
108
  });
109
+ };
110
+
111
+ $.post(ajaxurl, { 'action': 'get_private_key' },
112
+ function (response) {
113
+ if (response === 'error') {
114
+ // load trought ajax url
115
+ TidioChatWP.accessTroughtXHR(redirect);
116
+ return false;
117
+ }
118
+ redirect(response);
119
+ });
120
+ },
121
+ setRedirectLink: function (url) {
122
+ $('a[href="admin.php?page=tidio-chat"]').
123
+ attr('href', url).
124
+ attr('target', '_blank');
125
+ $('#open-panel-link').attr('href', url);
126
+ },
127
+ renderProjects: function (data) {
128
+ var select_project = $('#select-tidio-project');
129
+ var defaultOption = select_project.children()[0];
130
+ select_project.children().remove();
131
+ select_project.append(defaultOption);
132
+ for (var i in data.value) {
133
+ var project = data.value[i];
134
+ var value = {
135
+ project_id: project.id,
136
+ private_key: project.private_key,
137
+ public_key: project.public_key,
138
+ };
139
+
140
+ var option = $(
141
+ '<option value="' + project.id + '">' + project.name +
142
+ '</option>');
143
+ option.data('value', value);
144
+ select_project.append(option);
145
+ }
146
+ this.renderCustomSelect();
147
+
148
+ },
149
+ getProjects: function (token) {
150
+ $.get(TidioChatWP.apiUrl + '/project', {
151
+ api_token: token,
152
+ }, (function (response) {
153
+ this.form.hide();
154
+ this.form = $('#tidio-project');
155
+ this.form.show();
156
+ this.renderProjects(response);
157
+ this.form.off().submit(this.onProjectSubmit.bind(this));
158
+ var startOver = $('#start-over');
159
+ startOver.click(this.startOver.bind(this));
160
+ }).bind(this), 'json');
161
+ },
162
+ onProjectSubmit: function () {
163
+ var details = $('#select-tidio-project option:selected').
164
+ data('value');
165
+ $.extend(details, { 'action': 'get_project_keys' });
166
+ $.post(ajaxurl, details, (function (response) {
167
+ window.open(response, '_blank');
168
+ TidioChatWP.setRedirectLink(response);
169
+ this.form.fadeOut('fast', function () {
170
+ $('#after-install-text').fadeIn('fast');
171
+ });
172
+ }).bind(this));
173
+ return false;
174
+ },
175
+ startOver: function () {
176
+ this.deleteCustomSelect();
177
+ this.form.hide();
178
+ this.init();
179
+ },
180
+ deleteCustomSelect: function() {
181
+ var selectSelected = this.form.find('.custom-select .select-selected');
182
+ if (selectSelected.length) {
183
+ selectSelected.off().remove();
184
+ }
185
+ var selectItems = this.form.find('.custom-select .select-items');
186
+ if (selectItems.length) {
187
+ selectItems.off().remove();
188
+ }
189
+ },
190
+ renderCustomSelect: function () {
191
+
192
+ var customSelect, i, j, select, selectedItem, options, option;
193
+ /* Look for any elements with the class "custom-select": */
194
+ customSelect = document.getElementsByClassName('custom-select');
195
+ for (i = 0; i < customSelect.length; i++) {
196
+ select = customSelect[i].getElementsByTagName('select')[0];
197
+ /* For each element, create a new DIV that will act as the selected item: */
198
+ selectedItem = document.createElement('DIV');
199
+ selectedItem.setAttribute('class', 'select-selected disabled');
200
+ selectedItem.innerHTML = select.options[select.selectedIndex].innerHTML;
201
+ customSelect[i].appendChild(selectedItem);
202
+ /* For each element, create a new DIV that will contain the option list: */
203
+ options = document.createElement('DIV');
204
+ options.setAttribute('class', 'select-items select-hide');
205
+ for (j = 1; j < select.length; j++) {
206
+ /* For each option in the original select element,
207
+ create a new DIV that will act as an option item: */
208
+ option = document.createElement('DIV');
209
+ option.innerHTML = select.options[j].innerHTML;
210
+ option.addEventListener('click', function () {
211
+ /* When an item is clicked, update the original select box,
212
+ and the selected item: */
213
+ var y, i, k, s, h;
214
+ s = this.parentNode.parentNode.getElementsByTagName(
215
+ 'select')[0];
216
+ h = this.parentNode.previousSibling;
217
+ for (i = 0; i < s.length; i++) {
218
+ if (s.options[i].innerHTML === this.innerHTML) {
219
+ s.selectedIndex = i;
220
+ h.innerHTML = this.innerHTML;
221
+ y = this.parentNode.getElementsByClassName(
222
+ 'same-as-selected');
223
+ for (k = 0; k < y.length; k++) {
224
+ y[k].removeAttribute('class');
225
+ }
226
+ this.setAttribute('class', 'same-as-selected');
227
+ break;
228
+ }
229
+ }
230
+ h.click();
231
  });
232
+ options.appendChild(option);
233
  }
234
+ customSelect[i].appendChild(options);
235
+ selectedItem.addEventListener('click', function (event) {
236
+ /* When the select box is clicked, close any other select boxes,
237
+ and open/close the current select box: */
238
+ event.stopPropagation();
239
+ event.preventDefault();
240
+ closeAllSelect(this);
241
+ this.nextSibling.classList.toggle('select-hide');
242
+ this.classList.toggle('select-arrow-active');
243
+ if (!this.classList.contains('select-arrow-active')) {
244
+ this.classList.remove('disabled');
245
+ }
246
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
247
  }
 
 
 
248
 
249
+ function closeAllSelect(element) {
250
+ /* A function that will close all select boxes in the document,
251
+ except the current select box: */
252
+ var items, selected, i, arrNo = [];
253
+ items = document.getElementsByClassName('select-items');
254
+ selected = document.getElementsByClassName('select-selected');
255
+ for (i = 0; i < selected.length; i++) {
256
+ if (element == selected[i]) {
257
+ arrNo.push(i);
258
+ } else {
259
+ selected[i].classList.remove('select-arrow-active');
260
+ }
261
+ }
262
+ for (i = 0; i < items.length; i++) {
263
+ if (arrNo.indexOf(i)) {
264
+ items[i].classList.add('select-hide');
265
+ }
266
+ }
267
+ }
268
+
269
+ /* If the user clicks anywhere outside the select box,
270
+ then close all select boxes: */
271
+ document.addEventListener('click', closeAllSelect);
272
+ },
273
+ accessTroughtXHR: function (_func) {
274
+
275
+ var xhr_url = TidioChatWP.apiUrl + '/access/external/create?url=' +
276
+ location.protocol + '//' + location.host +
277
+ '&platform=wordpress';
278
+ $.getJSON(xhr_url, {}, function (r) {
279
+ if (!r || !r.value) {
280
+ alert('Error occured while creating, please try again!');
281
+ return false;
282
+ }
283
+ _func(TidioChatWP.chatUrl + '/access?privateKey=' +
284
+ r.value.private_key +
285
+ '&app=chat&utm_source=platform&utm_medium=wordpress');
286
+ // save this in wordpress database
287
+ $.post(ajaxurl, {
288
+ 'action': 'tidio_chat_save_keys',
289
+ 'public_key': r.value.public_key,
290
+ 'private_key': r.value.private_key,
291
+ }, function (response) {
292
+
293
+ });
294
+
295
+ }).fail(function () {
296
+ alert('Error occured while creating, please try again!');
297
  });
298
+
299
+ },
300
+ };
301
+
 
 
 
 
 
302
  TidioChatWP.init();
303
  });
options.php CHANGED
@@ -1,46 +1,61 @@
1
  <div id="tidio-wrapper">
2
-
3
- <div id="tidio-chat-wp-plugin">
4
-
5
- <div id="welcome-text">
6
- <h1>Hi there! Great to see you’ve installed Tidio Chat.</h1>
7
- <p>Select one of the options below and your integration will be complete. If you’ve already got a Tidio account, the current project will be connected to that account. However, if you don’t have an account with us (or you’d like to create a new one) - just select the option on the right.</p>
8
- </div>
9
- <div id="after-install-text">
10
- <h1>Your site is already integrated with Tidio Chat</h1>
11
- <p>All you need to do now is select the “Tidio Chat” tab on the left - that will take you to your Tidio panel. You can also open the panel by using the link below.</p>
12
- <p><a href="#" id="open-panel-link" class="button button-primary tidio-button" target="_blank" style="margin-left: auto; margin-right: auto; display: block;">Go to Panel</a></p>
13
  </div>
14
-
15
-
16
- <div class="error"></div>
17
-
18
- <div id="input-blocks">
19
- <div id="tidio-chat-login">
20
- <h2>Yes, I have an account with Tidio</h2>
21
- <div class="form-control">
22
- <input type="text" value="" id="tidio-login-input" class="text-input" placeholder="Enter your e-mail...">
23
- </div>
24
- <div class="form-control">
25
- <input type="password" value="" id="tidio-password-input" class="text-input" placeholder="Type password...">
26
- </div>
27
- <a href="#" id="tidio-login-button" class="button tidio-button" target="_blank">Login</a>
28
- </div>
29
- <div id="tidio-chat-panel">
30
- <h2>No, I do not have an account with Tidio</h2>
31
- <div id="tidio-apply-account">
32
- That's alright, you can start using Tidio without having the login.
33
- </div>
34
- <a href="#" id="redirect-to-panel" class="button button-primary tidio-button" target="_blank">Create a new account</a>
35
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </div>
37
-
38
- <div id="select-project">
39
- <h2>Select project:</h2>
40
- <div class="form-control">
41
- <select name="select-tidio-project" id="select-tidio-project"></select>
42
- </div>
43
- <a href="#" id="get-tidio-project" style="margin-left:auto;margin-right:auto;display:block;" class="button button-primary tidio-button" target="_blank">Select</a>
44
  </div>
45
  </div>
46
- </div>
1
  <div id="tidio-wrapper">
2
+ <div class="tidio-box-wrapper">
3
+ <div class="tidio-box tidio-box-actions">
4
+ <div class="logos">
5
+ <div class="logo tidio-logo"></div>
6
+ <div class="logo wp-logo"></div>
 
 
 
 
 
 
7
  </div>
8
+ <form novalidate id="tidio-start">
9
+ <h1>Start using Tidio</h1>
10
+ <label>
11
+ Email Address
12
+ <input type="email" id="email" placeholder="e.g. tidius@tidio.com" required/>
13
+ </label>
14
+
15
+ <div class="error"></div>
16
+ <button>Let’s go</button>
17
+ </form>
18
+ <form novalidate id="tidio-login">
19
+ <h1>Log into your account</h1>
20
+ <label>
21
+ Email Address
22
+ <input type="email" id="email" placeholder="e.g. tidius@tidio.com" required/>
23
+ </label>
24
+
25
+ <label>
26
+ Password
27
+ <input type="password" id="password" minlength="6" required placeholder="Type your password&hellip;"/>
28
+ </label>
29
+
30
+ <div class="error"></div>
31
+ <button>Go to Tidio panel</button>
32
+ <a class="button btn-link" href="https://www.tidio.com/panel/forgot-password" target="_blank">Forgot password?</a>
33
+ </form>
34
+ <form novalidate id="tidio-project">
35
+ <h1>Choose your project</h1>
36
+ <label>
37
+ Choose your project
38
+ <div class="custom-select">
39
+ <select name="select-tidio-project" id="select-tidio-project">
40
+ <option selected="selected" disabled>Pick one from the list&hellip;</option>
41
+ </select>
42
+ </div>
43
+ </label>
44
+
45
+ <div class="error"></div>
46
+ <button>Go to Tidio panel</button>
47
+ <button type="button" id="start-over" class="btn-link">Start all over again</button>
48
+ </form>
49
+ <form id="after-install-text">
50
+ <h1>Your site is already integrated with Tidio Chat</h1>
51
+ <p>All you need to do now is select the “Tidio Chat” tab on the left - that will take you to your Tidio panel. You can also open the panel by using the link below.</p>
52
+ <a href="#" id="open-panel-link" class="button" target="_blank">Go to Panel</a>
53
+ </form>
54
  </div>
55
+ <div class="tidio-box tidio-box-advert">
56
+ <h2>Join 300 000+ websites using Tidio - Live Chat boosted with Bots</h2>
57
+ <p>Increase sales by skyrocketing communication with customers.</p>
58
+ <div class="tidio-box-advert-image"></div>
 
 
 
59
  </div>
60
  </div>
61
+ </div>
readme.txt CHANGED
@@ -121,6 +121,10 @@ Yes, simply go to your chat panel and switch the “Display” option to off.
121
 
122
  == Changelog ==
123
 
 
 
 
 
124
  = 3.5.0 =
125
  * Change domain to tidio.com in URL
126
  * Change path in login URL
121
 
122
  == Changelog ==
123
 
124
+ = 4.0.0 =
125
+ * New integration flow
126
+ * Refresh styles to match Tidio design
127
+
128
  = 3.5.0 =
129
  * Change domain to tidio.com in URL
130
  * Change path in login URL
tidio-elements.php CHANGED
@@ -4,12 +4,12 @@
4
  * Plugin Name: Tidio Chat
5
  * Plugin URI: http://www.tidiochat.com
6
  * Description: Tidio Live Chat - Live chat for your website. No logging in, no signing up - integrates with your website in less than 20 seconds.
7
- * Version: 3.5.0
8
  * Author: Tidio Ltd.
9
  * Author URI: http://www.tidiochat.com
10
  * License: GPL2
11
  */
12
- define('TIDIOCHAT_VERSION', '3.5.0');
13
  define('AFFILIATE_CONFIG_FILE_PATH', get_template_directory().'/tidio_affiliate_ref_id.txt');
14
 
15
  class TidioLiveChat
4
  * Plugin Name: Tidio Chat
5
  * Plugin URI: http://www.tidiochat.com
6
  * Description: Tidio Live Chat - Live chat for your website. No logging in, no signing up - integrates with your website in less than 20 seconds.
7
+ * Version: 4.0.0
8
  * Author: Tidio Ltd.
9
  * Author URI: http://www.tidiochat.com
10
  * License: GPL2
11
  */
12
+ define('TIDIOCHAT_VERSION', '4.0.0');
13
  define('AFFILIATE_CONFIG_FILE_PATH', get_template_directory().'/tidio_affiliate_ref_id.txt');
14
 
15
  class TidioLiveChat