Версия для слабовидящих на Tilda: как подключить скрипт без хостинга

Разработчики сайтов на Tilda часто сталкиваются с ограничениями платформы: нельзя просто загрузить скрипт, стили и изображения на сервер. Особенно остро эта проблема стоит при внедрении версии для слабовидящих, которая требует не только кода, но и дополнительных файлов (иконки, шрифты, картинки для настроек). В этой статье мы разберём, как решить задачу без покупки хостинга и сложных интеграций.

Почему стандартные методы не работают на Tilda

Tilda - это конструктор, который не даёт прямого доступа к файловой системе. Вы не можете загрузить папку с изображениями или CSS-файлы через FTP. Это значит, что привычные способы (подключение локального скрипта, хранение ассетов на сервере) требуют обходных путей.

• Ограничение на загрузку файлов. Tilda позволяет вставлять только код (HTML, CSS, JS) в блоки, но не поддерживает прямой загрузку медиафайлов для скриптов.
• Необходимость хранения изображений. Скрипты для слабовидящих часто используют иконки (лупа, контрастность, размер шрифта), которые нужно где-то разместить.
• Зависимость от внешних серверов. Многие готовые решения подключаются через CDN или сервера других разработчиков, что создаёт риски (исчезновение сервера, блокировки).

Как подключить скрипт версии для слабовидящих на Tilda: 3 рабочих способа

Способ 1. Использование внешнего CDN-хостинга (бесплатно)

Самый простой вариант - выгрузить ваш скрипт, стили и изображения на бесплатный CDN (например, GitHub Pages, jsDelivr, Cloudflare Pages или Netlify). Это даёт постоянную ссылку без затрат на хостинг.

• Создайте репозиторий на GitHub и загрузите туда папку с файлами.
• Настройте GitHub Pages (бесплатно). Получите ссылку вида https://ваш-логин.github.io/репозиторий/.
• В коде Tilda пропишите подключение скрипта и стилей через эту ссылку. Изображения также ссылайтесь на тот же CDN.

Важно: проверьте, чтобы все пути в скрипте были относительными или указывали на ваш CDN. Иначе изображения не загрузятся.

Способ 2. Инлайн-вставка с base64

Если изображений мало (например, 2-3 иконки), можно конвертировать их в формат base64 и вставить прямо в CSS или HTML. Это избавляет от необходимости хранить файлы отдельно.

• Используйте онлайн-конвертер (например, base64-image.de).
• Замените в CSS все ссылки на картинки на строки base64.
• Весь код (HTML, CSS, JS) поместите в один блок Tilda (например, в блок T123).

Недостаток: размер страницы увеличится, но для небольшого музея это некритично.

Способ 3. Подключение через iframe с внешнего ресурса

Если скрипт сложный и требует много файлов, можно разместить версию для слабовидящих на отдельной странице (например, на GitHub Pages) и вставить её через iframe в Tilda. Это полностью изолирует код от ограничений платформы.

Пример: <iframe src="https://ваш-cdn.github.io/versia-dlya-slabovidyashih" width="100%" height="500"></iframe>

Что делать, если старый скрипт подключался с чужого сервера

Если предыдущий разработчик использовал свой сервер, а вы не хотите зависеть от него, просто скачайте все файлы скрипта (через инструменты разработчика браузера) и перезалейте на CDN. Убедитесь, что лицензия скрипта позволяет такое копирование. В большинстве случаев бесплатные скрипты для слабовидящих (например, от «Тильда-лаб») это допускают.

Рекомендации по выбору метода

• Для музеев и сайтов с высокой посещаемостью - используйте CDN (способ 1). Это надёжно и быстро.
• Для простых страниц - base64 (способ 2) или iframe (способ 3).
• Всегда тестируйте на мобильных устройствах и в разных браузерах.

Внедрение версии для слабовидящих на Tilda - задача решаемая даже без хостинга. Главное - правильно организовать хранение файлов и проверить пути. Если остались вопросы, изучите раздел FAQ ниже.