Как встроить обратный отсчёт на ваш сайт
Если вы используете систему управления контентом или блог-платформу, такую как Blogger, WordPress, Drupal или аналогичную, при вставке кода встраивания обязательно редактируйте контент в режиме HTML.
Встраивание виджетов обратного отсчёта с CountingDownTo.com очень похоже на встраивание видео с сайта вроде YouTube.com. На CountingDownTo.com найдите нужный обратный отсчёт, нажав «Мои обратные отсчёты», а затем название обратного отсчёта, который вы хотите встроить. Либо создайте новый виджет, нажав «Новый обратный отсчёт». Под обратным отсчётом вы увидите кнопку «Встроить на ваш сайт». Нажмите её. Под кнопкой отобразится HTML-код. Код будет выглядеть примерно как на скриншоте ниже. Скопируйте код и вставьте его на ваш сайт или в блог.
Если вы следовали инструкциям на этой странице, но всё ещё не можете встроить обратный отсчёт, пожалуйста, свяжитесь с нами — мы поможем.
На каких платформах можно встроить живой обратный отсчёт?
На большинстве сайтов, где можно вставить пользовательский HTML или URL iframe, обратный отсчёт будет отображаться и работать в реальном времени. Некоторые конструкторы страниц и дизайнерские инструменты полностью блокируют iframe. Вот что мы проверили на практике:
| Платформа | Живой обратный отсчёт? | Примечания |
|---|---|---|
| WordPress (самостоятельный хостинг) | Да | Добавьте блок Custom HTML в редакторе блоков и вставьте код встраивания. Или используйте наш плагин WordPress, когда он выйдет. |
| WordPress.com | Зависит от тарифа | На бесплатных тарифах iframe удаляются. На платных нужно активировать «hosting features», чтобы работал пользовательский HTML. Подробнее. |
| Squarespace | Да (тариф Business+) | Добавьте блок Code и вставьте код встраивания. Требуется тариф Business или выше. |
| Wix | Да | Используйте элемент Embed HTML. Задайте ширину и высоту iframe по размеру обратного отсчёта, чтобы он не обрезался и не показывал полосы прокрутки. |
| Google Sites | Да | Используйте Insert → Embed и вставьте код встраивания или URL iframe. |
| Shopify | Да (с оговоркой) | Работает через Custom Liquid темы или пользовательские HTML-секции. Не работает в описаниях товаров (Shopify удаляет iframe там). |
| Notion | Да |
Введите /embed
и вставьте прямую ссылку /w4/
на обратный отсчёт (не обычную ссылку для sharing).
|
| Canva | Нет | Canva не поддерживает iframe и живые внешние встраивания. Это ограничение Canva, а не ваша ошибка. |
| Blogger, Drupal, Weebly, Joomla! | Да | Вставьте код встраивания как пользовательский/сырой HTML — см. инструкции для платформ ниже. |
| Facebook, WhatsApp, YouTube | Нет | Эти платформы не разрешают сторонние iframe. Вместо этого поделитесь ссылкой на опубликованную страницу обратного отсчёта. |
| Почтовые клиенты | Нет (используйте GIF) | Почтовые клиенты блокируют iframe. Используйте наш обратный отсчёт GIF для email. |
Встроить обратный отсчёт в WordPress
Самостоятельный хостинг WordPress: В редакторе блоков добавьте блок Custom HTML (+ → найдите «Custom HTML») и вставьте выданный нами код. В предпросмотре редактора обратный отсчёт не появится — опубликуйте или откройте предпросмотр страницы.
WordPress.com: Бесплатные сайты WordPress.com не поддерживают iframe (подробнее). На платных тарифах нужно включить hosting features, чтобы блок Custom HTML отображал iframe. Мы обновим эту страницу, когда выйдет наш плагин WordPress.
Пользователи классического редактора: Если вы всё ещё используете старый редактор Visual/HTML, перед вставкой выберите HTML (не Visual). Для редактора блоков этот ролик показывает подход с Custom HTML:
Встроить обратный отсчёт в Squarespace
Squarespace требует тариф Business или выше для встраивания пользовательского кода. Отредактируйте страницу, нажмите +, чтобы добавить блок, найдите Code и вставьте код в блок Code. Сохраните и откройте предпросмотр — на опубликованной странице обратный отсчёт должен работать в реальном времени.
Встроить обратный отсчёт в Wix
В редакторе Wix нажмите + Add Elements → Embed Code → Embed HTML. Вставьте код и нажмите Update.
Важно — размер iframe:
Если обратный отсчёт обрезается или появляются полосы прокрутки, откройте настройки элемента и задайте ширину и высоту как в коде встраивания (обычно те же, что у тега <iframe>).
Wix не всегда автоматически подстраивает размер встроенных iframe.
Короткое видео о том, как добавить обратный отсчёт в Wix.
Встроить обратный отсчёт в Google Sites
При редактировании сайта нажмите Insert → Embed. Выберите Embed code и вставьте предоставленный нами код. Подгоните размер блока на странице, чтобы обратный отсчёт был полностью виден.
Встроить обратный отсчёт в Shopify
Добавьте код в секцию Custom Liquid темы или пользовательский HTML-блок (Online Store → Themes → Customize → Add section). Обратный отсчёт будет отображаться в реальном времени на страницах, куда вы его поместите.
Описания товаров не работают: Shopify удаляет iframe HTML из описаний товаров — это ограничение платформы, а не CountingDownTo. Используйте лендинг, описание коллекции или пользовательскую секцию страницы.
Встроить обратный отсчёт в Notion
На любой странице Notion введите /embed
и нажмите Enter. Вставьте прямую ссылку на обратный отсчёт (URL /w4/
из панели встраивания, не обычную ссылку для sharing). Notion встроит только виджет обратного отсчёта.
Canva — пока невозможно
Редактор сайтов и дизайна Canva не поддерживает iframe и живые внешние виджеты. Вставка нашего кода или ссылки не даст работающий обратный отсчёт. Если Canva добавит поддержку iframe или внешних URL-изображений, мы обновим эту страницу.
Встроить обратный отсчёт в Blogger
Перед вставкой кода в блог Blogger выберите «Edit HTML» NOT «Compose». Помните: при редактировании записи обратный отсчёт не отображается — только после публикации или в предпросмотре.
Встроить обратный отсчёт в Drupal
Перед вставкой кода на сайт Drupal выберите «Full HTML» в настройках «Input format». При редактировании страницы обратный отсчёт не отображается — только после сохранения или в предпросмотре.
Встроить обратный отсчёт в Weebly
Используйте элемент Custom HTML, чтобы встроить виджет обратного отсчёта на сайт Weebly.
Встроить обратный отсчёт в Joomla!
См. инструкции по встраиванию обратного отсчёта в Joomla!
Редактор TinyMCE в Joomla по умолчанию может удалять или переписывать теги iframe при сохранении. Если обратный отсчёт не появляется, отключите WYSIWYG-редактор для этой статьи или используйте модуль Mod HTML, чтобы разместить код напрямую.
Платформы без поддержки iframe
Следующие платформы не могут показать живой обратный отсчёт через iframe, какой бы код вы ни использовали:
- Facebook — поделитесь ссылкой на опубликованную страницу обратного отсчёта.
- WhatsApp — отправьте ссылку; WhatsApp не отображает встроенный HTML.
- YouTube — страницы каналов и описания видео не поддерживают сторонние iframe.
- Почтовые клиенты — Gmail, Outlook, Mailchimp и другие блокируют iframe из соображений безопасности. Используйте наш обратный отсчёт GIF для email — он создаёт анимированное изображение, которое работает почти в любом почтовом клиенте.
Встраивание обратных отсчётов в email
Отправить обратный отсчёт через Mailchimp
Отправить обратный отсчёт через AWeber