Что такое Telegram-бот для обратной связи?
Это система, которая позволяет получать сообщения от пользователей вашего сайта прямо в Telegram. Это удобнее email-уведомлений, так как сообщения приходят мгновенно и доступны на всех устройствах.
Пошаговая инструкция
1. Создание Telegram бота
- Найдите @BotFather в Telegram
- Отправьте команду /newbot
- Следуйте инструкциям для создания бота
- Сохраните полученный токен бота (например: 1234567890:AAHfiqksKZ0YhBGRYm1vGwJk2PHBl6BWrm0)
- Создайте новый канал в который будут приходить сообщения и добавьте в него бота как администратора
- Получите ID вашего чата(канала) через @userinfobot (нужно переслать сообщение из вашего чата в @userinfobot). ID начинается со знака “–“.
2. Создание HTML формы
<form id="feedbackForm" class="feedback-form">
<input type="text" name="name" placeholder="Ваше имя" required>
<input type="email" name="email" placeholder="Email" required>
<textarea name="message" placeholder="Сообщение" required></textarea>
<!-- Защита от спама -->
<div class="captcha-container">
<img id="captchaImage" src="/api/generate_captcha.php">
<button type="button" id="refreshCaptcha">Обновить капчу</button>
<input type="text" name="captcha" placeholder="Введите код" required>
</div>
<button type="submit">Отправить</button>
</form>
3. Создание PHP обработчика (api/send_telegram.php)
<?php
session_start();
// Проверка CSRF и капчи
if (!isset($_POST['captcha']) || $_POST['captcha'] !== $_SESSION['captcha']) {
echo json_encode(['success' => false, 'error' => 'Неверный код капчи']);
exit;
}
// Конфигурация
$config = [
'bot_token' => 'YOUR_BOT_TOKEN',
'chat_id' => 'YOUR_CHAT_ID',
'api_url' => 'https://api.telegram.org/bot'
];
// Подготовка данных
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
$page_url = htmlspecialchars($_POST['page_url']);
// Формируем сообщение
$text = "📨 Новое сообщение с сайта\n\n";
$text .= "👤 Имя: $name\n";
$text .= "📧 Email: $email\n";
$text .= "💬 Сообщение: $message\n";
$text .= "🔗 Страница: $page_url\n";
// Отправка в Telegram
$params = [
'chat_id' => $config['chat_id'],
'text' => $text,
'parse_mode' => 'HTML'
];
$ch = curl_init($config['api_url'] . $config['bot_token'] . '/sendMessage');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
$result = curl_exec($ch);
curl_close($ch);
// Возвращаем результат
echo json_encode(['success' => true]);
4. Генерация капчи (api/generate_captcha.php)
<?php
session_start();
// Создаем изображение
$image = imagecreatetruecolor(120, 40);
$bg = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
// Заполняем фон
imagefilledrectangle($image, 0, 0, 120, 40, $bg);
// Генерируем код
$code = substr(md5(uniqid()), 0, 6);
$_SESSION['captcha'] = $code;
// Добавляем шум
for($i = 0; $i < 1000; $i++) {
$x = rand(0, 120);
$y = rand(0, 40);
imagesetpixel($image, $x, $y, $text_color);
}
// Рисуем текст
imagettftext($image, 20, 0, 15, 30, $text_color, 'path/to/font.ttf', $code);
// Выводим изображение
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
5. JavaScript для отправки формы
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('feedbackForm');
const refreshCaptcha = () => {
const captchaImg = document.getElementById('captchaImage');
captchaImg.src = '/api/generate_captcha.php?' + new Date().getTime();
};
document.getElementById('refreshCaptcha').onclick = refreshCaptcha;
form.onsubmit = async function(e) {
e.preventDefault();
const formData = new FormData(this);
try {
const response = await fetch('/api/send_telegram.php', {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
alert('Сообщение отправлено!');
this.reset();
refreshCaptcha();
} else {
alert('Ошибка: ' + result.error);
refreshCaptcha();
}
} catch (error) {
console.error('Error:', error);
alert('Ошибка отправки');
refreshCaptcha();
}
};
});
6. CSS стили
.feedback-form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
.feedback-form input,
.feedback-form textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.captcha-container {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.captcha-container input {
width: 100px;
}
button {
background: #0063B2;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #004c8c;
}
Структура файлов
feedback/
├── index.html # Страница с формой
├── css/
│ └── feedback.css # Стили формы
├── js/
│ └── feedback.js # Обработка формы
└── api/
├── send_telegram.php # Отправка в Telegram
└── generate_captcha.php # Генерация капчи
Безопасность
Защита от спама:
- Капча
- Проверка заголовков
- Ограничение частоты запросов
Конфигурация PHP:
// Добавьте в .htaccess
<FilesMatch "^(send_telegram|generate_captcha)\.php$">
Order Allow,Deny
Allow from all
# Только AJAX запросы
SetEnvIf X-Requested-With "XMLHttpRequest" allow_xhr
Allow from env=allow_xhr
</FilesMatch>
Защита токена бота:
- Храните токен в отдельном конфиг-файле
- Не публикуйте токен в репозитории
- Используйте переменные окружения
Заключение
Telegram-бот для обратной связи – это:
- Мгновенные уведомления
- Удобное управление сообщениями
- Доступность на всех устройствах
- Простота интеграции
При реализации важно:
- Обеспечить безопасность
- Защитить от спама
- Сделать удобный интерфейс
- Обрабатывать ошибки
Добавить комментарий