@textback/notification-widget 2.0.1-103341 → 2.0.1-110242
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.js +3 -3
- package/build/sdk.js +2 -2
- package/package.json +1 -1
- package/server.js +224 -224
- package/src/sdk/sdk.js +6 -7
- package/src/sdk/widget/widget.js +7 -7
- package/src/widget/components/tb-notification-widget/index.js +6 -6
- package/src/widget/components/tb-nw-wahunter/index.js +8 -47
- package/src/widget/icons/tb-logo-dark.svg +16 -0
- package/src/widget/icons/tb-logo-white.svg +16 -0
- package/src/widget/icons/tb-logo.svg +15 -20
- package/views/sdk.html +215 -259
- package/webpack.dev.js +2 -3
package/views/sdk.html
CHANGED
|
@@ -1,132 +1,126 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html>
|
|
3
|
-
|
|
4
|
-
<meta charset="UTF-8"
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>SDK Test</title>
|
|
7
7
|
|
|
8
8
|
<style>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
button {
|
|
10
|
+
margin-right: 10px;
|
|
11
|
+
}
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
.tb-buttons,
|
|
14
|
+
.tb-btn-wrapper,
|
|
15
|
+
.tb-btn {
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
text-align: center;
|
|
18
|
+
}
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
.tb-btn-wrapper {
|
|
21
|
+
position: relative;
|
|
22
|
+
display: inline-block;
|
|
23
|
+
}
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
.tb-btn-tooltip {
|
|
26
|
+
position: absolute;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
visibility: hidden;
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
30
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
31
|
+
padding: 5px 7px;
|
|
32
|
+
border-radius: 3px;
|
|
33
|
+
color: #6f7b8a;
|
|
34
|
+
font-size: 10px;
|
|
35
|
+
z-index: 10;
|
|
36
|
+
top: 52px;
|
|
37
|
+
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
|
|
38
|
+
transition: opacity 0.4s;
|
|
39
|
+
}
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
41
|
+
.tb-btn-tooltip:before, .tb-btn-tooltip:after {
|
|
42
|
+
content: ' ';
|
|
43
|
+
height: 0;
|
|
44
|
+
position: absolute;
|
|
45
|
+
width: 0;
|
|
46
|
+
border: 10px solid transparent;
|
|
47
|
+
}
|
|
49
48
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
.tb-btn-tooltip:before {
|
|
50
|
+
position: absolute;
|
|
51
|
+
top: -19px;
|
|
52
|
+
left: 70px;
|
|
53
|
+
z-index: 2;
|
|
54
|
+
border-bottom-color: #fff;
|
|
55
|
+
}
|
|
57
56
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
57
|
+
.tb-btn-tooltip:after {
|
|
58
|
+
position: absolute;
|
|
59
|
+
top: -25px;
|
|
60
|
+
left: 67px;
|
|
61
|
+
z-index: 1;
|
|
62
|
+
border: 13px solid transparent;
|
|
63
|
+
border-bottom-color: rgba(0, 0, 0, 0.05);
|
|
64
|
+
}
|
|
66
65
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
66
|
+
.tb-btn {
|
|
67
|
+
text-decoration: none;
|
|
68
|
+
display: inline-block;
|
|
69
|
+
width: 150px;
|
|
70
|
+
padding: 10px 25px;
|
|
71
|
+
margin-top: 5px;
|
|
72
|
+
margin-bottom: 5px;
|
|
73
|
+
border-radius: 25px;
|
|
74
|
+
color: #fff !important;
|
|
75
|
+
font-size: 15px;
|
|
76
|
+
font-family: 'Open Sans', 'Droid Sans', Arial, sans-serif;
|
|
77
|
+
line-height: 17px;
|
|
78
|
+
transition: box-shadow 0.4s;
|
|
79
|
+
}
|
|
81
80
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
81
|
+
.tb-btn img {
|
|
82
|
+
width: 30px;
|
|
83
|
+
height: 30px;
|
|
84
|
+
display: inline-block;
|
|
85
|
+
margin: -10px 0px -10px -15px;
|
|
86
|
+
}
|
|
88
87
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
88
|
+
.tb-btn:hover {
|
|
89
|
+
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
|
|
90
|
+
}
|
|
92
91
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
.tb-btn:hover + .tb-btn-tooltip {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
visibility: visible;
|
|
95
|
+
}
|
|
97
96
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
97
|
+
.tb-btn.tb-vk {
|
|
98
|
+
background-color: #45668e;
|
|
99
|
+
}
|
|
100
|
+
.tb-btn.tb-tg {
|
|
101
|
+
background-color: #1E96C8;
|
|
102
|
+
}
|
|
103
|
+
.tb-btn.tb-facebook {
|
|
104
|
+
background-color: #3b5998;
|
|
105
|
+
}
|
|
106
|
+
.tb-btn.tb-viber {
|
|
107
|
+
background-color: #59267c;
|
|
108
|
+
}
|
|
109
|
+
.tb-btn.tb-whatsapp {
|
|
110
|
+
background-color: #189d0e;
|
|
111
|
+
}
|
|
112
|
+
.tb-btn.tb-whatsappb {
|
|
113
|
+
background-color: #189d0e;
|
|
114
|
+
}
|
|
116
115
|
</style>
|
|
117
116
|
|
|
118
117
|
<!-- <link rel="stylesheet" href="/views/tilda.css"> -->
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
<tb-notification-widget
|
|
122
|
-
widget-id="7c235bba-dd4e-9185-97e1-018f834cdc4f"
|
|
123
|
-
api-path="https://api.textback.io/api"
|
|
124
|
-
>
|
|
125
|
-
</tb-notification-widget>
|
|
118
|
+
</head>
|
|
119
|
+
<body>
|
|
126
120
|
<div class="container-fluid">
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
121
|
+
<div class="row-fluid">
|
|
122
|
+
<div class="col-lg-12">
|
|
123
|
+
<!-- <h1>Buttons</h1>
|
|
130
124
|
<div>
|
|
131
125
|
<button type="button" id="sign_tg" class="btn btn-primary">Telegram</button>
|
|
132
126
|
<button type="button" id="sign_vk" class="btn btn-small btn-white">VKontakte</button>
|
|
@@ -139,180 +133,142 @@
|
|
|
139
133
|
<div>
|
|
140
134
|
<button type="button" id="sign_random" class="btn btn-lg btn-white"><i class="fa fa-refresh"></i> Subscribe to random messenger</button>
|
|
141
135
|
</div> -->
|
|
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
|
-
WhatsApp
|
|
199
|
-
</a>
|
|
200
|
-
<div class="tb-btn-tooltip">
|
|
201
|
-
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без
|
|
202
|
-
изменений
|
|
203
|
-
</div>
|
|
204
|
-
</div>
|
|
205
|
-
<div class="tb-btn-wrapper" id="tb-link">
|
|
206
|
-
<a href="#" id="sign_wab" class="tb-btn tb-whatsapp">
|
|
207
|
-
<img
|
|
208
|
-
src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsappb.svg"
|
|
209
|
-
alt=""
|
|
210
|
-
/>
|
|
211
|
-
WhatsApp
|
|
212
|
-
</a>
|
|
213
|
-
<div class="tb-btn-tooltip">
|
|
214
|
-
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без
|
|
215
|
-
изменений
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
</div>
|
|
136
|
+
<div class="tb-buttons">
|
|
137
|
+
<div class="tb-btn-wrapper" id="tb-link">
|
|
138
|
+
<a href="#" id="sign_tg" class="tb-btn tb-tg">
|
|
139
|
+
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_tg.svg" alt="">
|
|
140
|
+
Telegram
|
|
141
|
+
</a>
|
|
142
|
+
<div class="tb-btn-tooltip">
|
|
143
|
+
Нажмите "<strong>Start</strong>" в приложении Telegram
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="tb-btn-wrapper" id="tb-link">
|
|
147
|
+
<a href="#" id="sign_vk" class="tb-btn tb-vk">
|
|
148
|
+
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_vk.svg" alt="">
|
|
149
|
+
VK
|
|
150
|
+
</a>
|
|
151
|
+
<div class="tb-btn-tooltip">
|
|
152
|
+
Нажмите "<strong>Разрешить</strong>" во всплывающем окне
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="tb-btn-wrapper" id="tb-link">
|
|
156
|
+
<a href="#" id="sign_fb" class="tb-btn tb-facebook">
|
|
157
|
+
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_facebook.svg" alt="">
|
|
158
|
+
Facebook
|
|
159
|
+
</a>
|
|
160
|
+
<div class="tb-btn-tooltip">
|
|
161
|
+
Нажмите "<strong>Начать</strong>" в Facebook Messenger
|
|
162
|
+
</div>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="tb-btn-wrapper" id="tb-link">
|
|
165
|
+
<a href="#" id="sign_viber" class="tb-btn tb-viber">
|
|
166
|
+
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_viber.svg" alt="">
|
|
167
|
+
Viber
|
|
168
|
+
</a>
|
|
169
|
+
<div class="tb-btn-tooltip">
|
|
170
|
+
У вас должно быть установлено <strong>Viber Desktop приложение</strong>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="tb-btn-wrapper" id="tb-link">
|
|
174
|
+
<a href="#" id="sign_wa" class="tb-btn tb-whatsapp">
|
|
175
|
+
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsapp.svg" alt="">
|
|
176
|
+
WhatsApp
|
|
177
|
+
</a>
|
|
178
|
+
<div class="tb-btn-tooltip">
|
|
179
|
+
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="tb-btn-wrapper" id="tb-link">
|
|
183
|
+
<a href="#" id="sign_wab" class="tb-btn tb-whatsapp">
|
|
184
|
+
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsappb.svg" alt="">
|
|
185
|
+
WhatsApp
|
|
186
|
+
</a>
|
|
187
|
+
<div class="tb-btn-tooltip">
|
|
188
|
+
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
219
192
|
|
|
220
|
-
|
|
193
|
+
<!-- <script src="https://zapier.com/zapbook/embed/widget.js?services=TextBack&container=true&limit=10"></script> -->
|
|
194
|
+
</div>
|
|
221
195
|
</div>
|
|
222
|
-
</div>
|
|
223
196
|
</div>
|
|
224
197
|
|
|
225
198
|
<script>
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
199
|
+
var TextBack = {
|
|
200
|
+
someProp: 123,
|
|
201
|
+
};
|
|
229
202
|
</script>
|
|
230
203
|
|
|
231
|
-
|
|
232
|
-
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
<script src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/build/sdk.js"></script>
|
|
207
|
+
<!-- <script src="/build/sdk.js"></script> -->
|
|
233
208
|
|
|
234
209
|
<script type="text/javascript">
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
210
|
+
var config = {
|
|
211
|
+
widgetId: 'a74bf35b-bbef-482d-b4aa-0c6795021806',
|
|
212
|
+
apiPath: 'https://tb-apisrv-dev.textback.io/api',
|
|
213
|
+
};
|
|
239
214
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
215
|
+
var off = TextBack.SDK.on('widget.init', function(event) {
|
|
216
|
+
console.log(`First widget has been initialized. ${event.widgetId}`);
|
|
217
|
+
off();
|
|
218
|
+
});
|
|
244
219
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
220
|
+
TextBack.SDK.on('subscription.start', function(event) {
|
|
221
|
+
console.log('subscription.start', event);
|
|
222
|
+
});
|
|
248
223
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
.addEventListener("click", function (event) {
|
|
255
|
-
event.preventDefault();
|
|
256
|
-
widget.subscribe("fb");
|
|
224
|
+
TextBack.SDK.initWidget(config).then( function(widget) {
|
|
225
|
+
// Facebook
|
|
226
|
+
document.getElementById('sign_fb').addEventListener('click', function(event) {
|
|
227
|
+
event.preventDefault();
|
|
228
|
+
widget.subscribe('fb');
|
|
257
229
|
});
|
|
258
230
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
event.preventDefault();
|
|
264
|
-
widget.subscribe("tg");
|
|
231
|
+
// Telegram
|
|
232
|
+
document.getElementById('sign_tg').addEventListener('click', function(event) {
|
|
233
|
+
event.preventDefault();
|
|
234
|
+
widget.subscribe('tg');
|
|
265
235
|
});
|
|
266
236
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
event.preventDefault();
|
|
272
|
-
widget.subscribe("vk");
|
|
237
|
+
// VKontakte
|
|
238
|
+
document.getElementById('sign_vk').addEventListener('click', function(event) {
|
|
239
|
+
event.preventDefault();
|
|
240
|
+
widget.subscribe('vk');
|
|
273
241
|
});
|
|
274
242
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
event.preventDefault();
|
|
280
|
-
widget.subscribe("viber");
|
|
243
|
+
// Viber
|
|
244
|
+
document.getElementById('sign_viber').addEventListener('click', function(event) {
|
|
245
|
+
event.preventDefault();
|
|
246
|
+
widget.subscribe('viber');
|
|
281
247
|
});
|
|
282
248
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
event.preventDefault();
|
|
288
|
-
widget.subscribe("whatsapp");
|
|
249
|
+
// WhatsApp
|
|
250
|
+
document.getElementById('sign_wa').addEventListener('click', function(event) {
|
|
251
|
+
event.preventDefault();
|
|
252
|
+
widget.subscribe('whatsapp');
|
|
289
253
|
});
|
|
290
254
|
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
event.preventDefault();
|
|
296
|
-
widget.subscribe("whatsappb");
|
|
255
|
+
// WhatsApp Business
|
|
256
|
+
document.getElementById('sign_wab').addEventListener('click', function(event) {
|
|
257
|
+
event.preventDefault();
|
|
258
|
+
widget.subscribe('whatsappb');
|
|
297
259
|
});
|
|
298
|
-
},
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
}
|
|
302
|
-
);
|
|
260
|
+
}, function(err) {
|
|
261
|
+
console.log('error', err)
|
|
262
|
+
});
|
|
303
263
|
|
|
304
|
-
|
|
305
|
-
// Random
|
|
306
|
-
document
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
);
|
|
313
|
-
widget.subscribe(channels[channelIndexToSubscribe].channel);
|
|
314
|
-
});
|
|
315
|
-
});
|
|
264
|
+
// TextBack.SDK.getWidget(config.widgetId).then(function(widget){
|
|
265
|
+
// // Random
|
|
266
|
+
// document.getElementById('sign_random').addEventListener('click', function(event) {
|
|
267
|
+
// var channels = widget.getEnabledChannels();
|
|
268
|
+
// var channelIndexToSubscribe = Math.floor(Math.random() * channels.length);
|
|
269
|
+
// widget.subscribe(channels[channelIndexToSubscribe].channel);
|
|
270
|
+
// });
|
|
271
|
+
// });
|
|
316
272
|
</script>
|
|
317
|
-
|
|
273
|
+
</body>
|
|
318
274
|
</html>
|
package/webpack.dev.js
CHANGED
|
@@ -2,9 +2,8 @@ const merge = require('webpack-merge');
|
|
|
2
2
|
const common = require('./webpack.common.js');
|
|
3
3
|
|
|
4
4
|
module.exports = merge(common, {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
watch: true,
|
|
5
|
+
devtool: 'eval-source-map',
|
|
6
|
+
watch: true,
|
|
8
7
|
/*devServer: {
|
|
9
8
|
contentBase: './build',
|
|
10
9
|
port: 8081,
|