Форма "Захват телефона"
Возможность установить html код на любой сайт и захватывать номер телефона передавая сразу в бота.
Last updated
Возможность установить html код на любой сайт и захватывать номер телефона передавая сразу в бота.
Last updated
В некоторых случаях есть необходимость запрашивать номер телефона на сайте, мы разработали для этого код, благодаря ему телефон будет попадать сразу в списки контакта пользователя, который запустил бота.
Пример использования:
На сайте запрашивайте телефон у клиента, а затем при нажатии на кнопку его перебрасывает в бот.
Сморите пример такого сайта - https://cleverapp.store/9mistakes
Ниже представлен Html код, который можно установить на любой сайт, а так же на мини-лендинг созданные на нашей платформе CleverApp
<html>
<body>
<style>
#widget-form-phone {
display: flex;
padding: 3em;
box-sizing: border-box;
justify-content: center;
}
#widget-input-form-phone {
color: rgb(0, 0, 0);
border: 1px solid rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
font-size: 16px;
font-weight: 400;
height: 50px;
font-family: 'TildaSans', Arial, sans-serif;
margin: 0;
padding: 0 20px;
line-height: 1.33;
width: 300px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
#widget-button-form-phone {
padding: 0px 15px;
display: block;
width: 250px;
font-weight: 500;
height: 50px;
color: #fff;
border-radius: 0px;
border: none;
font-size: 20px;
font-family: 'TildaSans', Arial, sans-serif;
cursor: pointer;
background-color: #0056d3;
outline: none;
position: relative;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
}
/* Add media query for screen width smaller than 600px */
@media (max-width: 600px) {
#widget-form-phone {
flex-direction: column; /* Change flex direction to stack elements vertically */
align-items: center; /* Center elements in the column */
}
#widget-input-form-phone {
width: 100%; /* Full width for input in smaller screens */
margin-bottom: 10px; /* Add some spacing between the input and button */
}
#widget-button-form-phone {
width: 100%; /* Full width for button in smaller screens */
}
}
</style>
<form id="widget-form-phone" onsubmit="display()">
<input id="widget-input-form-phone" type="text" placeholder="+7(000)000-00-00"
pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$"
autocomplete="off" title="Номер телефона только цифрами" required>
<button id="widget-button-form-phone">
<div style="display: none; position: relative; top: 1px; margin-right: 5px;" id="widget-telegram-svg-icone">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-telegram"
viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"/>
</svg>
</div>
<span style="vertical-align: top;">Забрать чек-лист</span>
</button>
</form>
<script src="https://unpkg.com/imask"></script>
<script>
var settings = {
link: 'https://app.cleverapp.pro/w/D0i',
telegram_icon: true,
};
var element = document.getElementById('widget-input-form-phone');
var maskOptions = {
mask: '+7 (000) 000-00-00',
lazy: false
}
var mask = new IMask(element, maskOptions);
function display() {
var phone = document.getElementById("widget-input-form-phone").value;
if (phone) {
phone = cleanPhoneString(phone);
var currentUrl = window.location.href;
var paramsObject = getUtmParameters(currentUrl);
if (paramsObject) {
paramsObject = '&' + paramsObject;
}
var url = settings.link + '?' + "__phone__=" + phone + paramsObject;
window.location.replace(url);
}
event.preventDefault();
}
function getUtmParameters(url) {
var query = url.split('?')[1];
if (!query) return '';
var keyValuePairs = query.split('&');
var utmParams = {};
keyValuePairs.forEach(function (keyValue) {
var keyValuePair = keyValue.split('=');
var key = keyValuePair[0];
var value = keyValuePair[1];
if (key.startsWith('utm_')) {
utmParams[key] = value;
}
});
var utmParamsArray = Object.keys(utmParams).map(function (key) {
return key + '=' + utmParams[key];
});
var utmParamsString = utmParamsArray.join('&');
return utmParamsString ? utmParamsString : '';
}
function cleanPhoneString(phone)
{
phone = phone.replaceAll('(', '');
phone = phone.replaceAll(')', '');
phone = phone.replaceAll(' ', '');
phone = phone.replaceAll('-', '');
return phone;
}
</script>
</body>
</html>Изменить текст кнопки и ссылку на бота можно легло в самом коде, смотрите фото ниже
