Произошла ошибка...
Для генерации кода необходимо внести данные во все обязательные поля.
Код успешно скопирован!
Как вставить код в Taptop?
Откройте настройки страницы в Taptop
В блоке «Перед тегом body» вставьте сгенерированный код
Опубликуйте страницу
Проверьте работу расширения на опубликованном сайте
Расширение не работает? Прочтите раздел «Решение возможных проблем» в документации, перепроверьте все шаги инструкции или обратитесь в поддержку.
Показ блоков по времени
Расширение позволяет автоматически показывать или скрывать блоки на сайте в зависимости от времени суток, дня недели, даты и часового пояса пользователя. Вы можете легко управлять контентом: задавать расписание отображения баннеров, таймеров, pop-up окон и других элементов. Расширение особенно полезно для временных акций, утренних и вечерних предложений, или если ваш сайт ориентирован на пользователей из разных стран.
Pixel Perfect
Автор
Бесплатно
Цена
10 мая 2025
Обновлено
Для подключения расширения необходим компьютер
Вы просматриваете страницу с мобильного устройства. Чтобы подключить расширение к Taptop, пожалуйста, откройте эту страницу на компьютере и следуйте инструкции.
Как работает расширение
Расширение позволяет гибко управлять видимостью любых блоков на сайте в зависимости от:
Времени суток (с точностью до секунд)
Дней недели
Календарных дат
Часовых поясов посетителей
Как работать с инструкцией
Для настройки расширения вам нужно:
На платформе Taptop — подготовить блоки, присвоив им нужные CSS-классы, а также вставить полученный код в настройках страницы.
В генераторе кода (в правой части страницы) — настроить параметры показа блоков и сгенерировать код.
Установка расширения на сайт
Шаг 1: Подготовьте блоки на странице
В редакторе Taptop выберите блок, который хотите отображать по расписанию.
Присвойте ему уникальный CSS-класс (например,
promo-bannerилиsale-popup).
💡 Чтобы присвоить класс элементу:
Выберите элемент, а затем на панели стилей в поле Источники стилей введите нужное название класса и нажмите Enter.
Введите название класса
Класс будет присвоен элементу и отобразится в поле Источники стилей.
Класс присвоен элементу
Шаг 2: Настройте параметры в генераторе и сгенерируйте код
Перейдите к генератору (в правой части страницы с данной инструкцией).
Укажите CSS-классы блоков, к которым будет применяться правило. Запишите их через запятую, без точки в начале.
Настройте время начала и окончания показа с точностью до секунд.
Выберите подходящий часовой пояс из списка.
Отметьте дни недели, в которые нужно показывать блоки. Если не выбран ни один день, блок будет показываться ежедневно.
При необходимости включите автоматическое скрытие после определенной даты и времени.
Если нужно создать дополнительное правило с другими настройками — нажмите "Добавить новое правило".
Нажмите кнопку “Сгенерировать код”. Код будет автоматически скопирован в буфер обмена, и вы увидите уведомление.
Шаг 3: Вставьте код на сайт
Перейдите в Taptop и откройте настройки страницы: на вкладке Страницы нажмите иконку шестеренки рядом с названием нужной страницы.
В блоке "Перед тегом <body>" вставьте сгенерированный код.
Сохраните изменения на странице и опубликуйте ее (Ctrl+Shift+S).
Примеры использования расширения
Пример 1: Утренняя и вечерняя акции
Вы хотите показывать разные баннеры утром и вечером в будние дни.
Правило 1:
CSS-классы блоков:
morning-offerВремя показа: с 07:00:00 до 12:00:00
Дни недели: Понедельник, Вторник, Среда, Четверг, Пятница
Правило 2:
CSS-классы блоков:
evening-offerВремя показа: с 18:00:00 до 23:00:00
Дни недели: Понедельник, Вторник, Среда, Четверг, Пятница
Таким образом, утренний баннер будет показываться с 7:00 до 12:00, а вечерний — с 18:00 до 23:00 только по будням.
Пример 2: Новогодняя акция с обратным отсчетом
Вы хотите показывать новогоднюю акцию до определенного момента, а затем скрыть ее.
CSS-классы блоков:
new-year-promo, countdown-timerСкрытие по дате: Включено
Дата скрытия: 01-01-2026
Время скрытия: 00:00:00
С наступлением Нового года акция и таймер обратного отсчета автоматически исчезнут.
Пример 3: Международный сайт с разными часовыми поясами
У вас сайт с международной аудиторией, и вы хотите показывать разные предложения для нескольких регионов в рабочее время.
Правило 1 (для Европы):
CSS-классы блоков:
europe-offerВремя показа: с 09:00:00 до 18:00:00
Часовой пояс: UTC+1 (Берлин, Париж)
Дни недели: ****Понедельник - Пятница
Правило 2 (для США):
CSS-классы блоков:
usa-offerВремя показа: с 09:00:00 до 18:00:00
Часовой пояс: UTC-5 (Восточное время)
Дни недели: Понедельник - Пятница
Каждый посетитель увидит релевантное предложение в рабочее время своего региона.
💡 Точное время на странице определяется браузером посетителя, поэтому убедитесь, что используете правильный часовой пояс для вашей целевой аудитории.
<time-visibility-generator></time-visibility-generator>
