Подготовка: Получение уникального кода виджета

Самое главное помнить: код виджета генерируется индивидуально для вашего домена. До момента нажатия кнопки сохранения/публикации в личном кабинете сервиса астропроцессора, код в поле «Код для вставки» является лишь шаблоном и не будет работать на вашем сайте.

Авторизуйтесь в личном кабинете провайдера астропроцессора.
Перейдите в раздел «Виджеты», «Интеграция» или «Код для вставки».
Настройте параметры виджета (тип: натальная карта, сторис, транзиты, виджет совместимости; цветовая схема; язык; размеры).
Обязательно нажмите кнопку «Сохранить», «Опубликовать» или «Сгенерировать код».
Скопируйте итоговый код (обычно это тег <script> или <div> с ID и подключающим скриптом).

Важно! Пока вы не нажмете кнопку «Сохранить» в поле «Код для вставки», не будет сгенерирован именно для вашего сайта уникальный токен/ключ, а сам пример кода не будет работать. Не пропустите этот шаг!

Куда и как вставлять код: Общие принципы

Виджеты астропроцессора предоставляют готовые UI-компоненты, которые интегрируются на любую веб-страницу с помощью одного тега скрипта. Существует два основных подхода к размещению:

Вариант А: Вставка в тело страницы (Рекомендуемый для контентных блоков)

<body>
 <header>;..</header>
 <main>
 <h1>Мой астрологический прогноз</h1>
 <p>Текст статьи...</p>
 
 <!-- КОД ВИДЖЕТА НАЧИНАЕТСЯ ЗДЕСЬ -->
 <div id="astro-widget-container" data-config="your_unique_id"></div>
 <script src="https://cdn.astroprocessor.com/widget.js" async></script>
 <!-- КОД ВИДЖЕТА ЗАКАНЧИВАЕТСЯ ЗДЕСЬ -->
 
 </main>
</body>

Вариант Б: Вставка в секцию `<head>` или начало `<body>` (Для глобальных виджетов/Сторис)

Рекомендуем размещать код с параметрами как можно выше в элементе body (сразу после открывающего тега), если виджет должен загружаться рано (например, плавающий кнопка запуска сторис, хэдер-виджет или глобальный скрипт инициализации).

Если использовать этот способ, виджеты будут загружаться не сразу, а по мере загрузки страницы (асинхронно), что не блокирует рендеринг основного контента.

Инструкции для популярных CMS

Процесс вставки кода зависит от того, как управляется контентом на вашем сайте.

WordPress (Гутенберг / Классический редактор / Elementor)

Виджеты (Внешний вид → Виджеты): Перетащите виджет «Произвольный HTML» в сайдбар или футер, вставьте код.
Плагины для вставки в Head/Body: Если инструкция требует вставить код в <head> или сразу после <body>, используйте плагины вроде WPCode (Insert Headers and Footers), Header Footer Code Manager или функции темы (Theme Options → Custom Code).

Tilda (Тильда)

Вставьте код виджета в настройки блока.
Обязательно переопубликуйте все страницы (кнопка «Опубликовать все страницы»), так как Тilda кэширует статику.

Bitrix (1С-Битрикс)

Через админку (Режим правки): Включите режим правки, нажмите на область включения -> «Редактировать как HTML» -> вставьте код.

Joomla / OpenCart / MODX / Drupal

Конструкторы: Wix, Squarespace, Nethouse, uCoz

Wix: Настройки → Дополнительные настройки → Внедрение кода → «Добавить пользовательский код» → выберите «Все страницы» или «Конкретная страница» → вставьте в Body (начало или конец) или Head.

Подключитесь к серверу по FTP/SFTP или используйте файловый менеджер хостинга.
Найдите нужный файл (например, index.html, page.html или шаблон template.html).
Скачайте файл локально (для бэкапа).
Откройте в редакторе кода (VS Code, Notepad++, Sublime Text).
Вставьте код виджета в нужное место (см. раздел 2).
Сохраните и закачайте файл обратно на сервер с перезаписью.
Очистите кэш браузера (Ctrl+F5) и кэш сервера/CDN (Cloudflare, Nginx cache), если используется.

Проверка и отладка: Виджет не отображается?

После установки и переопубликации сайта выполните проверку:

Очистите кэш: Браузер, плагины кэширования (WP Rocket, W3 Total Cache), серверный кэш, CDN.
Проверьте консоль браузера (F12 → Console): Ищите ошибки 404 Not Found (скрипт не загрузился), CORS policy (домен не в белом списке провайдера), JavaScript Error (конфликт скриптов).
Домен в белом списке: Убедитесь, что в настройках виджета в личном кабинете астропроцессора указан точно ваш домен (с www или без, с https).
HTTPS: Современные виджеты работают только по HTTPS. Если сайт на HTTP — виджет может блокироваться браузером (Mixed Content).
AdBlock / Антивирусы: Некоторые блокировщики рекламы могут резать скрипты со сторонних CDN. Проверьте в режиме инкогнито.
Асинхронная загрузка: Если виджет появляется «прыгая» или со задержкой — это нормально для асинхронной загрузки. Можно добавить контейнеру фиксированную высоту/минимальную высоту через CSS, чтобы избежать сдвига макета (CLS).

Типичные ошибки и их решения

Ошибка	Причина	Решение
Пустое место вместо виджета	Не нажата кнопка «Сохранить/Опубликовать» в ЛК провайдера	Сгенерируйте код заново и скопируйте актуальную версию
Ошибка «Domain not allowed» в консоли	Домен сайта не добавлен в настройках виджета	Добавьте домен в белый список в кабинете астропроцессора
Виджет ломает верстку (наезжает на текст)	Отсутствуют CSS-стили контейнера или конфликт стилей	Задайте контейнеру `style="min-height: 400px; display: block;"` или используйте Shadow DOM / iframe, если предоставляет провайдер
Скрипт не загружается (404/500)	Проблемы на CDN провайдера или устарел код вставки	Обновите код из ЛК, проверьте статус сервиса провайдера
Работает на локалке, не работает на проде	Разные домены в настройках виджета	Добавьте продакшн-домен в настройки виджета

Лучшие практики и советы по производительности

Атрибуты async / defer: Всегда используйте <script src="..." async></script> (если порядок не важен) или defer (если виджет зависит от DOM). Это предотвратит блокировку рендеринга страницы.
Lazy Loading (Отложенная загрузка): Если виджет находится «ниже сгину» (в футере или в середине длинной статьи), оберните инициализацию в IntersectionObserver или используйте нативный loading="lazy" для iframe-виджетов, чтобы не грузить астропроцессор лишний раз.
Content Security Policy (CSP): Если у вас настроен строгий CSP, добавьте домен CDN астропроцессора в директивы script-src, frame-src (если виджет в iframe), connect-src (для API запросов).
Резервное отображение (Fallback): Добавьте внутри контейнера виджета текст или картинку-заглушку: <div id="widget"><p>Загрузка гороскопа...</p></div>. Если JS отключен или ошибка — пользователь увидит сообщение.
Мобильная адаптация: Проверьте виджет на мобильных устройствах. Часто виджеты астропроцессоров имеют фиксированную ширину. Убедитесь, что контейнер имеет width: 100%; max-width: 100%; overflow-x: auto;.

Пример итогового кода для вставки (Шаблон)

Ниже приведен универсальный шаблон. Замените YOUR_UNIQUE_WIDGET_ID и URL скрипта на значения из вашего личного кабинета.

<!-- 1. Контейнер виджета (место отрисовки) -->
<div 
 id="astro-processor-widget" 
 data-widget-id="YOUR_UNIQUE_WIDGET_ID" 
 style="min-height: 450px; width: 100%; max-width: 100%; overflow: hidden;"
>
 <!-- Fallback на случай ошибки JS -->
 <p style="text-align: center; color: #666; padding: 20px;">
 Загрузка астрологического виджета... 
 <br>
 <a href="https://astroprocessor.example.com" target="_blank" rel="noopener">Открыть на сайте провайдера</a>
 </p>
</div>

<!-- 2. Подключение скрипта (лучше вставить перед закрывающим </body> или в <head> с defer) -->
<script 
 src="https://cdn.astroprocessor.example.com/widgets/loader.js" 
 defer
 data-config="YOUR_UNIQUE_WIDGET_ID"
></script>

Теперь вы знаете, как пошагово установить виджет на вашем веб-сайте! Пользуйтесь этим функционалом, чтобы сделать ваш сайт более интересным, интерактивным и полезным для посетителей. Астрологические сервисы (натальные карты, биоритмы, совместимость, сторис) значительно повышают поведенческие факторы и конверсию в лиды/подписки.

Если при интеграции возникли сложности — обратитесь в техподдержку вашего провайдера астропроцессора, предоставив им: ссылку на страницу с ошибкой, скриншот консоли браузера (F12) и используемый код вставки.