Сайтта видео-виджет қалай жасаймыз?
Видео виджет сайттың конверсиясын арттыруға көмегін береді. Видеоға оффер мен call to action айту арқылы сайтқа келген клиенттерді заявқа қалдыруға немесе басқа конверсия алып келетін әрекетті жасауға итермелеуге болады. Примерді көру төмендегі кнопканы басыңыз
Бұл виджет түрін мен https://getreview.io/widge сайтынан көріп, қызығып қалай бұл виджетті тегін жасауға болатынын іздестірдім. (getreview.io сайтында бұл виджет ақылы, айына 5000 теңге төлеу қажет).
Көп іздеген табады демекші, бір сайттан дайын решения таптым, бірақ тильдаға
арналмаған. Соны тильдаға адаптация жасап сіздерге ұсынып отырмын.
PS: Сайттағы код менің ойлап тапқаным емес!
Көп іздеген табады демекші, бір сайттан дайын решения таптым, бірақ тильдаға
арналмаған. Соны тильдаға адаптация жасап сіздерге ұсынып отырмын.
PS: Сайттағы код менің ойлап тапқаным емес!
Ең бірінші бізге виджеттің қаңқасын құру қажет, ол үшін мына html кодты орнатамыз.
Инструкция:
- Жаңа блок қосу батырмасын басамыз
- Другое деген разделден HTML деген батырманы басамыз (Код Т123)
- Томендегі HTML кодты енгізіп, сохранить сосын опубликовать деген кнопкаларды басамыз
<div class="video-widget" data-state="default">
<div class="video-widget__container">
<video id="video-widget__video" loop="" autoplay="" playsinline="" preload="auto" muted="muted" controlslist="nodownload" disablepictureinpicture="" class="video-widget__video" src="путь/видеонын_аты.mp4">
<source src="путь/видеонын_аты.mp4" type="video/mp4">
</video>
<div class="video-widget__close"></div>
<a class="video-widget__button" href="#popup:stepform">Оставить заявку</a>
</div>
</div>Жоғарыдағы кодта төмендегідей кодтың бөлігі бар. Бұл жерге біз видеоның адресін қою керекпіз. Ол үшін біз видеоны дропбокс сайтына жүктеп сол видеоға тура ссылка алатын боламыз
src="путь/видеонын_аты.mp4"Dropbox-тан қалай тура ссылка аламыз?
1. https://dropbox.com сайтына тіркелеміз
2. *.mp4 форматындағы видеоны сайтқа жүктейміз
3. «Поделиться» немесе "Share" - кнопкасын басамыз, попап ашылады
4. Попаптын төменгі жағында «Создать ссылку» или "Create link" дегенді басамыз
5. «Копировать ссылку» или "Copy link" - деген шығады, сол кнопканы басамыз
Дайын!
Нәтижесінде мынадай ссылка шығуы қажет: https://www.dropbox.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0
1. Оны мынадайға өзгертеміз: www.dropbox.com дегенді dl.dropboxusercontent.com дегенге
2. Мынадай болуы керек: https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0
2. *.mp4 форматындағы видеоны сайтқа жүктейміз
3. «Поделиться» немесе "Share" - кнопкасын басамыз, попап ашылады
4. Попаптын төменгі жағында «Создать ссылку» или "Create link" дегенді басамыз
5. «Копировать ссылку» или "Copy link" - деген шығады, сол кнопканы басамыз
Дайын!
Нәтижесінде мынадай ссылка шығуы қажет: https://www.dropbox.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0
1. Оны мынадайға өзгертеміз: www.dropbox.com дегенді dl.dropboxusercontent.com дегенге
2. Мынадай болуы керек: https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0
Нәтижесінде мынадай код шығуы қажет, ссылканы екі жерде қойуды умытып кетпеңіз
<div class="video-widget" data-state="default">
<div class="video-widget__container">
<video id="video-widget__video" loop="" autoplay="" playsinline="" preload="auto" muted="muted" controlslist="nodownload" disablepictureinpicture="" class="video-widget__video" src="https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0">
<source src="https://dl.dropboxusercontent.com/s/je2dxosey0k0r5q/beeline-cover.mp4?dl=0" type="video/mp4">
</video>
<div class="video-widget__close"></div>
<a class="video-widget__button" href="#popup:stepform">Оставить заявку</a>
</div>
</div>Ал мына кусок код кнопкаға жауап береді, #popup:stepform деген кодтың орнына өзіңіздік попап окнонын кодын немесе https://wa.me/7XXXXXXXXXX деп ватсап номеріңізді қойсаңызда болады
<a class="video-widget__button" href="#popup:stepform">Оставить заявку</a>Виджетке түр беру үшін мына CSS кодты тағыда бір T123 HTML блогын қосып осы кодты толықтай көшіріп сақтаймыз
<style>
.video-widget{position:fixed;left:0;z-index:999999;bottom:0}.video-widget__container{font-family:Helvetica;z-index:999999;overflow:hidden;border-style:solid;background:#eee;-webkit-transition:width .3s ease-in-out 0s,height .3s ease-in-out 0s,bottom .3s ease-in-out 0s,border-color .2s ease-in-out 0s,opacity 1s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s;transition:width .3s ease-in-out 0s,height .3s ease-in-out 0s,bottom .3s ease-in-out 0s,border-color .2s ease-in-out 0s,opacity 1s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s;-o-transition:width .3s ease-in-out 0s,height .3s ease-in-out 0s,bottom .3s ease-in-out 0s,border-color .2s ease-in-out 0s,opacity 1s ease-in-out 0s,-o-transform .2s ease-in-out 0s;-moz-transition:transform .2s ease-in-out 0s,width .3s ease-in-out 0s,height .3s ease-in-out 0s,bottom .3s ease-in-out 0s,border-color .2s ease-in-out 0s,opacity 1s ease-in-out 0s,-moz-transform .2s ease-in-out 0s;transition:transform .2s ease-in-out 0s,width .3s ease-in-out 0s,height .3s ease-in-out 0s,bottom .3s ease-in-out 0s,border-color .2s ease-in-out 0s,opacity 1s ease-in-out 0s;transition:transform .2s ease-in-out 0s,width .3s ease-in-out 0s,height .3s ease-in-out 0s,bottom .3s ease-in-out 0s,border-color .2s ease-in-out 0s,opacity 1s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s,-moz-transform .2s ease-in-out 0s,-o-transform .2s ease-in-out 0s;outline:0;cursor:pointer;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-box-shadow:rgba(0,0,0,.2) 0 10px 20px;box-shadow:rgba(0,0,0,.2) 0 10px 20px;position:absolute;left:20px;bottom:50px;border-radius:20px;border-width:5px;width:130px;height:180px;border-color:#fff}.video-widget__container:hover{-webkit-transform:scale(1.05) translate(5px,-5px);-moz-transform:scale(1.05) translate(5px,-5px);-ms-transform:scale(1.05) translate(5px,-5px);-o-transform:scale(1.05) translate(5px,-5px);transform:scale(1.05) translate(5px,-5px);border-color:#131344}.video-widget__video{-o-object-fit:cover;object-fit:cover;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;height:100%;min-width:100%;min-height:100%;z-index:200;-webkit-transition:opacity .4s ease-in-out 0s;-o-transition:opacity .4s ease-in-out 0s;-moz-transition:opacity .4s ease-in-out 0s;transition:opacity .4s ease-in-out 0s;opacity:.9}.video-widget__close{position:absolute;top:6px;right:6px;width:20px;height:20px;z-index:250;opacity:0;-webkit-transition:opacity .2s ease-in-out 0s,-webkit-transform .3s ease-in-out 0s;transition:opacity .2s ease-in-out 0s,-webkit-transform .3s ease-in-out 0s;-o-transition:opacity .2s ease-in-out 0s,-o-transform .3s ease-in-out 0s;-moz-transition:transform .3s ease-in-out 0s,opacity .2s ease-in-out 0s,-moz-transform .3s ease-in-out 0s;transition:transform .3s ease-in-out 0s,opacity .2s ease-in-out 0s;transition:transform .3s ease-in-out 0s,opacity .2s ease-in-out 0s,-webkit-transform .3s ease-in-out 0s,-moz-transform .3s ease-in-out 0s,-o-transform .3s ease-in-out 0s}.video-widget__close:after,.video-widget__close:before{position:absolute;left:9px;top:1px;content:" ";height:18px;width:2px;background:#fff;-webkit-box-shadow:rgba(0,0,0,.5) 1px 1px 10px;box-shadow:rgba(0,0,0,.5) 1px 1px 10px}.video-widget__close:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.video-widget__close:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.video-widget__container:hover .video-widget__close{opacity:.5}.video-widget.video-widget[data-state=opened] .video-widget__container{width:280px;height:500px;border-radius:20px;border-color:#fff}.video-widget.video-widget[data-state=opened] .video-widget__close{opacity:.5}.video-widget.video-widget[data-state=opened] .video-widget__close:before{display:none}.video-widget.video-widget[data-state=opened] .video-widget__close:after{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.video-widget.video-widget[data-state=opened] .video-widget__close:hover{opacity:1}.video-widget__button{position:absolute;bottom:20px;right:20px;left:20px;height:65px;border-radius:10px;z-index:300;-webkit-box-shadow:rgba(0,0,0,.25) 0 4px 15px;box-shadow:rgba(0,0,0,.25) 0 4px 15px;text-align:center;-webkit-transition:opacity .3s ease-in-out 0s,background-color .2s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s;transition:opacity .3s ease-in-out 0s,background-color .2s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s;-o-transition:opacity .3s ease-in-out 0s,background-color .2s ease-in-out 0s,-o-transform .2s ease-in-out 0s;-moz-transition:transform .2s ease-in-out 0s,opacity .3s ease-in-out 0s,background-color .2s ease-in-out 0s,-moz-transform .2s ease-in-out 0s;transition:transform .2s ease-in-out 0s,opacity .3s ease-in-out 0s,background-color .2s ease-in-out 0s;transition:transform .2s ease-in-out 0s,opacity .3s ease-in-out 0s,background-color .2s ease-in-out 0s,-webkit-transform .2s ease-in-out 0s,-moz-transform .2s ease-in-out 0s,-o-transform .2s ease-in-out 0s;visibility:hidden;background-color:#fdd82a;font-size:14px;font-family:Helvetica;color:#000;text-align:center;vertical-align:middle;line-height:65px;text-transform:uppercase;opacity:0}.video-widget__button:hover{background-color:#ffe257;text-decoration:none}.video-widget.video-widget[data-state=opened] .video-widget__button{opacity:1;visibility:visible}@media only screen and (max-width:1023px){.video-widget__close{opacity:.5}}@media only screen and (max-width:479px){.video-widget__container{left:15px;bottom:15px;width:90px;height:125px}}
.video-widget__button {color: #000000 !important; text-decoration: none;}
</style>Виджет дұрыс жұмыс жасауы үшін Javascript кодты қосамыз, ештене өзгертпей-ак дәл осы кодты көшіріп жаңа T123 HTML блокқа қойып сохранить опубликовать басамыз
<script > $(document).ready(function() {
var e = $(".video-widget"),
a = document.getElementById("video-widget__video");
$(".video-widget__close").click(function(t) {
return t.preventDefault(), "default" == e.attr("data-state") ? e.hide() : (e.attr("data-state", "default"), a.muted = !0), !1
}), $(".video-widget__container").on("click", function(t) {
"default" == e.attr("data-state") ? (e.attr("data-state", "opened"), a.currentTime = 0, a.muted = !1) : (e.attr("data-state", "default"), a.muted = !0)
}), 1024 < $(document).width() && $(".video-widget__container").on("touchstart", function(t) {
"default" == e.attr("data-state") ? (e.attr("data-state", "opened"), a.currentTime = 0, a.muted = !1) : (e.attr("data-state", "default"), a.muted = !0)
}), $(document).mouseup(function(t) {
e.is(t.target) || 0 !== e.has(t.target).length || "default" == e.attr("data-state") || (e.attr("data-state", "default"), a.muted = !0)
})
});
</script>Туториал пайдалы болдыма?
Сізге ұнаса менің инстаграмыма тіркеліп тағы-да қосымша пайдалы ақпараттарды оқи аласыз
Менің инстаграмым
