Благодарю что вы здесь!

Установка ВИДЖЕТА ПЕРВОГО ЭКРАНА на сервер и вывод на странице сайта

Видео-инструкция

Видео-инструкция, в которой я показал как установить виджет первого экрана и виджет оплаты на сайт и как оба виджета редактировать.

Смотреть на RuTube — нажать, перейти и смотреть.

Как менять стили заголовка H2, дополнительного текста, подзаголовка H3 и расположение картинок

Все настройки блоков находятся в JavaScript-массиве BLOCKS внутри тега <script>. Каждый блок — это объект с параметрами.

Стили заголовка H2:

h2Text: ‘Ваш заголовок’,    // текст заголовка
h2Accent: ‘выделенная часть’,    // часть текста, которая будет цветной
h2Color: ‘#ffffff’,        // основной цвет текста
h2AccentColor: ‘#FFCC00’,         // цвет выделенной части
h2FontFamily: ‘»Roboto», Arial’,     // шрифт
h2FontSize: ’44px’,          // размер шрифта
h2FontWeight: 800,     // жирность (100-900)
h2Italic: false,        // курсив: true/false
h2OffsetX: 0,            // смещение по горизонтали (px)
h2OffsetY: 0,       // смещение по вертикали (px)

Стили дополнительного текста (Lead):

leadText: ‘Ваш пояснительный текст’,
leadColor: ‘#ffffff’,
leadFontFamily: ‘Arial, Helvetica, sans-serif’,
leadFontSize: ’24px’,
leadFontWeight: 400,
leadItalic: false,
leadOffsetX: 0,
leadOffsetY: 0,

Стили подзаголовка H3:

h3Text: ‘Ваш подзаголовок’,
h3Color: ‘#FFCC00’,
h3FontFamily: ‘Arial, Helvetica, sans-serif’,
h3FontSize: ’26px’,
h3FontWeight: 800,
h3Italic: false,
h3OffsetX: 0,
h3OffsetY: 0,

Расположение и стили каждой картинки:

Каждая из 7 картинок — это объект в массиве images:

{
url: ‘https://вашсайт.ру/картинка.jpg’,
size: 130, // размер (ширина = высота) в пикселях
rotate: 0, // поворот в градусах (например, -5, 10)
offsetX: 0, // смещение по горизонтали в пикселях
offsetY: 0 // смещение по вертикали в пикселях
}

Пример: чтобы картинку сдвинуть вправо на 20px и наклонить на 5°:

{ url: ‘…’, size: 130, rotate: 5, offsetX: 20, offsetY: 0 }

2. Как менять цвет выделенной части в H2 и слова «БЕСПЛАТНО» в H3

🟡 Цвет выделенной части в H2:

В настройках блока меняй параметр h2AccentColor:

h2AccentColor: ‘#FFCC00’, // жёлтый (по умолчанию)
h2AccentColor: ‘#FF0000’, // красный
h2AccentColor: ‘#00FF00’, // зелёный

Выделяемое слово/фраза задаётся в h2Accent — это должна быть точная копия части текста из h2Text.

⚪ Цвет слова «БЕСПЛАТНО» в H3:

В верхней части CSS (в блоке .pervekr01_root) найди переменную:

—pervekr01-h3-free-color: #ffffff;

Измени значение на любой цвет:

—pervekr01-h3-free-color: #FF0000; /* красный */
—pervekr01-h3-free-color: #00FFFF; /* голубой */

Работает автоматически со словом «БЕСПЛАТНО» в тексте H3 любого блока.

3. Как делать фон светлее или темнее

У каждого блока есть параметр затемнения:

overlayColor: ‘#000000’, // цвет затемнения (обычно чёрный)
overlayOpacity: 0.45, // прозрачность: 0 = прозрачно, 1 = полностью залито

Примеры:

  • overlayOpacity: 0.2 → фон светлее (мало затемнения)
  • overlayOpacity: 0.7 → фон темнее (сильное затемнение)
  • overlayOpacity: 0 → фон без затемнения

Можно также менять цвет затемнения — например, синий или тёмно-фиолетовый:

overlayColor: ‘#001133’,
overlayOpacity: 0.5,

4. Какие размеры должны быть у фоновой картинки

  • Рекомендуемый размер: 1920×1080 пикселей (Full HD) или 2400×1350 для Retina-экранов
  • Пропорции: 16:9 (широкоформатное)
  • Формат: JPG (для фото) или WebP (для меньшего веса)
  • Вес: желательно до 200–400 КБ (оптимизировать через TinyPNG или Squoosh)
  • Минимальная ширина: 1200 px (иначе будет размытие на больших экранах)

5. Как загрузить файл виджета на хостинг

Через FTP-клиент (FileZilla, Total Commander):

  1. Подключись к серверу по FTP (данные — в панели хостинга).
  2. Перейди в корневую папку сайта (обычно public_html или www).
  3. Создай папку calc (если её ещё нет).
  4. Загрузи в неё файл pervekr01.html.

Через файловый менеджер хостинга (cPanel, ISPmanager):

  1. Открой файловый менеджер в панели хостинга.
  2. Перейди в public_html (или корень сайта).
  3. Создай папку calc и войди в неё.
  4. Нажми «Загрузить» и выбери файл pervekr01.html.

Итоговый путь: https://вашсайт.ру/calc/pervekr01.html

Проверь работу, открыв этот URL в браузере — должен отобразиться виджет.

6. Как вывести виджет в статье сайта WordPress

Способ 1: через блок «HTML» (Гутенберг):

  1. Открой статью для редактирования.
  2. Нажми «+» → Форматирование → «Произвольный HTML» (Custom HTML).
  3. Вставь код:

<iframe class=»calc-frame» src=»/calc/pervekr01.html» width=»100%» height=»600″ style=»border:0;» scrolling=»no» loading=»lazy»></iframe>

  1. Сохрани и опубликуй статью.

Способ 2: через классический редактор:

  1. Переключись во вкладку «Текст» (не «Визуально»).
  2. Вставь тот же код <iframe>.
  3. Обнови статью.

7. Как использовать виджет с другим содержимым на другой странице

Шаг 1: скопируй файл и переименуй

  1. Скачай файл pervekr01.html с хостинга или создай новый с названием pervekr02.html.
  2. Переименуй его, например, в pervekr02.html.
  3. Открой файл pervekr02.htmlв текстовом редакторе (VS Code, Notepad++, Sublime Text) и добавь в него весь код из файла pervekr01.html.

Шаг 2: замени все упоминания идентификатора

С помощью функции «Найти и заменить» (Ctrl+H) замени в файле pervekr02.html префикса pervekr01все вхождения:

  • замени все: pervekr01 на pervekr02, сделай это вручную или с помощью нейросети.

Это касается:

  • CSS-классов (например, .pervekr01_root → .pervekr02_root)
  • ID (например, id="pervekr01_slider" → id="pervekr02_slider")
  • CSS-переменных (--pervekr01-yellow → --pervekr02-yellow)
  • JS-переменных и функций (pervekr01_sendHeight → pervekr02_sendHeight)
  • Значения calcId: 'pervekr01' → calcId: 'pervekr02'
  • Всего нужно заменить около 180 мест с pervekr01.html на pervekr02.html

Важно: без переименования два виджета на одной странице будут конфликтовать друг с другом (стили и скрипты пересекутся).

Шаг 3: замени в коде нового файла все тексты на новые с новым содержимым (для другой страницы или товара или услуги)

В массиве BLOCKS замени:

  • URL фоновых картинок (bgUrl)
  • Тексты (h2Text, leadText, h3Text)
  • Выделенные части (h2Accent)
  • Цвета (h2Color, h3Color, h2AccentColor)
  • URL 7 дополнительных картинок в массиве images

Шаг 4: загрузи на хостинг

Помести pervekr02.html в ту же папку /calc/ на хостинге.

Шаг 5: вставь iframe на нужной странице (в этой строчке то же замени pervekr01 на pervekr02)

<iframe class=»calc-frame» src=»/calc/pervekr02.html» width=»100%» height=»600″ style=»border:0;» scrolling=»no» loading=»lazy»></iframe>

Такую процедуру можно проделывать для каждой новой странице создавая новый дубликат файла виджета первого экрана или виджета оплаты меняя цифру в префиксе на большую.

Готово! ✅ Теперь у тебя есть полная документация по управлению виджетом первого экрана.

 

Установка ВИДЖЕТА ОПЛАТЫ на сервер и вывод на странице сайта (в видео выше мы показали весь этот процесс и настройку)

ЧАСТЬ 1. Загрузка файла виджета на сервер

Шаг 1. Подготовьте файл

Сохраните код виджета в файл с именем:

widgop01.html

Кодировка файла — UTF-8 (иначе русский текст превратится в «кракозябры»).

Шаг 2. Выберите способ загрузки

Вариант А — через панель хостинга (cPanel / ISPmanager)

  1. Войдите в панель управления хостингом.
  2. Откройте «Файловый менеджер».
  3. Зайдите в папку сайта (public_html / www).
  4. Создайте папку widget → нажмите «Загрузить» → выберите widgop01.html.

Вариант В — через конструктор сайта (Тильда, WordPress и т.п.)

См. Часть 3 ниже — там особенности для конструкторов.

Шаг 3. Проверьте, что файл открывается

В браузере введите прямой адрес:

https://вашсайт.ru/widget/widgop01.html

Если виджет открылся — всё загружено правильно. Запомните этот адрес — он понадобится дальше.

ЧАСТЬ 2. Вывод виджета на странице сайта (через iframe)

Виджет вставляется через <iframe>. Ширина адаптивная, высота подстраивается автоматически (виджет сам сообщает свою высоту через postMessage).

Шаг 1. Вставьте код iframe в нужное место страницы

<iframe class=»calc-frame» style=»border: 0;» src=»/calc/widgop01.html» width=»100%» height=»600″ scrolling=»no»></iframe>

ИНСТРУКЦИЯ ПО РЕДАКТИРОВАНИЮ ВИДЖЕТА widgop01.html

1️⃣ ДИЗАЙНЫ (переключение готовой темы)

Где: в <script>, в блоке констант (ближе к началу скрипта).

Найдите строку:

const DESIGN = 'A';   // 'A'...'J'

Как менять: замените букву на нужную. Доступно 10 тем:

Буква Дизайн
'A' Оранжевый (по умолчанию, без рамки)
'B' Тёмная неоновая
'C' Фиолетовый градиент
'D' Минимал светло-серый
'E' Тёплый бежевый (винтаж)
'F' Синий корпоративный
'G' Зелёный эко
'H' Розово-коралловый
'I' Чёрно-жёлтый смелый
'J' Аква-мятный лёгкий

Пример: const DESIGN = 'C'; — включит фиолетовый градиент.

URL ССЫЛКА НА КНОПКУ «Получить инструкцию»

Где: в HTML-части (тело <body>), блок кнопки.

Найдите:

html
<div class="widgop01-btn-row wo01-reveal">
    <a class="widgop01-btn" id="widgop01-btn"
       href="https://a56300s3.autoweboffice.ru/?r=ordering/cart/as1&id=122&clean=true&lg=ru&Settings[hideColQuantity]=1&Settings[hideColDelete]=1"
       target="_blank" rel="noopener">Получить инструкцию</a>
</div>

Как менять: замените адрес внутри href="..." на свою ссылку. Текст на кнопке меняется между >Получить инструкцию</a> (замените «Получить инструкцию» на свой).

КАК УДАЛИТЬ ЗАГОЛОВКИ, ЧТОБЫ ОНИ НЕ ПОКАЗЫВАЛИСЬ

А) Надзаголовок «Получить инструкцию:»

Где (HTML):

<p class="widgop01-super wo01-reveal">Получить инструкцию:</p>

Как убрать: удалите всю эту строку (или очистите текст между тегами).

Б) Заголовок H2, Подзаголовок, Описание

Управляются через режим анимации в <script>, блок констант:

const H2_MODE   = 'letters'; // 'letters' | 'words' | 'off'
const SUB_MODE  = 'letters'; // 'letters' | 'words' | 'off'
const DESC_MODE = 'words';   // 'letters' | 'words' | 'off'

Чтобы заголовок вообще не показывался — поставьте 'off' И очистите его текст (см. пункт 6). Например, чтобы убрать подзаголовок:

  1. const SUB_MODE = 'off';
  2. В wo01SubSegments (см. пункт 6) сделайте text: ''.

В) Заголовок бонусов «Бонусы, которые вы получите:»

Где (HTML):

<h3 class="widgop01-bonus-title wo01-reveal"><span class="wo01-bonus-hl">Бонусы</span>, которые вы получите:</h3>

СТИЛИ КАЖДОГО ДИЗАЙНА (цвета, шрифты, скругления)

Где: в <style>, в самом низу — блок «ДИЗАЙН-ТЕМЫ B–J».

Каждая тема — это отдельный набор переменных. Пример темы C:

css
.wo01-design-C{
  --wo01-accent:#8a3ffc;      /* главный акцентный цвет */
  --wo01-graphite:#3b2760;    /* цвет выделенной фразы в H2 */
  --wo01-green:#1f9d55;       /* цвет «Бесплатно» */
  --wo01-blue:#5b3fd8;        /* доп. синий */
  --wo01-gray:#9a92ad;        /* зачёркнутый серый */
  --wo01-dark:#2c2540;        /* основной тёмный текст */
  --wo01-bg:#f6f2ff;          /* фон виджета */
  --wo01-card-bg:#ffffff;     /* фон карточек-бонусов */
  --wo01-border:#d9ccff;      /* рамка виджета */
  --wo01-card-border:#8a3ffc; /* рамка карточек */
  --wo01-radius:22px;         /* скругление углов */
  --wo01-font-head:'Neucha',cursive; /* шрифт заголовка */
}

Как менять:

  • Цвета — замените HEX-код (например #8a3ffc на свой).
  • Скругление углов — измените --wo01-radius.
  • Шрифт заголовка — --wo01-font-head.

🎨 Дизайн «A» (по умолчанию) настраивается ОТДЕЛЬНО

Где: в самом верху <style>, блок :root{...}:

css
:root{
  --wo01-accent:#F5852A;      /* оранжевый акцент */
  --wo01-graphite:#2f3437;
  --wo01-green:#28a745;
  ...

Размеры шрифтов (для всех дизайнов)

Тоже в :root{...}:

css
--wo01-fs-h2:34px;      /* размер заголовка H2 */
--wo01-fs-sub:20px;     /* размер подзаголовка */
--wo01-fs-newprice:24px;/* размер цены со скидкой */
--wo01-fs-btn:22px;     /* размер текста кнопки */
...

📱 Размеры на мобильных

В <style>, блок @media(max-width:680px):

css
@media(max-width:680px){
  :root{
    --wo01-fs-h2:26px;
    --wo01-fs-sub:18px;
    ...

URL ССЫЛОК: оферта, политика конфиденциальности, обработка данных

Где: в HTML, блок чекбокса.

Найдите (593, 594, 595 сточки в коде файла виджета):

html
<span class="widgop01-check-text">
  Нажимая на кнопки, я соглашаюсь с условиями
  <a href="#" target="_blank" rel="noopener">публичной оферты</a>, с
  <a href="#" target="_blank" rel="noopener">политикой конфиденциальности</a> и
  <a href="#" target="_blank" rel="noopener">обработки персональных данных</a>.
</span>

Как менять: замените каждый href="#" на нужный адрес:

  • 1-я ссылка href="#" → публичная оферта
  • 2-я ссылка href="#" → политика конфиденциальности
  • 3-я ссылка href="#" → обработка персональных данных

Пример:

html
<a href="https://ваш-сайт.ru/oferta" target="_blank" rel="noopener">публичной оферты</a>

ТЕКСТЫ: заголовок, подзаголовок, описание, цены, бонусы

ЗАГОЛОВОК H2 / ПОДЗАГОЛОВОК / ОПИСАНИЕ

Где: в <script>, блок «ПОСТРОЕНИЕ H2 / SUB / DESC».

javascript
var wo01H2segments = [
  { text: 'Вирусные ', hl:false },
  { text: 'нейро-мультфильмы для привлечения посетителей', hl:true },   // hl:true = выделенный цвет
  { text: ' для роста продаж и заработка', hl:false }
];

var wo01SubSegments = [
  { text: 'БЕЗ вложений в трафик, БЕЗ навыков и опыта!', hl:false }
];

var wo01DescSegments = [
  { text: 'Готовый видеоролик через 30-40 мин. ', hl:false },
  { text: 'Посетители и клиенты с первых видео', hl:true },
  { text: '. Рост продаж БЕЗ денег и рекламы!', hl:false }
];

Как менять:

  • Замените текст внутри text: '...'.
  • hl:true — фраза выделяется акцентным цветом; hl:false — обычный цвет.
  • Можно добавлять/удалять сегменты { text:'...', hl:... },.

ЦЕНЫ (старая и со скидкой)

Где: в <script>, блок констант в самом верху:

javascript
const OLD_PRICE = 3490;   // старая цена (зачёркнутая)
const NEW_PRICE = 2490;   // цена со скидкой

Как менять: впишите свои числа (без пробелов). Скидка и процент в бейдже −1 000 ₽ / −29% считаются автоматически.

ТЕКСТ ЦЕН И ПОДПИСИ (в HTML)

Старая цена и цена со скидкой формируются автоматически из чисел выше. Если нужно поменять слова «Обычная цена» / «Цена со скидкой»:

  • «Обычная цена» — в <script>, функция priceBadge:

javascript

document.getElementById('widgop01-oldprice').textContent = 'Обычная цена: ' + wo01Fmt(OLD_PRICE) + ' ₽';
  • «Цена со скидкой» — там же:
javascript
npEl.innerHTML = '<span class="wo01-newprice-inner">Цена со скидкой: <span class="wo01-newprice-num" id="widgop01-newprice-num">0</span> ₽</span>';

Две строки под кнопкой (HTML):

html
<div class="widgop01-lines wo01-reveal">
  <p class="widgop01-line">Доступ к инструкции — сразу же после оплаты!</p>
  <p class="widgop01-line">Цена действует ограниченное время. Дальше — <span class="wo01-line-hl">3 490 ₽</span> без бонусов</p>
</div>

БОНУСЫ (карточки — заголовок, текст, цена)

Где: в HTML, блок <div class="widgop01-cards">.

Каждая карточка:

html
<div class="widgop01-card wo01-reveal">
  <p class="widgop01-card-title">Заберите 3000 руб (или эквивалент в рублях — сразу)</p>   <!-- заголовок бонуса -->
  <p class="widgop01-card-text">Предлагаю получить от 3000+ руб...</p>                     <!-- описание -->
  <p class="widgop01-card-price">
    <span class="wo01-old">3000 ₽</span>          <!-- старая цена (зачёркнута) -->
    <span class="wo01-free">→ Бесплатно</span>    <!-- статус -->
  </p>
</div>

Как менять:

  • Заголовок бонуса → текст в widgop01-card-title.
  • Описание → текст в widgop01-card-text.
  • Цена бонуса → число в <span class="wo01-old">3000 ₽</span>.
  • Статус → текст в <span class="wo01-free">→ Бесплатно</span>.

Карточек три подряд — редактируйте каждую отдельно.

СУММАРНАЯ ЦЕННОСТЬ БОНУСОВ

Где: в HTML, последний абзац:

html
<p class="widgop01-total wo01-reveal">Суммарная ценность бонусов: <span class="wo01-total-hl"><span class="wo01-total-num" id="widgop01-total-num">7 000</span> ₽</span> — для вас в подарок!</p>

Как менять: замените число 7 000 внутри id="widgop01-total-num" и текст вокруг при необходимости.

БЕЙДЖ СКИДКИ

<span class="widgop01-badge" id="widgop01-badge">−1 000 ₽ / −29%</span>

Значение пересчитывается автоматически из OLD_PRICE и NEW_PRICE. Вручную менять не нужно — просто задайте правильные цены в пункте выше.

Как использовать виджет для разных офферов

Использование виджета для другого оффера (другая ссылка + другие бонусы)

Идея простая: виджет — это отдельный HTML-файл. Для нового оффера вы делаете копию файла, меняете в ней ссылку, цены и бонусы, загружаете под новым именем и вставляете на новую страницу. Оригинал остаётся нетронутым.

ПОШАГОВЫЙ ПЛАН

Шаг 1. Сделайте копию файла

Скопируйте widgop01.html и переименуйте, например:

widgop01.html          ← оффер №1 (не трогаем)
widgop02.html          ← оффер №2 (новый)
widgop03.html          ← оффер №3 (и т.д.)

💡 Одно имя = один оффер. Так вы не запутаетесь и не сломаете рабочий виджет.

Шаг 2. ⚠️ ВАЖНО! Смените уникальный ID виджета

Внутри нового файла найдите два места и поменяйте widgop01 на widgop02, иначе два виджета на разных страницах могут конфликтовать по авто-высоте.

Место 1 — в <script>, константа ID:

javascript
const WO01_CALC_ID = 'widgop01';   // → замените на 'widgop02'

Станет:

javascript
const WO01_CALC_ID = 'widgop02';

💡 Сами HTML-классы (widgop01-btn и т.д.) переименовывать НЕ обязательно — они работают внутри iframe изолированно. Менять нужно только WO01_CALC_ID, потому что он используется во «внешнем» сообщении о высоте.

Шаг 3. Замените ссылку на кнопке (оффер №2)

В HTML найдите:

html
<a class="widgop01-btn" id="widgop01-btn"
   href="СТАРАЯ_ССЫЛКА_ОФФЕРА_1"
   target="_blank" rel="noopener">Получить инструкцию</a>

Замените href="..." на ссылку оплаты нового оффера. При необходимости поменяйте и текст кнопки.

Шаг 4. Замените цены (оффер №2)

В <script>, блок констант:

javascript
const OLD_PRICE = 3490;   // старая цена нового оффера
const NEW_PRICE = 2490;   // цена со скидкой нового оффера

Впишите свои числа. Скидка и процент пересчитаются автоматически.

Шаг 5. Замените заголовок / подзаголовок / описание

В <script>:

javascript
var wo01H2segments = [
  { text: 'Ваш новый заголовок ', hl:false },
  { text: 'выделенная фраза оффера №2', hl:true },
  { text: ' продолжение', hl:false }
];

var wo01SubSegments = [
  { text: 'Новый подзаголовок оффера №2', hl:false }
];

var wo01DescSegments = [
  { text: 'Новое описание оффера №2. ', hl:false },
  { text: 'Выделенная выгода', hl:true },
  { text: '. Финальная фраза!', hl:false }
];

Шаг 6. Замените БОНУСЫ (главное для нового оффера)

В HTML найдите блок <div class="widgop01-cards">. Внутри — три карточки. Для каждой поменяйте заголовок, описание и цену:

html
<div class="widgop01-cards">

  <!-- БОНУС 1 -->
  <div class="widgop01-card wo01-reveal">
    <p class="widgop01-card-title">НОВЫЙ бонус №1 — заголовок</p>
    <p class="widgop01-card-text">Описание нового бонуса №1...</p>
    <p class="widgop01-card-price">
      <span class="wo01-old">2000 ₽</span>
      <span class="wo01-free">→ Бесплатно</span>
    </p>
  </div>

  <!-- БОНУС 2 -->
  <div class="widgop01-card wo01-reveal">
    <p class="widgop01-card-title">НОВЫЙ бонус №2 — заголовок</p>
    <p class="widgop01-card-text">Описание нового бонуса №2...</p>
    <p class="widgop01-card-price">
      <span class="wo01-old">1500 ₽</span>
      <span class="wo01-free">→ Бесплатно</span>
    </p>
  </div>

  <!-- БОНУС 3 -->
  <div class="widgop01-card wo01-reveal">
    <p class="widgop01-card-title">НОВЫЙ бонус №3 — заголовок</p>
    <p class="widgop01-card-text">Описание нового бонуса №3...</p>
    <p class="widgop01-card-price">
      <span class="wo01-old">2500 ₽</span>
      <span class="wo01-free">→ Бесплатно</span>
    </p>
  </div>

</div>

Что менять в каждой карточке:

  • widgop01-card-title — заголовок бонуса
  • widgop01-card-text — описание бонуса
  • <span class="wo01-old">…₽</span> — цена бонуса (зачёркнута)
  • <span class="wo01-free">→ Бесплатно</span> — статус

Шаг 7. Обновите суммарную ценность бонусов

В HTML:

html
<p class="widgop01-total wo01-reveal">Суммарная ценность бонусов:
  <span class="wo01-total-hl"><span class="wo01-total-num" id="widgop01-total-num">6 000</span> ₽</span>
  — для вас в подарок!</p>

Впишите сумму цен всех бонусов нового оффера в id="widgop01-total-num" (в примере выше 2000 + 1500 + 2500 = 6 000).

Шаг 8. Проверьте ссылки оферты/политики

Если у нового оффера другие юридические документы — обновите 3 ссылки в блоке чекбокса:

html
<a href="ССЫЛКА_ОФЕРТЫ_2" ...>публичной оферты</a>
<a href="ССЫЛКА_ПОЛИТИКИ_2" ...>политикой конфиденциальности</a>
<a href="ССЫЛКА_ОБРАБОТКИ_2" ...>обработки персональных данных</a>

Шаг 9. (Необязательно) Смените дизайн

Чтобы новый оффер визуально отличался — поменяйте тему:

javascript
const DESIGN = 'F';   // например синий для оффера №2

Шаг 10. Загрузите новый файл на сервер

Загрузите widgop02.html в папку widget (рядом со старым):

https://вашсайт.ru/widget/widgop02.html

Проверьте, что открывается напрямую в браузере.

Шаг 11. Вставьте iframe на страницу нового оффера

<iframe class=»calc-frame» style=»border: 0;» src=»/calc/widgop01.html» width=»100%» height=»600″ scrolling=»no»></iframe>

Вставьте iframe  строку для вывода виджета на страницу сайта, в которой поменяйте префикс widgop01.html на widgop02.html

Сохраните страницу сайта.

Продвижение товаров и услуг для онлайн продаж