Как встроить обратный отсчёт на ваш сайт
Если вы используете систему управления контентом или блог-платформу, такую как Blogger, WordPress, Drupal или аналогичную, при вставке кода встраивания обязательно редактируйте контент в режиме HTML.
Встраивание обратного отсчёта с CountingDownTo.com очень похоже на встраивание видео с сайта вроде YouTube.com.
- Откройте свой обратный отсчёт. Чтобы создать новый, нажмите Обратный отсчёт для веб-сайтов в меню в верхней части страницы. Чтобы найти созданный ранее, нажмите значок аккаунта (значок человека) в правом верхнем углу, затем Мои обратные отсчёты.
- Нажмите Встроить под обратным отсчётом.
- Скопируйте код, который появится под кнопкой. Если рядом с кодом есть кнопка Copy, можно нажать ее.
- Вставьте код на ваш сайт или в блог в то место, где должен появиться обратный отсчёт.
Для Notion и Google Sites нужна ссылка, а не код. Редактор показывает эту ссылку под кодом. Для Canva нужна ссылка для общего доступа к вашему обратному отсчёту: в исходном редакторе сначала нажмите Поделиться, чтобы получить её. Новый редактор показывает её под ссылкой для Notion и Google Sites.
Если вы следовали инструкциям на этой странице, но всё ещё не можете встроить обратный отсчёт, пожалуйста, свяжитесь с нами — мы поможем.
На каких платформах можно встроить живой обратный отсчёт?
На большинстве сайтов, где можно вставить пользовательский HTML или URL iframe, обратный отсчёт будет отображаться и работать в реальном времени. Некоторые конструкторы страниц и дизайнерские инструменты полностью блокируют iframe. Вот что мы проверили сами. Строки Canvas и Schoology основаны на наших логах, где видны обратные отсчёты на многих сайтах курсов этих платформ, а для Canvas ещё и на его собственном руководстве:
| Платформа | Живой обратный отсчёт? | Примечания |
|---|---|---|
| WordPress (самостоятельный хостинг) | Да | Добавьте блок Custom HTML в редакторе блоков и вставьте код встраивания. |
| WordPress.com | Зависит от тарифа | На бесплатных тарифах iframe удаляются. На платных нужно активировать «hosting features», чтобы работал пользовательский HTML. Подробнее. |
| Squarespace | Да (тариф Core или выше) | Добавьте блок Code и вставьте код встраивания. Требуется тариф Core или выше либо старый тариф Business или Commerce. |
| Wix | Да | Используйте Добавить элементы → Embed Code → Popular Embeds → Embed HTML. Задайте ширину и высоту iframe по размеру обратного отсчёта, чтобы он не обрезался и не показывал полосы прокрутки. |
| Google Sites | Да |
Используйте Insert → Embed. Вставьте код встраивания на вкладке
Embed code
или адрес из src="..."
в коде встраивания на вкладке By URL. Если адрес заканчивается на .js, уберите .js.
|
| Shopify | Да (с оговоркой) | Используйте раздел темы Custom Liquid. Редактор описания товара сохраняет код встраивания не во всех темах, поэтому и на страницах товаров используйте раздел Custom Liquid. |
| Notion | Да |
Введите /embed
и вставьте адрес из src="..."
в коде встраивания, а не ссылку для sharing. Если адрес заканчивается на .js, уберите .js.
|
| Canva | Да, при просмотре онлайн | Добавьте приложение Embed и вставьте ссылку для sharing на обратный отсчёт. Скачанные изображения, PDF и видео не могут показывать идущий обратный отсчёт. |
| Canvas | Да | В Rich Content Editor выберите Insert → Embed, вставьте код встраивания, нажмите Submit, затем сохраните страницу. Эти шаги взяты из руководства Canvas для преподавателей. |
| Schoology | Да (шаги не проверены) | Обратные отсчёты показываются на сайтах Schoology, но сами шаги мы не проверяли. Вставьте код встраивания в режиме HTML редактора. |
| 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.
Пользователи классического редактора: Если вы всё ещё используете старый редактор Visual/Text, перед вставкой выберите Text (не Visual).
Встроить обратный отсчёт в Squarespace
Squarespace требует тариф Core или выше либо старый тариф Business или Commerce для встраивания пользовательского кода. Отредактируйте страницу, нажмите +, чтобы добавить блок, найдите Code и вставьте код в блок Code. Сохраните и откройте предпросмотр. На опубликованной странице обратный отсчёт должен работать в реальном времени.
Встроить обратный отсчёт в Wix
В редакторе Wix нажмите Добавить элементы → Embed Code → Popular Embeds → Embed HTML. Нажмите Enter Code, вставьте код встраивания и нажмите Apply.
Важно — размер iframe:
Если обратный отсчёт обрезается или появляются полосы прокрутки, откройте настройки элемента и задайте ширину и высоту как в коде встраивания (обычно те же, что у тега <iframe>).
Wix не всегда автоматически подстраивает размер встроенных iframe.
Короткое видео о том, как добавить обратный отсчёт в Wix.
Встроить обратный отсчёт в Google Sites
При редактировании сайта нажмите Insert
→ Embed. На вкладке Embed code
вставьте предоставленный нами код. Или на вкладке By URL
вставьте ссылку для встраивания: адрес из src="..."
в коде встраивания. Если адрес заканчивается на .js, уберите .js.
Затем подгоните размер блока на странице, чтобы обратный отсчёт был полностью виден.
Встроить обратный отсчёт в Shopify
Добавьте код встраивания в раздел Custom Liquid вашей темы (Интернет-магазин → Темы → Настроить → Добавить раздел). Обратный отсчёт будет работать в реальном времени на страницах, где вы его разместите.
Описания товаров: редактор описания товара сохраняет код встраивания не во всех темах. Вместо этого добавьте раздел Custom Liquid в шаблон страницы товара.
Встроить обратный отсчёт в Notion
На любой странице Notion введите /embed
и нажмите Enter. Вставьте ссылку для встраивания обратного отсчёта и подтвердите. Notion показывает только обратный отсчёт, и он идёт в реальном времени.
Ссылка для встраивания это адрес из src="..."
в коде встраивания, например https://countingdownto.com/w4/abc123
или https://w2.countingdownto.com/1234567. Если ваш код это тег script, уберите
.js
в конце. Не вставляйте ссылку для sharing или весь код встраивания. Чтобы изменить размер блока, потяните за его края.
Встроить обратный отсчёт в Canva
Canva может показывать живой обратный отсчёт в дизайнах и на сайтах Canva при просмотре онлайн. В редакторе Canva откройте Приложения, выберите Embed и вставьте ссылку для sharing на обратный отсчёт.
Если Canva показывает неподвижное изображение вместо обратного отсчёта из нового редактора, вставьте вместо этого его ссылку для встраивания: адрес из
src="..."
в вашем коде встраивания. Для обратных отсчётов из старого редактора используйте ссылку для публикации; их ссылки для встраивания (w2.countingdownto.com) в Canva не работают. Скачанное изображение, PDF или видео не может показывать идущий обратный отсчёт.
Встроить обратный отсчёт в Blogger
В редакторе записи переключитесь с Compose view на HTML view перед вставкой кода встраивания. При редактировании записи обратный отсчёт не отображается. Он появится только после публикации или в предпросмотре.
Встроить обратный отсчёт в Drupal
Выберите Full HTML в списке Text format под полем текста, затем вставьте код встраивания. При редактировании страницы обратный отсчёт не отображается. Он появится только после сохранения или в предпросмотре.
Встроить обратный отсчёт в Weebly
Перетащите элемент Embed Code на страницу, нажмите на него и вставьте код встраивания. Опубликуйте сайт, чтобы увидеть обратный отсчёт.
Встроить обратный отсчёт в Joomla!
Нажмите Toggle Editor под редактором статьи, чтобы редактировать обычный HTML, затем вставьте код встраивания и сохраните.
Редактор TinyMCE в Joomla по умолчанию может удалять теги iframe при сохранении. Если обратный отсчёт не появляется, вставьте код встраивания в модуль Custom с выключенным редактором или попросите администратора сайта разрешить iframe в настройках плагина TinyMCE.
Платформы без поддержки iframe
Следующие платформы не могут показать живой обратный отсчёт через iframe, какой бы код вы ни использовали:
- Facebook — поделитесь ссылкой на опубликованную страницу обратного отсчёта.
- WhatsApp — отправьте ссылку; WhatsApp не отображает встроенный HTML.
- YouTube — страницы каналов и описания видео не поддерживают сторонние iframe.
- Почтовые клиенты: Gmail, Outlook, Mailchimp и другие блокируют iframe из соображений безопасности. Используйте наш обратный отсчёт для email. Он создаёт анимированное изображение, которое показывает большинство почтовых приложений.
Встраивание обратных отсчётов в email
Почтовые программы блокируют iframe, поэтому обратные отсчёты для писем представляют собой анимированные GIF-изображения. Создайте такой отсчёт на странице обратного отсчёта для email и нажмите Добавить в мою электронную почту, чтобы получить код. В сервисах email-рассылок, таких как Mailchimp, Constant Contact, AWeber и Kit (ConvertKit), вставьте код в блок HTML или блок кода. Чтобы отправить обратный отсчёт из Gmail или другого личного почтового ящика, используйте Отправить мне этот обратный отсчет по электронной почте на той же странице и перешлите полученное письмо.
Используете Kajabi? Воспользуйтесь нашим руководством по таймеру обратного отсчёта для Kajabi.
Изображение показывает оставшееся время в момент загрузки. Некоторые почтовые приложения загружают изображения заранее, поэтому оно может показывать более раннее время. Укажите дату и в тексте письма.