HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью AJAX.
В скрипте реализованы три стадии защиты от «дураков». Возможно отправить только два сообщения с одного браузера. Сделано это специально, чтобы «приколисты» не могли бесконечно присылать сообщения в чат.
Посмотреть как работает: https://code.itikhonov.art
Куда прилетают сообщения: https://t.me/iartsorders
Создание и подключение бота: тут
Аналоги на PHP
Ранее я уже писал статью, как отправлять данные в Telegram с сайта с помощью PHP. Сложного ничего. Все строится на базе открытого API.
Подробнее про PHP: тут
HTML форма для jQuery
Форма писалась для модального окна под лендинг на WordPress. Отсюда и логика обработки. С минимальным количеством полей — номер телефона и необязательное текстовое поле для хотелок клиента.
Кастомные супер кнопки баннеры через HTML код в Таплинк
HTML код формы
- autocomplete — запрещаем автозаполнение формы
- placeholder — подсказка в каком виде нужно вписать номер телефона
- pattern — регулярное выражение, которым мы запрещаем все, кроме цифр
- maxlength — максимально 12 цифр
Технологии и способы защиты от спама
На самом деле защититься от фронтенд атак крайне сложно т.к. все скрипты хранятся в открытом виде, но простейшие решения все же есть. Они направлены на то, чтобы отбить у потенциальных «приколистов» желание спамить.
- Блокировка копирования, вставки и автозаполнения номера телефона.
- Валидация номера телефона (реализованы РФ номера).
- Блокировка повторной отправки формы.
- Фиксация отправок в cookies и ограничение попыток.
Обрабатываем клик по кнопке, получаем данные из форм и отправляем в Telegram с помощью jQuery Ajax
Для начала подключаем jQuery и плагин JS Cookies
В первую очередь нам необходимо обработать клик по кнопке и получить данные из форм. Кнопка выполнена ссылкой, чтобы не обновлялась страница.
При клике по кнопке, введенные в поля данные будут записаны в переменные, вызовется функция send_tg и будут отправлены данные в чат:
2. Проверим нашу форму на то, что отправка уже совершена, а страница еще не обновлялась. Также запишем факт отправка в Cookies
На первом этапе мы к кнопке добавили CSS класс «sent» и сразу после клика по кнопке начинаем проверять его наличие. Первый клик пропускает, но начиная со второго скрипт отсекает любые попытки выводя соответствующий текст
$(‘#datas-btn’).click(function()< // Очищаем поле с результатом $(‘p.ressult’).empty(); if($(‘#datas-btn’).hasClass(‘sent’))< $(‘p.ressult’).css(‘color’, ‘red’).append(‘Вы уже отправили заявку. Если была допущена ошибка — обновите страницу и отправьте заново.’); >else< // получаем данные из полей формы var f_phone = $(‘input.phone’).val(), f_descr = $(‘textarea.descr’).val(); // Проверяем корректность номера телефона (только РФ) if(f_phone == » || !validatePhone(f_phone))< $(‘p.ressult’).css(‘color’, ‘red’).append(‘Некорректно заполнен номер телефона’); >else< // Если Телефон корректный — выводим результат $(‘p.ressult’).css(‘color’, ‘red’).append(‘Заявка отправлена!
Виджеты соцсетей, Звонка, WhatsApp, Telegram, Instagram и другие ДЛЯ ТВОЕГО САЙТА
Мы свяжемся с вами в ближайшее время’); // Защита от «Дурака» 2. Вешаем метку в виде CSS класса и блокируем повторную отправку заявки $(‘#datas-btn’).addClass(‘sent’); // Заносим номер телефона и текст в куки Cookies.set(‘phone’, f_phone); Cookies.set(‘text’, f_descr); // Защита от «Дурака» 1. Даем две попытки на отправку заяявок. Фиксируем их в куках if(!Cookies.get(‘sent’))< Cookies.set(‘sent’, ‘1’); >else if(Cookies.get(‘sent’) == ‘1’) < Cookies.set(‘sent’, ‘2’); >> > >); // STATIC FUNCTIONS // Защита от «Дурака» 3. Блокируем возможность вставки в поле с номером телефона, дабы отбить желание спамить нам заявки $(‘input.phone’).bind(‘cut copy paste’, function (e) < e.preventDefault(); >); // Валидация телефона через регулярные выражения function validatePhone(phone)< let regex = /^(+7|7|8)?[s-]?(?[489][0-9])?[s-]?[0-9][s-]?[0-9][s-]?[0-9]$/; return regex.test(phone); >
3. Получаем Cookies и отсекаем спам рассылки
Также мы записали факт клика в cookies и присвоили ему значение «1». Бывает всякое и отправитель мог ошибиться. Поэтому дадим ему возможность отправить сообщение еще раз.
Третьей попытки уже не будет. Добавляем это условие и подключаем функцию отправки в Telegram:
Источник: devarts.pro
Кнопки «поделиться» для сайта
Рассмотрим, как добавить социальные кнопки «поделиться» для вашего сайта. Для решения данной задачи мы не будем использовать сторонние сервисы, поэтому наши кнопки «поделиться» не будут оказывать отрицательного влияния на загрузку сайта и будут стабильно работать.
.share-buttons < display: flex; flex-wrap: wrap; >.share-buttons a < margin-bottom: 5px; width: 40px; height: 40px; >.share-buttons a:not(:last-child) < margin-right: 5px; >.share-buttons .facebook < background: url(«../img/share-btns.png») no-repeat left top; >.share-buttons .vkontakte < background: url(«../img/share-btns.png») no-repeat -168px top; >.share-buttons .ok < background: url(«../img/share-btns.png») no-repeat -126px top; >.share-buttons .twitter < background: url(«../img/share-btns.png») no-repeat -42px top; >.share-buttons .pinterest < background: url(«../img/share-btns.png») no-repeat -210px top; >.share-buttons .mail < background: url(«../img/share-btns.png») no-repeat -294px top; >.share-buttons .telegram < background: url(«../img/share-btns.png») no-repeat -672px top; >
Так просто можно добавить кнопки «поделиться» на ваш сайт.
Благодаря тому, что мы писали весь код вручную, без использования сторонних сервисов, стилизовать кнопки можно как это необходимо.
Важно лишь верно заполнить ссылки, которые позволяют делится контентом текущей страницы.
Поделиться в фейсбук
https://www.facebook.com/sharer.php?u=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Поделиться вконтакте
https://vkontakte.ru/share.php?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
Поделиться в ok
https://www.odnoklassniki.ru/dk?st.cmd=addSharest._surl=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫАДРЕС_ИЗОБРАЖЕНИЯ»
Поделиться в twitter
https://twitter.com/intent/tweet?text=ТАЙТЛ_СТАТЬИ(ЗАГОЛОВОК). Описание. Ссылка
https://connect.mail.ru/share?url=ПОЛНЫЙ_АДРЕС_ТЕКУЩЕЙ_СТРАНИЦЫ
data-media=»АДРЕС_ИЗОБРАЖЕНИЯ»
Используя данные ссылки, вы можете создать виджет абсолютно любого вида и размера. Например, вместо спрайта что мы использовали ранее — можете воспользоваться шрифтовыми иконками fontAwesome:
И далее добавлять необходимые стили.
Чтобы подтягивались необходимые изображения ваших статей, используйте Open Graph разметку.
Поделиться в Linkedin
Чтобы поделиться в Linkedin используйте следующий код.
Создаем бесплатный callback-виджет с SMS и Telegram-оповещением
В этой статье мы пошагово создадим виджет обратного звонка с красивой минималистичной анимацией и отправкой уведомлений на почту, на свой номер телефона и в мессенджер Telegram через бота. Виджет подойдет абсолютно для любого сайта на HTML или на любой CMS.
Демонстрацию можно посмотреть по ссылке.
Зачем нужен callback-виджет?
Есть масса сервисов, которые предоставляют различные настраиваемые виджеты обратного звонка — с возможностью подключить АТС, интегрировать с CRM (amoCRM, Битрикс24), с оповещением в Telegram, по СМС и так далее. За такой богатый функционал нужно платить ежемесячно, покупать минуты или выбирать тариф по карману. Стоимость подобных виджетов стартует примерно от 200 рублей в месяц.
Используя виджет, о котором мы поговорим в этой статье, вы получите навечно бесплатное, независимое и настраиваемое под любые нужды решение — с возможностью отправки заявки на почту, в Telegram и по СМС. Также с помощью вебхуков можно подключить отправку данных в CRM (если есть такая возможность на стороне самой CRM).
Минус такого виджета – отсутствие возможности онлайн-звонка. Но, думаю, это не большой минус, а скорее плюс, так как часто менеджеры не успевают ответить на звонок, и компания получает негатив от потенциального клиента. А в случае с виджетом мы принимаем заявку, выводим сообщение о том, что перезвоним в течение определенного времени, и у клиента не возникает негатива. Поэтому минус виджета может быть и плюсом.
Итак, приступим к созданию виджета.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Разметка HTML + CSS
Так как виджет «сквозной» и устанавливается на все страницы, нам необходимо понимать, с какой страницы был заказан обратный звонок, чтобы оперативно помочь клиенту. Для этого нам понадобится скрытое поле в форме, которое будет передавать эту страницу, значение поле должно быть таким:
Если у вас одностраничный сайт или несколько страниц на HTML, измените расширение файла с .html на .php. Если устанавливаете на CMS , то все в порядке.
Второе скрытое поле будет передавать тему заявки — в данном случае это «Обратный звонок».
Теперь добавим небольшой скрипт открытия формы по клику на кнопку. Для этого нам понадобится подключить библиотеку jQuery и написать небольшой скрипт отправки. Если у вас уже подключена библиотека, то этого делать не стоит.
$(document).ready(function () < //Открытие виджета по клику jQuery(‘body’).on(‘click’, ‘.callback-button-phone’, function (e) < e.preventDefault(); jQuery(‘.widget-callback’).toggleClass(‘widget-callback-form-open’); >); >);
Далее оформим все с помощью CSS. Вы можете добавить этот код в свой файл стилей или создать новый.
Источник: timeweb.com