Видео виджет для сайта на uKit
Новый формат для взаимодействия со своей аудиторией. Видео виджет оказывает сильное эмоциональное воздействие. Показывайте видео отзывы или видео анонсы и улучшайте конверсии.
Мы заметили очень большую популярность видео виджета от сервиса GetReview, это что-то похожее на Instagram историю, которую вы размещаете на сайте, но самое интересное обслуживание такого виджета там стоит от 1000 руб. в месяц, что как минимум странно. Так как за такую цену, получаете очень скудный функционал.
И мы решили предоставить вам бесплатную версию этого функционала при помощи кода. Предварительно адаптировав этот код для uKit
Установка
1. Установка стилей. Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
<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>
Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот). И не забудьте сохранить код
2. Установка каркаса и скрипта. Там же в раздел «Свой код». В редактор вставьте следующий код:
<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="АДРЕС ВАШЕГО ВИДЕО">
<source src="АДРЕС ВАШЕГО ВИДЕО" type="video/mp4">
</video>
<div class="video-widget__close"></div>
<a class="video-widget__button" href="ВАША ССЫЛКА НА ФОРМУ">Оставить заявку</a>
</div>
</div>
<script >
function ready() {
require(['jquery'], function($) {
$(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)
})
});
});
}
document.addEventListener("DOMContentLoaded", ready);
</script>
Внутри этого кода, вам нужно установить ссылку на ваше видео, и ссылку на вашу форму обратной связи или сразу на Whats'app.
2.1. Устанавливаем ссылку на вашу форму. Внутри кода есть текст ВАША ССЫЛКА НА ФОРМУ, там вам нужно указать ссылку на страницу где находится форма, например как это сделано в нашем примере: https://video-vidzhet.ukit.me/, там указана ссылка на страницу: https://video-vidzhet.ukit.me/form и примерно так у вас должно выглядеть в коде:
Помимо этого, вы может указать ссылку на ваш Whats'app, пример ссылки: https://wa.me/78001234567
2.2. Устанавливаем ваше видео. В коде есть два поля где нужно установить прямую ссылку на ваше видео, пример прямой ссылки на видео: https://ukit.top/video-vidzhet.mp4. Такую ссылку вам нужно заменить вместо текста: АДРЕС ВАШЕГО ВИДЕО. То есть строчки вашего кода должны выглядеть так:
<source src="https://ukit.top/video-vidzhet.mp4" type="video/mp4"></video>
Получить такую прямую ссылку на видео, вы можете при помощи разных сервисов, напримере, мы сделаем это при помощи DropBox:
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
Готово, эту ссылку размещаем в наш код
Пример, как это должно выглядеть: https://ukit.top/screen/77.png
После установки видео и вашей ссылки, во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Теперь все готово. Сохраните код и опубликуйте ваш сайт.
Источник: https://webplus.kz/wigetvideorus
| Всего комментариев: 9 | |
|
| |
0
