Применим на практике скрипт с коробками для Landing Page от Жёлтого Веба, который повышает процент перехода к форме заказа и мотивирует оставить заявку.

Также вместо коробок можно использовать рулетку: https://cpa.rip/stati/roulette-script/

Для Европы его использовать нельзя:

Содержание

1. Бесплатная скачивалка Landing Page

2. Скрипт GiftBoxes от Жёлтого Веба

2.1. Что умеет

2.2. Как подключить

2.3. Как настроить

2.4. Решение возможных проблем

3. Скрипт рулетки

Бесплатная скачивалка Landing Page

Скачаем понравившийся лендинг с помочью нашей скачивалки Landing Page — там же доступна подробная инструкция по работе с ним.

Наш скачанный ленд (локально дизайн может плыть, на серваке будет открываться 1в1 как в оригинале):

Скрипт GiftBoxes от Жёлтого Веба

Далее скачаем готовый скрипт коробок с github: https://github.com/dvygolov/YWB.GiftBoxes.JS

Скрипт был доработан автором для удобства подключения и использования.

Что умеет

поддерживается 2 стиля коробок: обычные и покрасивее. Вы можете заказать вашему дизайнеру любые картинки коробок и кинуть их в папку bimg, назвав их также, как файлы, лежащие там, добавив в конец порядковый номер. Типа: closed3.png, opened3.png и т.д.

скрипт не вставляет свою форму, вы можете использовать его на любом ленде, где УЖЕ есть форма. Достаточно указать селектор этой самой формы и скрипт автоматом её скроет до момента открытия пользователем «выигрышной» коробки.
скрипт автоматом подменяет все ссылки с якорями, чтобы скролл шёл к блоку коробок, а не к скрытой скриптом форме.

Как подключить

Откройте архив со скачанным лендом и найдите файл index.php

в нем должен быть подключен JQuery

Если не подключен необходимо сделать это самостоятельно. Можно подгружать напрямую с code.jquery.com, прописав следующую строчку <script src="https://code.jquery.com/jquery-3.6.0.min.js"> (версия библиотеки по обстоятельствам).

после чего закиньте файлы скачанного скрипта коробок в корень лендинга:

и подключите скрипт, прописав на него ссылку <script src="ywbboxes.js"></script>:

Найдите в коде лендинга форму отправки лидов и прямо перед ней добавьте тег <div> и задайте ему какой-нибудь id, например <div id="boxesMain"></div>

у формы (или всего блока, внутри которого болтается форма) тоже должен быть свой id, например formMain

Как настроить

Добавьте на страницу код который приведен ниже и настройте его под себя

</div>
<script>
initBoxes({
selectors:{
boxes:"#boxesMain",
form:"#formMain"
},
texts:{
instructions: "Click on any box and try to find one with a 50% discount ?",
lastTry:["Warning!","This is your LAST TRY."],
congratulations:["Congratulations!","You can order the product with a 50% discount!"]
},
product:{
price: 1990,
currency:"$"
},
style:2
});
</script>

По факту вся настройка сделана в духе скрипта Drewlex и идёт через метод initBoxes. Задаются 2 селектора: для блока коробок ("#boxesMain") и для формы ("#formMain").
Далее задаются тексты: для заголовка блока коробок, и для каждого сообщения. Также задаётся цена и валюта товара. Ну и последний блок — это порядковый номер стиля

Готово! Проверяем. Вместо формы заказа на лендинге появился блок с коробочками. После «игры» с ними юзеру выдается сообщение о победе/скидке и появляется форма заказа.

Решение возможных проблем

В некоторых случаях могут возникнуть проблемы с отображением и функционированием скрипта коробочек. Например на него могут влиять css стили самого лендинга. В нашем случае одновременно отображались и закрытые и открытые коробки:

Чтобы найти стиль который мешает переходим к просмотру кода элемента. Выделяем коробочку и смотри какие стили на него влияют. Красным выделены файлы стилей лендинга. Пробуем отключать пока не найдем виновника:

Виновник найден. Это display: block; в 181 строке файла style_9503_2.css. При этом важно, чтобы отключение этого параметра не ломало сам лендинг. Убираем найденный параметр.