Скрипты для uKit 22.07.2021 9 119
Видео виджет для сайта на uKit

Видео виджет для сайта на 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 и примерно так у вас должно выглядеть в коде:

<a class="video-widget__button" href="https://video-vidzhet.ukit.me/form">Оставить заявку</a>


Помимо этого, вы может указать ссылку на ваш Whats'app, пример ссылки: https://wa.me/78001234567

 

2.2. Устанавливаем ваше видео. В коде есть два поля где нужно установить прямую ссылку на ваше видео, пример прямой ссылки на видео: https://ukit.top/video-vidzhet.mp4. Такую ссылку вам нужно заменить вместо текста: АДРЕС ВАШЕГО ВИДЕО. То есть строчки вашего кода должны выглядеть так: 

<video id="video-widget__video" loop="" autoplay="" playsinline="" preload="auto" muted="muted" controlslist="nodownload" disablepictureinpicture="" class="video-widget__video" src="https://ukit.top/video-vidzhet.mp4">
<source src="https://ukit.top/video-vidzhet.mp4" type="video/mp4"></video>

 

Получить такую прямую ссылку на видео, вы можете при помощи разных сервисов, напримере, мы сделаем это при помощи 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

Готово, эту ссылку размещаем в наш код

 

Пример, как это должно выглядеть: https://ukit.top/screen/77.png

После установки видео и вашей ссылки, во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Теперь все готово. Сохраните код и опубликуйте ваш сайт.

 

Источник: https://webplus.kz/wigetvideorus

Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Минимальный» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 9
avatar
0
1
Ребят скидывайте, ваши сайты с этим виджетом, заценим что получилось wink
Чтобы хоть понять, что не зря стараемся!
avatar
2
У меня звука нет и при нажатии не увеличивается и не воспроизводится
avatar
0
3
Версию браузера, скажи пожалуйста
avatar
4
сафари
avatar
5
но я использую чисто код не для UKIT
avatar
0
8
Есть разница, код оптимизирован именно для uKit.
Внизу статьи есть ссылка на источник, попробуйте оттуда код взять
avatar
9
Был там)) Там под html, но всё равно не работает. Проблема со стилями( буду перебирать).
avatar
6
в html (я думаю разницы нет)?
avatar
7
У меня в итоге получается отображается в окошке, но при нажатии не увеличивается и не воспроизводится
avatar