Новинка! Автоворонка для вебинара в WhatsApp Business API
Close
Новинка! Автоворонка для вебинара в WhatsApp Business API
Close

Инструкция по установки таймера для вебинара

Как установить таймер для вебинаров

1 Создаём ZeroBlock и добавляем элемент AddHTML

2 Прописываем в AddHTML HTML-код

3 Создаём блок T123 и добавляем скрипт и стили

Создаём ZeroBlock и добавляем элемент AddHTML

Прописываем в AddHTML HTML-код

            
                <div class="wrap_webinar">
                <div id="text_block"> </div>
                <div id="timer_wrap">
                        <p class="titl_timer">Регистрация закончится через:</p>
                        <div id="clock">
                                <div id="hour">
                                        <p id="hour0"></p>
                                        <p id="hour1"></p>
                                        <span>часов</span>
                                </div>
                                <div id="razd">: </div>
                                <div id="min">
                                        <p id="min0"></p>
                                        <p id="min1"></p>
                                        <span>минут</span>
                                    </div>
                                 <div id="razd">: </div>
                                     <div id="sec">
                                            <p id="sec0"></p>
                                             <p id="sec1"></p>
                                             <span>секунд</span>
                                    </div>
                           </div> 
                    </div>
            </div>
            
        

Создаём блок T123

Добавляем скрипт и стили в этот блок

            
                <style>
                .wrap_webinar{background:#000;width:100%;height:100%;text-align:center;font-family:'Montserrat',Arial,sans-serif;display:flex;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;align-items:center-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;ustify-content:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center}#text_block{font-size:29px;font-family:'Montserrat',Arial,sans-serif;line-height:1.55;color:#fff;font-weight:400;margin-bottom:20px}#timer_wrap #info_block{color:#ffffff;font-size:12px;margin-top:10px;line-height:1.5;font-weight:400;text-align:center} #timer_wrap #hour,#min,#sec,#day{padding:5px;position:relative;display:inline-block;float:left}div#clock{margin:0 auto;width:186px}div#hour span,div#min span,div#sec span{font-family:arial;display:block;font-size:12px;color:#fff;font-weight:normal}#timer_wrap p {margin:0;padding:0; font-family:'Montserrat',Arial,sans-serif; color:#f1f1f1;font-size:30px; display:inline-block; font-weight:bold}#sec1,#min1,#hour1,#day1{margin-left:24px}#timer_wrap #razd{float:left;color:#f1f1f1;display:inline-block;font-weight:bold;font-size:30px;margin:0 3px}#timer_wrap #stop{color:white;font-size:2em;margin:15px 10px 10px 25px}#timer_wrap p.titl_timer{font-size:29px;text-align:center;height:auto;width:auto!important;font-family:'Montserrat',Arial,sans-serif;font-weight:bold;color:red;display:block;float:none!important;position:relative!important}@media only screen and (max-width: 500px) {#text_block{font-size:20px; }#timer_wrap p.titl_timer{font-size:20px;}}
                </style>
            
        

В переменных time1, time2, time3 необходимо указать время начала трансляции Вебинара.

Если вебинар будет проводиться 2 раза в день, то time3 необходимо удалить и объявить только time1, time2.


<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script>
var time1 = "12:00"; // укажите время первого вебинара в формате NN:NN
var time2 = "14:00";// укажите время второго вебинара в формате NN:NN
var time3 = "17:00";// укажите время третьего вебинара в формате NN:NN


!function(){"use strict";var r,s,u,f,c,d,Y,l,D;if("undefined"!=typeof moment)r=moment;else{if("undefined"==typeof require)throw new Error("Moment is not defined.");r=require("moment")}function M(r,e,n){return e[r]||n[r]||s.normalizeUnits(r)}function p(r,e,n,t){var i,m;if(t||(n=n.replace(/(\\?\W)/g,"(?:$1)?")),i=n.match(d),n=n.replace(d,"($1+|[+-]?\\d+)"),m=e.match(new RegExp("^"+n+"$"))){for(var o=0;o<i.length;o++){var a,s,u,f=i[o][0];(u=m[o+1].match(/([+-]?)(\d+)/))&&("+"===u[1]?r.add(u[2],M(f,l,Y)):"-"===u[1]?r.subtract(u[2],M(f,l,Y)):(s="M"===(a=M(f,D,Y))?u[2]-1:u[2],r.set(a,s)))}return r}return null}u=function(r){return"[object Array]"===Object.prototype.toString.call(r)},f=function(r){return r.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")},c=["YYYY-MM-DD HH:mm:ss.SSS","YYYY-MM-DD HH:mm:ss","YYYY-MM-DD","HH:mm:ss.SSS","HH:mm:ss"],d=/([A-Za-z])\1*/g,Y={y:"y",Y:"y",Q:"Q",M:"M",w:"w",W:"w",m:"m",s:"s",S:"ms"},l={d:"d",D:"d"},D={d:"D",D:"D"},(s=r).fn.transform=function(r,e,n){var t,i=e||c,m=n||!1;u(i)||(i=[i]);for(var o=0;o<i.length;o++){t=f(i[o]);var a=p(this,r,t,m);if(a)return a}return s.invalid()}}();


$(document).ready(function(){function m(e,t){e.html(t).css({marginTop:"-20px",opacity:"0"}).animate({marginTop:"0px",opacity:"1"})}var e,t,r,a=moment(),o=a.tz("Europe/Moscow").format("x"),n=a.tz("Europe/Moscow"),s=o;a.tz("Europe/Moscow").format();"undefined"!=typeof time1&&(time11=Number.parseInt(time1),--time11,e=n.transform(String(time11)+":00:00.000").tz("Europe/Moscow").format("x")),"undefined"!=typeof time2&&(time22=Number.parseInt(time2),--time22,t=n.transform(String(time22)+":00:00.000").tz("Europe/Moscow").format("x")),"undefined"!=typeof time3&&(time33=Number.parseInt(time3),--time33,r=n.transform(String(time33)+":00:00.000").tz("Europe/Moscow").format("x"));var i,p,c,u,b,d=n.transform("23:59:00.000").tz("Europe/Moscow").format("x"),f=moment().tz("Europe/Moscow").format("M"),I=moment().tz("Europe/Moscow").format("D"),h=(moment().tz("Europe/Moscow").add(24,"hours").format("LLLL"),moment().tz("Europe/Moscow").add(24,"hours").format("D")),M=(moment().tz("Europe/Moscow").add(24,"hours").format("MMMM"),"");switch(Number(f)){case 1:M="января";break;case 2:M="февраля";break;case 3:M="марта";break;case 4:M="апреля";break;case 5:M="мая";break;case 6:M="июня";break;case 7:M="июля";break;case 8:M="августа";break;case 9:M="сентября";break;case 10:M="октября";break;case 11:M="ноября";break;case 12:M="декабря"}s<d&&s<t&&s!=e&&s<e?($("#text_block").html("Ближайший вебинар состоится:<br><b>"+I+" "+M+" в "+time1+" по МСК</b>"),i=e-s,p=parseInt(i/=1e3)%60,c=parseInt(i/=60)%60,u=parseInt(i/=60)%24,parseInt(i/=24),b=returnEndDate(u,c,p)):e <=s&&s <t&&s!=t?(i=t-s,p=parseInt(i/=1e3)%60,c=parseInt(i/=60)%60,u=parseInt(i/=60)%24,parseInt(i/=24),b=returnEndDate(u,c,p),$("#text_block").html("Ближайший вебинар состоится: <br> <b>"+I+" "+M+" в "+time2+" по МСК </b>")):e <=s&&t <=s&&s <r&&s!=r?(i=r-s,p=parseInt(i/=1e3)%60,c=parseInt(i/=60)%60,u=parseInt(i/=60)%24,parseInt(i/=24),b=returnEndDate(u,c,p),$("#text_block").html("Ближайший вебинар состоится:<br><b>"+I+" "+M+" в "+time3+" по МСК</b>")):($("#text_block").html("Ближайший вебинар состоится:<br><b>"+h+" "+M+" в "+time1+" по МСК</b>"),i=396e5+(d-s),p=parseInt(i/=1e3)%60,c=parseInt(i/=60)%60,u=parseInt(i/=60)%24,parseInt(i/=24),b=returnEndDate(u,c,p)),function e(){var t=new Date(b)-new Date,r=parseInt(t/864e5);r<10&&(r="0"+r),r=r.toString();var a=parseInt(t/36e5)%24;a<10&&(a="0"+a),a=a.toString();var o=parseInt(t/6e4)%60;o<10&&(o="0"+o),o=o.toString();var n=parseInt(t/1e3)%60;n<10&&(n="0"+n),n=n.toString(),9==r[1]&&2==a[0]&&3==a[1]&&5==o[0]&&9==o[1]&&5==n[0]&&9==n[1]?m($("#day0"),r[0]):$("#day0").html(r[0]),2==a[0]&&3==a[1]&&5==o[0]&&9==o[1]&&5==n[0]&&9==n[1]?m($("#day1"),r[1]):$("#day1").html(r[1]),3==a[1]&&5==o[0]&&9==o[1]&&5==n[0]&&9==n[1]?m($("#hour0"),a[0]):$("#hour0").html(a[0]),5==o[0]&&9==o[1]&&5==n[0]&&9==n[1]?m($("#hour1"),a[1]):$("#hour1").html(a[1]),9==o[1]&&5==n[0]&&9==n[1]?m($("#min0"),o[0]):$("#min0").html(o[0]),5==n[0]&&9==n[1]?m($(" #min1"),o[1]):$("#min1").html(o[1]),9==n[1]?m($("#sec0"),n[0]):$("#sec0").html(n[0]),m($("#sec1"),n[1]),setTimeout(e,1e3)}()});var myDate=new Date;function returnEndDate(e,t,r){return myDate.setHours(myDate.getHours()+e),myDate.setMinutes(myDate.getMinutes()+t),myDate.setSeconds(myDate.getSeconds()+r),myDate}
</script>