SMARTWIDGETS HELP CENTER

Мини-бейдж с отзывами

CSS-кастомизация виджета «Отзывы Все в Одном», который максимально адаптирован под мобильную версию.
Превратите обычный бейдж с виджетом «Отзывов Все в Одном» в мини-бейдж, максимально адаптированный под компьютерную версию и мобильную версию можно с помощью CSS-кастомизации.
Для начала вам нужно изменить макет виджета на бейдж, зайдите в редактор виджета и измените макет на бейдж.
Вам понадобится ID виджета, найдите его в списке виджетов

CSS-кастомизация для мини-бейджа

Дальше вам нужно вставить к себе на сайт CSS-кастомизацию перед кодом самого виджета. CSS-кастомизация – это HTML код с настройками CSS стилей.

<style>
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-review-item-stars {scale: 0.7!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-app-head {margin: 0px!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-reviews-source {display: none!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-reviews-rating {display:none!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-app-head {font-size: 15px!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b > div > div.sw-review-box.sw-review-unselectable {width: 150px!important; padding: 5px!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-app-body {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    position: fixed!important;
    left: -77px!important;
    bottom: 45%!important;
}
@media only screen and (max-width:480px) {
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-app-head {font-size: 13px!important;font-weight: 400!important;}
.sw-app .sw-review-truncate-text {width: 100%; font-size: 17px!important;}
#sw-app-a3c90bfa77f32c37a966da098215d48b .sw-app-body {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    position: fixed!important;
    left: -77px!important;
    bottom: 10%!important;
}
}
</style>
<script src="https://res.smartwidgets.ru/app.js" defer></script>
<div class="sw-app" data-app="a3c90bfa77f32c37a966da098215d48b"></div>
Замените в коде все значения нашего ID виджета на свой ID. Для этого замените все значения a3c90bfa77f32c37a966da098215d48b на свой ID.

Появление виджета при скролле страницы

Чтобы мини-бейдж плавно появлялся при скролле страницы, добавьте код

<style>
.sw-app-scroll {display: none;}
.hide {display: block; opacity: 0; animation: ani2 0.5s forwards; z-index: 99999; position: relative;}
.show {display: block; opacity: 1; animation: ani 0.5s forwards; z-index: 99999; position: relative;}
@keyframes ani {0% {opacity: 0;} 100% {opacity: 1;}} 
@keyframes ani2 {0% {opacity: 1;} 100% {opacity: 0;}} 
</style>

<script>
    function checkScroll() {
        var reviewstab = document.querySelector('.sw-app-scroll');
        if (window.scrollY >= 500) {
            reviewstab.classList.add('show');
            reviewstab.classList.remove('hide');
        } else {
            reviewstab.classList.remove('show');
            reviewstab.classList.add('hide');
        }
    }
    window.addEventListener('scroll', checkScroll);
    checkScroll();
</script>
и в наш основной код виджета, в div добавьте класс sw-app-scroll

<div class="sw-app sw-app-scroll" data-app="a3c90bfa77f32c37a966da098215d48b"></div>

Пример мини-бейджа

Понравилась ли вам эта статья?