Перейти к основному содержимому

Установка кода на сайт

Подключение посадочной (лендинга) организовано безопасным способом: вы расставляете обычные ссылки на ТГ канал и размещаете специальный скрипт бота, который получаете при создании подключения.

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

Эта инструкция подойдет для большинства популярных конструкторов: Тильда, flexBy, tapLink, WordPress и другие.

Шаг 1 – установите скрипт.​

  • Разместите код, который вы получили при создании подключения.

  • Для Я.Директ: отдельно Я.Метрику можно не подключать – скрипт бота добавит её самостоятельно.

Шаг 2 – разместите ссылки на канал.​

На элементах интерфейса (кнопках) – поставьте ссылки на ваш канал согласно инструкции, полученной при создании подключения.

https://t.me/<ссылка_на_канал> – для перехода в конец канала
https://t.me/<ссылка_на_канал>/123 – для перехода на посадочный пост, где 123 – номер поста

подсказка
  1. Переход на посадочный пост возможен только для открытых каналов с публичной ссылкой.

Если на лендинге несколько кнопок или ссылок, которые ведут в канал, то убедитесь, что на них на всех ссылки как в инструкции по подключению.

подсказка
  1. C одного лендинга можно вести на разные посты. Достаточно изменять номер поста в конце ссылки.

Шаг 3 – опубликуйте страницу.​

Если всё сделано верно, то переход в канал с лендинга должен заработать.

Шаг 4 – проверьте подключение лендинга, всё ли в порядке.​

Направьте ссылку на ленд в бота - далее проверить подключение. Бот проверит и пришлёт отчёт.

Конструктор SaleBot​

Если ваш лендинг сделан на этом конструкторе, то кнопку перехода в телеграм канал нужно сделать самому на чистом HTML коде:

HTML блок с кнопкой:

HTML блок с кнопкой​

<div class="btnWrapper">
  <a href="https://t.me/ссылка_в_канал/номер_поста" target="_blank">
    <button class="toTg">Перейти в телеграм</button>
  </a>
</div>

CSS код​

.toTg {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 9px 20px; /* Отступы */
    font-family: 'Nunito', sans-serif;
    background-color: rgb(26, 83, 198); /* Основной цвет фона */
    color: white; /* Цвет текста */
    border-radius: 100px; /* Скругленные углы */
    text-align: center; /* Центровка текста */
    font-size: 14px; /* Размер шрифта */
    font-weight: normal; /* Толщина шрифта */
    cursor: pointer; /* Курсор при наведении */
    border: none; /* Убираем границу */
    position: relative; /* Положение для блика */
    overflow: hidden; /* Скрываем выходящий блик */
}

.toTg::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 50%;
    height: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
    pointer-events: none;
    animation: shine 2s linear infinite; /* Цикличная анимация блика */
}

@keyframes shine {
    0% {
        left: -150%; /* Начинаем с левой стороны */
    }
    100% {
        left: 150%; /* Заканчиваем на правой стороне */
    }
}

Конструктор GetCourse​

Если ваш лендинг сделан на конструкторе GetCourse, то выполните настройку для кнопки с переходом в канал.

  • Если ведёте в канал, вставьте в кнопку запуск скрипта.
  • Для Telegram вызывайте так:

TGTrack.goToChannel()

Кнопка с переходом в Telegram канал в конструкторе GetCourse
  • Если нужно на конкретный пост, вставьте в кнопку запуск скрипта с номером поста.
  • Для Telegram вызывайте так:

TGTrack.goToChannel(xxx)

Где xxx - номер поста.

Кнопка с переходом в Telegram канал

Конструктор LPMotor​

подсказка

Конструктор LPMotor имеет свою особенность: он вместо стандартных HTML ссылок использует собственные блоки с кодом обработки. Такие блоки скрипт бота не распознает как ссылки.

Если ваш лендинг сделан на этом конструкторе, то кнопки перехода в телеграм канал нужно сделать самому на чистом HTML коде: HTML блок с кнопкой:

<div class="buttonBlock">
  <a href="https://t.me/ccunka_a_kanan/номер_nocra">
    <div class="button">ПЕРЕЙТИ В ТЕЛЕГРАМ</div>
  </a>
</div>
.buttonBlock {
  text-align: center;
}

.buttonBlock .button {
  display: inline-block;
  margin: auto;
  background-color: blue;
  color: white;
  padding: 16px 32px;
  border-radius: 8px;
}