@textback/notification-widget
Version:
TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.
275 lines (244 loc) • 10.2 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SDK Test</title>
<style>
button {
margin-right: 10px;
}
.tb-buttons,
.tb-btn-wrapper,
.tb-btn {
box-sizing: border-box;
text-align: center;
}
.tb-btn-wrapper {
position: relative;
display: inline-block;
}
.tb-btn-tooltip {
position: absolute;
opacity: 0;
visibility: hidden;
background-color: rgba(255, 255, 255, 0.9);
padding: 5px 7px;
border-radius: 3px;
color: #6f7b8a;
font-size: 10px;
z-index: 10;
top: 52px;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
transition: opacity 0.4s;
}
.tb-btn-tooltip:before, .tb-btn-tooltip:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
}
.tb-btn-tooltip:before {
position: absolute;
top: -19px;
left: 70px;
z-index: 2;
border-bottom-color: #fff;
}
.tb-btn-tooltip:after {
position: absolute;
top: -25px;
left: 67px;
z-index: 1;
border: 13px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.05);
}
.tb-btn {
text-decoration: none;
display: inline-block;
width: 150px;
padding: 10px 25px;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 25px;
color: #fff ;
font-size: 15px;
font-family: 'Open Sans', 'Droid Sans', Arial, sans-serif;
line-height: 17px;
transition: box-shadow 0.4s;
}
.tb-btn img {
width: 30px;
height: 30px;
display: inline-block;
margin: -10px 0px -10px -15px;
}
.tb-btn:hover {
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
}
.tb-btn:hover + .tb-btn-tooltip {
opacity: 1;
visibility: visible;
}
.tb-btn.tb-vk {
background-color: #45668e;
}
.tb-btn.tb-tg {
background-color: #1E96C8;
}
.tb-btn.tb-facebook {
background-color: #3b5998;
}
.tb-btn.tb-viber {
background-color: #59267c;
}
.tb-btn.tb-whatsapp {
background-color: #189d0e;
}
.tb-btn.tb-whatsappb {
background-color: #189d0e;
}
</style>
<!-- <link rel="stylesheet" href="/views/tilda.css"> -->
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12">
<!-- <h1>Buttons</h1>
<div>
<button type="button" id="sign_tg" class="btn btn-primary">Telegram</button>
<button type="button" id="sign_vk" class="btn btn-small btn-white">VKontakte</button>
<button type="button" id="sign_fb">Facebook</button>
<button type="button" id="sign_viber">Viber</button>
<button type="button" id="sign_wa" class="btn btn-success">WhatsApp</button>
</div>
<h1>Random</h1>
<div>
<button type="button" id="sign_random" class="btn btn-lg btn-white"><i class="fa fa-refresh"></i> Subscribe to random messenger</button>
</div> -->
<div class="tb-buttons">
<div class="tb-btn-wrapper" id="tb-link">
<a href="#" id="sign_tg" class="tb-btn tb-tg">
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_tg.svg" alt="">
Telegram
</a>
<div class="tb-btn-tooltip">
Нажмите "<strong>Start</strong>" в приложении Telegram
</div>
</div>
<div class="tb-btn-wrapper" id="tb-link">
<a href="#" id="sign_vk" class="tb-btn tb-vk">
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_vk.svg" alt="">
VK
</a>
<div class="tb-btn-tooltip">
Нажмите "<strong>Разрешить</strong>" во всплывающем окне
</div>
</div>
<div class="tb-btn-wrapper" id="tb-link">
<a href="#" id="sign_fb" class="tb-btn tb-facebook">
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_facebook.svg" alt="">
Facebook
</a>
<div class="tb-btn-tooltip">
Нажмите "<strong>Начать</strong>" в Facebook Messenger
</div>
</div>
<div class="tb-btn-wrapper" id="tb-link">
<a href="#" id="sign_viber" class="tb-btn tb-viber">
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_viber.svg" alt="">
Viber
</a>
<div class="tb-btn-tooltip">
У вас должно быть установлено <strong>Viber Desktop приложение</strong>
</div>
</div>
<div class="tb-btn-wrapper" id="tb-link">
<a href="#" id="sign_wa" class="tb-btn tb-whatsapp">
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsapp.svg" alt="">
WhatsApp
</a>
<div class="tb-btn-tooltip">
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
</div>
</div>
<div class="tb-btn-wrapper" id="tb-link">
<a href="#" id="sign_wab" class="tb-btn tb-whatsapp">
<img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsappb.svg" alt="">
WhatsApp
</a>
<div class="tb-btn-tooltip">
Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
</div>
</div>
</div>
<!-- <script src="https://zapier.com/zapbook/embed/widget.js?services=TextBack&container=true&limit=10"></script> -->
</div>
</div>
</div>
<script>
var TextBack = {
someProp: 123,
};
</script>
<script src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/build/sdk.js"></script>
<!-- <script src="/build/sdk.js"></script> -->
<script type="text/javascript">
var config = {
widgetId: 'a74bf35b-bbef-482d-b4aa-0c6795021806',
apiPath: 'https://tb-apisrv-dev.textback.io/api',
};
var off = TextBack.SDK.on('widget.init', function(event) {
console.log(`First widget has been initialized. ${event.widgetId}`);
off();
});
TextBack.SDK.on('subscription.start', function(event) {
console.log('subscription.start', event);
});
TextBack.SDK.initWidget(config).then( function(widget) {
// Facebook
document.getElementById('sign_fb').addEventListener('click', function(event) {
event.preventDefault();
widget.subscribe('fb');
});
// Telegram
document.getElementById('sign_tg').addEventListener('click', function(event) {
event.preventDefault();
widget.subscribe('tg');
});
// VKontakte
document.getElementById('sign_vk').addEventListener('click', function(event) {
event.preventDefault();
widget.subscribe('vk');
});
// Viber
document.getElementById('sign_viber').addEventListener('click', function(event) {
event.preventDefault();
widget.subscribe('viber');
});
// WhatsApp
document.getElementById('sign_wa').addEventListener('click', function(event) {
event.preventDefault();
widget.subscribe('whatsapp');
});
// WhatsApp Business
document.getElementById('sign_wab').addEventListener('click', function(event) {
event.preventDefault();
widget.subscribe('whatsappb');
});
}, function(err) {
console.log('error', err)
});
// TextBack.SDK.getWidget(config.widgetId).then(function(widget){
// // Random
// document.getElementById('sign_random').addEventListener('click', function(event) {
// var channels = widget.getEnabledChannels();
// var channelIndexToSubscribe = Math.floor(Math.random() * channels.length);
// widget.subscribe(channels[channelIndexToSubscribe].channel);
// });
// });
</script>
</body>
</html>