Следуйте генератору всплывающих окон

Бесплатный генератор всплывающих окон и конструктор всплывающих окон для веб-сайтов. Создавайте точные для платформы всплывающие окна подписки/подписки, значки LIVE и панели подцелей (прозрачный PNG/SVG) или всплывающее окно подписки по электронной почте/намерения выхода с копированием и вставкой кода для встраивания. Без регистрации, работает локально.

Создан и поддерживается Shehzad Munir. ·

Следуйте генератору всплывающих окон
Loading Popup Studio
Share

Трансляция и наложение видео с точностью до платформы

Две студии в одной. Создавайте точные для платформы всплывающие окна подписки и подписки для Instagram, TikTok, YouTube, Twitch, X и Facebook, а также значки LIVE, панели целей подписчиков и баннеры достижений, а также экспортируйте их в прозрачный PNG или масштабируемый SVG для своих видео и потоков. Или переключитесь в режим всплывающего окна веб-сайта и создайте всплывающее окно подписки по электронной почте, информационного бюллетеня, скидки, намерения выйти, подписки в социальных сетях или объявления, а затем скопируйте чистый, автономный код для встраивания HTML/CSS/JS прямо на любой сайт. Все отображается локально в вашем браузере, ничего не загружается и не требуется регистрация.

Генератор всплывающих окон Follow создает графику с призывом к действию, которую используют повсюду создатели, и каждая из них нарисована так, чтобы соответствовать реальной платформе: карточка подписки в Instagram с градиентным кольцом истории, синей галочкой с подтверждением и точной синей кнопкой «Подписаться» в Instagram, красная кнопка «Подписаться» в TikTok, современная черная таблетка подписки на YouTube с колокольчиком, фиолетовая табличка «Подписаться» на Twitch с сердечком, а также карточки подписки X и Facebook. Добавьте счетчики подписчиков, анимированный красный значок LIVE со количеством зрителей, индикатор достижения цели подписчика и баннер достижения. Выберите пресет, введите имя, идентификатор и количество, и он мгновенно визуализируется в формате SVG, сохраняя высочайшую четкость при любом разрешении, а затем экспортируется в прозрачный PNG-файл, который загружается прямо в игровой процесс, на веб-камеру или в миниатюру.

Функции

  • Всплывающие окна с точностью до платформы: Instagram, TikTok, YouTube, Twitch, X и Facebook.
  • Счетчик каналов, подписка + колокольчик, значок LIVE и панель целей подписчика
  • Конструктор всплывающих окон веб-сайта: подписка по электронной почте, новостная рассылка, скидки, намерение выйти, подписка в социальных сетях и панель объявлений.
  • Скопируйте и вставьте код для встраивания HTML/CSS/JS — без библиотек, работает на WordPress, Shopify, Webflow или любой HTML-странице.
  • Центральный модальный макет, выдвижной макет, верхняя или нижняя панель с триггерами загрузки/задержки/прокрутки/намерения выхода.
  • Загрузите настоящую фотографию аватара, собственные метки для подписки, подтвержденный значок и кольцо истории.
  • Сплошной или градиентный фон, радиус угла, тень и экспорт 1×/2×/4×
  • Прозрачный PNG + масштабируемый экспорт SVG, все отображается локально

Как использовать Следуйте генератору всплывающих окон

  1. 1

    Выберите студию

    Выберите «Наложения социальных сетей и потоков» для графики PNG/SVG или «Всплывающее окно веб-сайта» для встраиваемого кода.

  2. 2

    Выберите пресет

    Наложения: Instagram, TikTok, YouTube, Twitch, X, Facebook, LIVE, подцель или достижение. Всплывающие окна: электронная почта, информационный бюллетень, скидка, намерение выхода, социальные сети или объявления.

  3. 3

    Настройте это

    Установите имя, дескриптор, количество, цвета, фон и переключатели или заголовок всплывающего окна, кнопку, макет и триггер.

  4. 4

    Экспортировать или встроить

    Загрузите прозрачный PNG/SVG или скопируйте код внедрения HTML/CSS/JS (или файл .html). Ничто не покидает ваш браузер.

Распространенные случаи использования

  • Наложение всплывающего окна подписки или подписки с учетом платформы на видео.
  • Добавьте к трансляции анимированный красный значок LIVE с указанием количества зрителей.
  • Показывать шкалу целей подписчиков во время прямой трансляции
  • Добавьте на свой сайт всплывающее окно подписки по электронной почте или новостную рассылку с помощью кода для встраивания.
  • Восстановите уходящих посетителей с помощью всплывающего окна со скидкой при намерении выйти
  • Разместите объявление или промо-панель вверху любой страницы.
  • Отпразднуйте важное событие с помощью баннера достижений

Подробное руководство

Настоящий конструктор всплывающих окон для веб-сайтов с копипастом кода

Переключитесь в режим всплывающего окна веб-сайта, и вы получите полноценный конструктор. Выберите подписку по электронной почте, информационный бюллетень, скидку/промоакцию, намерение выйти, подписку в социальных сетях или панель объявлений; выберите центральную модальную, выдвижную, верхнюю или нижнюю раскладку панели; установите заголовок, тело, кнопку, поле электронной почты, цвета, радиус угла и яркость наложения; и выберите, когда он сработает — при загрузке, после задержки, при прокрутке или при намерении выхода. Предварительный просмотр макета браузера в реальном времени показывает именно то, что видят посетители, а инструмент генерирует чистый, автономный фрагмент HTML/CSS/JS с опцией показа один раз для каждого посетителя, которую вы вставляете перед закрывающим тегом body в WordPress, Shopify, Webflow или на любой HTML-странице. Никаких плагинов, сторонних библиотек и учетной записи.

Часто задаваемые вопросы

Как мне сделать всплывающее окно подписки или подписки на видео?

Откройте студию наложений социальных сетей и потоков, выберите платформу (Instagram, TikTok, YouTube, Twitch, X или Facebook), введите имя, дескриптор и количество подписчиков, установите переключатели, затем загрузите прозрачный PNG или SVG. Каждая карточка нарисована так, чтобы соответствовать кнопке и макету реальной платформы.

Прозрачны ли всплывающие окна?

Да. Каждое наложение экспортируется на прозрачном фоне в формате PNG, поэтому оно идеально сочетается с игровым процессом, веб-камерой или видео. Вы также можете загрузить его в виде масштабируемого SVG. При необходимости перед экспортом добавьте сплошной или градиентный фон.

Как создать всплывающее окно на веб-сайте для регистрации по электронной почте?

Переключитесь во всплывающий режим веб-сайта, выберите тип регистрации по электронной почте, отредактируйте заголовок, тело, кнопку и заполнитель электронного письма, выберите макет и триггер, затем скопируйте сгенерированный код для встраивания HTML/CSS/JS на свой сайт. Затем посетители видят всплывающее окно регистрации по электронной почте — для его создания регистрация не требуется.

Могу ли я получить код копирования и вставки для WordPress, Shopify или любого другого сайта?

Да. Студия всплывающих окон веб-сайта выводит чистый, автономный фрагмент без каких-либо внешних библиотек. Вставьте его перед закрывающим тегом </body> на WordPress, Shopify, Webflow или любой HTML-странице или загрузите его как файл .html.

Какие типы всплывающих окон для веб-сайтов я могу создать?

Подписка по электронной почте, информационный бюллетень, скидка/промо, намерение выхода, подписка в социальных сетях и панели объявлений — в виде центрального модального окна, выдвижной панели, верхней или нижней панели, каждая из которых настраивается по тексту, цветам, радиусу угла и яркости наложения.

Может ли всплывающее окно открыться при выходе или после задержки?

Да. Выберите триггер — при загрузке страницы, после выбранной вами задержки, при прокрутке (40%) или при намерении выхода (когда курсор покидает страницу) — и он будет встроен в сгенерированный скрипт с дополнительной настройкой показа один раз для каждого посетителя, хранящейся в localStorage.

Могу ли я отображать значок статуса «Подписка» или значок «Подтвержден» на наложениях?

Да. Предварительные настройки подписки позволяют переключаться между «Следовать» и «Подписаться», показывать проверенную галочку цвета платформы, а Instagram/TikTok может отображать градиентное кольцо историй. Вы также можете загрузить настоящую фотографию аватара.

Могу ли я установить процент достижения цели по подписчикам?

Да. Предварительная настройка цели подписчика имеет ползунок прогресса от 0 до 100 %, который заполняет шкалу градиента в реальном времени, а также поля текущего и целевого количества.

Мои данные загружены?

Нет. Обе студии полностью работают в вашем браузере — наложения отображаются с помощью SVG, а код всплывающего окна веб-сайта генерируется локально. Ничто из того, что вы вводите, и никакая фотография, которую вы загружаете, не отправляется на сервер.

Из журнала

All articles →