Облако ссылок Добавить сайт Опубликовать Пользователи Категории

Сервис полезной информации


Размещайте полезную информацию и одновременно продвигайте свои проекты.


Узнать больше

Как создать модуль онлайн консультации с использованием чата на ajax и php


X

Как создать модуль онлайн консультации с использованием чата на ajax и php

В этой статье речь пойдет о создании вот такого открывающегося чат-окна на ajax и php, которое привлекает внимание потенциального клиента и получает от него номер телефона и e-mail адрес.

 

Окно открывается по щелчку, или автоматически спустя 15 секунд нахождения на сайте.

 

После отправки сообщения оно сохраняется в базе данных, затем выводится сообщение с просьбой предоставить номер телефона и e-mail, которые тоже останутся в базе данных.

 

После успешной отправки, пользователь увидит сообщение о том, что его заявка принята и ожидает рассмотрения:

 

Если же пользователь попытается отправить пустое сообщение, то увидит сообщение об ошибке:

 

Для начала создадим файл index.php, в котором создадим html-каркас нашего окна:

<html>
 <head>
     <link rel="stylesheet" href="css/style.css" type="text/css">
     <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
     <script type="text/javascript" src="js/custom.js"></script>
 </head>
 <body>
   <div class="open_modal"><p> <img src="user-img.jpg" style="width:42px; height:42px; float:left; border-radius:100%;">
<img src="online.png" style="width:10px; height:10px; display:inline-block;"> <span style="text-shadow:1px 1px 1px #444;">Менеджер Алексей</span><br> <span style="color:#c3f99c; font-size:12px; ">[ в сети ]</span>
</p></div>
   <div class="overlay"></div>
   <div class="popup">
       <div class="close_modal">x</div>
       <form class="fofm" action="">
           <h5>
      <img src="user-img.jpg" style="width:40px; height:40px; float:left; border-radius:100%; margin-right:10px;">
      <img src="online.png" style="width:10px; height:10px; display:inline-block;"><span style="text-shadow:1px 1px 1px #444;">Менеджер Алексей</span>
      </h5><br>
      <div id="vop1"><br><i>Алексей</i></div><br>
      <div id="result">
      </div>
      <br>
      <div id="otv1">
         <br><i style="display:inline-block; float:right; font-size:12px; padding-top:5px;">Алексей</i>
      </div>
      <br>
      <div id="otv2">
         <br><i>Алексей</i>
      </div>
      <div id="otv3">
        <input  class="txt2email" type="email" placeholder="Email*" name="txtemail" style="width:90%"><br>
         <input  class="txt2phone" type="tel" pattern="^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" placeholder="Телефон*" name="txtphone" style="width:90%">
         <input class="txt2message" type="text" name="txt2message" value="" id="mess" style="width:90%">
        
      <input type="button" class="button" value="Отправить" name="ret2">
      </div>
      <div id="p2" style="display:block;">  
         <textarea name="txtmessage" placeholder="Введите сообщение*" rows="10"></textarea>

           <label><input type="checkbox">Я хочу отправить сообщение</label>
           <input type="hidden" name="valTrFal" class="valTrFal" value="valTrFal_disabled">
          <input type="submit" class="button" value="Отправить" disabled="disabled" name="btnsend">
      </div>
       </form>
   </div>

       <div class="popup2">
   <div class="close_modal">x</div>
       <div class="window">
          <div class="insText">
      <h5>
      <img src="user-img.jpg">
<span></span> Менеджер Алексей
</h5><br>
      <p>
      <div class="i_div">
         Ваш запрос принят и находиться в обработке, наши менеджеры свяжуться с Вами в ближайшее время. Спасибо, что выбрали нашу кампанию.
         <br><i>Алексей</i>
      </div>
      <br><br>
      <div class="i_div">
         Предлагаем ознакомиться с следующими разделами сайта:
               <a href="http://imperial03.ru/delivery.php">Доставка продукции</a>,
               <a href="http://imperial03.ru/video.php">Видео обзоры</a>,
               <a href="http://imperial03.ru/news.php">Новости</a>,
               <a href="http://imperial03.ru/opt.php">Оптовые закупки</a>.
         <br><i>Алексей</i>
      </div>
          </div>
       </div>
   </div>
 </body>
 </html>

 

Не забываем подключить библиотеку jquery версией не ниже 1.7.2. Подключаем файл-обработчик custom.js. Его мы создадим позднее.

Также для отображения дизайна и анимации обязательно создаем файл style.css. Добавляем в него следующее содержимое:

@charset "utf-8";
.popup input,
textarea {
    padding: 8px 8px;
    border: 1px solid #E0D6D6;
    border-radius: 5px;
    display: block;
    background: #FFFFFF;
    margin-top: 6px;
    color: #333;
    font: 14px/18px Verdana, Arial, sans-serif;
}

.popup input[type="submit"] {
    color: #fff;
    border: 1px solid #d6942d;
    font-size: 14px;
    margin-top: 6px;
    background: #FFFFFF;
    text-decoration: none;
    display: block;
    cursor: pointer;
    padding: 4px;
    height: 30px;
}

input[type="submit"]:disabled{
    opacity: .7;
}



.open_modal{
   position:fixed;
   bottom:0px;
   right:20px;
   z-index:777777;
}

.open_modal p {
    background: #1D7C79;
    border-top-left-radius: 3px;
   border-top-right-radius: 50px;
   border-right:8px solid #67CE9E;
    padding: 10px 10px 10px 10px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin: 0 0 0 0;
   text-align:center;
    display: block;
    width: 230px;
}



.popup, .popup2{
    display: inline-block;
    position: fixed;
    text-align: justify;
   background:#fff;
   bottom:0px;
   right:20px;
    visibility: hidden;
    z-index: 999999;
}

.popup form {
    padding: 0 27px 20px;
    right: 0;
    width: 250px;
   background:#fff;
    border-top-left-radius: 5px;
    border: 0px solid #ececec;
   box-shadow: 0 0 20px rgba(93,93,93,0.5);
    border-top: 40px solid #1D7C79;
}

.popup2 .window {
    padding: 0 27px 27px;
    right: 0;
    width: 373px;
    background:#fff;
   font-size:14px;
    border-radius: 5px;
    border: 0px solid #1D7C79;
    border-top: 40px solid #1D7C79;
   box-shadow: 0 0 20px rgba(93,93,93,0.5);
}

.popup form input {
    background: #fff;
    margin-top: 8px;
    width: 227px;
}

.popup form input[name="txtname"]{
    margin-top: 20px;
}

.popup form textarea {
    background: #fff;
    margin-top: 8px;
    width: 227px;
    height: 100px;
    resize: none;
}

.popup form label{
    width: 100%;
    height: 20px;
    display: block;
    margin: 8px -2px;
    padding: 0;
}

.popup form input[type="submit"] {
    background: #1D7C79;
    text-align: center;
    text-transform: uppercase;
    width: 245px;
}

.popup form input[type="checkbox"] {
    width: auto;
    margin: 2px;
    padding: 2px;
    float: left;
}

.popup form h5 {
    position: absolute;
    top: 10px;
    left: 29px;
    font-size: 16px;
    color: white;
    font-weight: normal;
    margin: 0;
}

.popup .close_modal,
.popup2 .close_modal  {
    position: absolute;
    padding: 1px 9px 4px 9px;
    top: -15px;
    right: -15px;
    cursor: pointer;
    color: #fff;
    font-family: 'tahoma', sans-serif;
    background: #1D7C79;
    text-align: center;
}

.popup2 h5 {
   position: absolute;
   top: 10px;
   left: 120px;
   font-size: 18px;
   color: white;
   font-weight: normal;
    margin: 0;
}

.popup2 p {
   font-family: verdana;
   font-size: 18px;
   line-height: 24px;
   text-align: center;
}

.popup2 p strong{
   font-size: 26px;
   line-height: 30px;
   font-weight: normal;
   display: block;
}

.popup2 hr {
   background: #63baff;
   height: 1px;
   border: none;
}



#result{
    display:none;
    background:#DBEAEA;
    border-radius:5px;
    border:1px solid #f6f6f6;
    padding:5px 5px 5px 5px;
    font-family: Arial,sans-serif;
    color: #3d3d3d; 
    font-size:15px;
}



#otv1{
    display:none; background:#DBEAEA;
    border-radius:5px;
    border:1px solid #f6f6f6;
    padding:5px 5px 5px 5px;
    font-family: Arial,sans-serif;
    color: #3d3d3d; font-size:15px;
}



#vop1{
    display:none;
    background:#DBEAEA;
    border-radius:5px;
    border:1px solid #f6f6f6;
    padding:5px 5px 5px 5px;
    font-family: Arial,sans-serif;
    color: #3d3d3d; font-size:15px;
}



#vop1 i{
    display:inline-block;
    float:right; font-size:12px;
    padding-top:5px;
}



.insText span{
    background:#67CE9E;
    border-radius:100%;
    width:10px;
    height:10px;
    display:inline-block;
}



.insText img{
    width:40px;
    height:40px;
    float:left;
    border-radius:100%;
    margin-right:10px;
}



.i_div{
    background:#DBEAEA;
    border-radius:5px;
    border:1px solid #f6f6f6;
    padding:5px 5px 5px 5px;
    font-family: Arial,sans-serif;
    color: #3d3d3d;
    font-size:15px;
}



.i_div i{
    display:inline-block;
    float:right;
    font-size:12px;
    padding-top:5px;
}



#otv3{
    display:none;
    background:#DBEAEA;
    border-radius:5px;
    border:1px solid #f6f6f6;
    margin-top:-5px;
    padding:5px 5px 5px 5px;
    font-family: Arial,sans-serif;
    color: #3d3d3d; 
    font-size:15px;
}



#otv2 i{
    display:inline-block;
    float:right;
    font-size:12px;
    padding-top:5px;
}



#otv2{
    display:none;
    background:#DBEAEA;
    border-radius:5px;
    border:1px solid #f6f6f6;
    padding:5px 5px 5px 5px;
    font-family: Arial,sans-serif;
    color: #3d3d3d; font-size:15px;
}

 

На этом работа с оформлением закончена.

Теперь создадим обработчик custom.js. Добавляем в него следующие строки:

jQuery(document).ready(function($){
$('.fofm input[type=button]').click(function() {
$.ajax({
         type: "POST",
         url: "/contact.php",
         data: {
         txt2email: $('.txt2email').val(),
         txt2phone: $('.txt2phone').val(),
         txt2message: $('.txt2message').val()
         },

         success: function(msg) {
            if(msg == 'ok') {
               $('.popup2, .overlay').css('opacity','1');
               $('.popup2, .overlay').css('visibility','visible');
               $('.popup').css({'opacity':'0','visibility':'hidden'});

            } else {
               $('.popup2 .window').html('<h5>Ошибка</h5><p>Сообщение не            отправлено, убедитесь в правильности заполнение полей</p>');
               $('.popup2, .overlay').css('opacity','1');
               $('.popup2, .overlay').css('visibility','visible');
               $('.popup').css({'opacity':'0','visibility':'hidden'});
            }
         }
});

});

 

.ready запускает function($) когда страница полностью загрузится. Создаем обработчик нажатия .click. С помощью метода post передаем данные с трех полей: почты, номера телефона и само текстовое сообщение, их мы подбираем по имени класса и возвращаем с помощью .val. Обработка данных происходит в файле contact.php, его мы разберем немного позднее. Функция success запускается после успешного завершения запроса. Если contact.php вернул значение “ok”, то блок «popup2» (сообщение об успешной отправке данных) начинает отрисовываться через css. Блок ввода сообщения “popup” же наоборот перестает отрисовываться, тем самым происходит смена окон. Если же сообщение “ok” не получено, следовательно запрос не прошел, то в блоке “popup2” формируется текст «Сообщение не отправлено, убедитесь в правильности заполнения полей», затем этот блок отрисовывается, а предыдущий “popup” скрывается.

 

Продолжим наполнение файла:

$(document).on('change', '.fofm input:checkbox', function() {
   if($(this).is(':checked')){
      $(".fofm input[type=submit]").removeAttr('disabled');
      $('.fofm input[type=hidden].valTrFal').val('valTrFal_true');
   }
   else {
      $(".fofm input[type=submit]").attr('disabled','disabled');
      $('.fofm input[type=hidden].valTrFal').val('valTrFal_disabled');
   }
});

 

Данная функция проверяет, активирован ли чекбокс, и в зависимости от этого добавляет ему атрибут valTrFal_true или valTrFal_disabled, которые будут использоваться в файле contact2.php. В результате его выполнения у пользователя будет появляться возможность отправить сообщение при активации чекбокса.

//закрытие модального окна
$('.close_modal, .overlay').click(function (){
   $('.popup, .popup2, .overlay').css({'opacity':'0', 'visibility':'hidden'});
   $('.popup > .fofm textarea').val('');
   //сброс всех полей формы обраной связи
   $(':input','.fofm').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
   $(".fofm input[type=submit]").attr('disabled','disabled');
});

 

Функция закрытия модального окна срабатывает по клику на символ “Х”. При этом происходит обнуление заполненных полей, восстановление проверяющего чекбокса и возвращение первоначальных атрибутов для всех остальных элементов.

//показ модального окна
$('.open_modal').click(function (e){
   e.preventDefault();
   $('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
});

 

Функция .preventDefault() отменяет стандартное событие клика. Переназначаем событие смены параметров окна opacity и visible, чтобы отрисовать наше окно.

$(document).ready(function()
{
setTimeout(function()
{
$('.popup, .overlay').css({'opacity':'1', 'visibility':'visible'});
var audio = new Audio(); // Создаём новый элемент Audio
   audio.src = 'js/notify.mp3'; // При работе с фреймом. Указываем путь к звуку "клика"
   audio.autoplay = true; // Автоматически запускаем
   $('#vop1').html('Здравствуйте! Чем я могу вам помочь?');
      setTimeout(function() { $("#vop1").show('slow'); }, 1000);
}, 7000);
});

 

После полной загрузки страницы нужно открыть окно чата через 7 секунд (7000 милисекунд). При этом привлечем его внимание звуковым сигналом. Для этого нужно создать элемент audio, и прописать путь к звуковому файлу. Также впишем внутрь еще одну такую же функцию, через нее отрисуем первое сообщение от менеджера, с задержкой в 1 секунду после выполнения предыдущей функции.

$(".fofm").submit(function() {
      var str = $(this).serialize();
      $.ajax({
         type: "POST",
         url: "contact2.php",
         data: str,
         success: function(msg) {
            if(msg) {
               // Выдернуть из базы его сообщение и показать
               var data = $('#mess').val(msg);
               $('#result').html(msg);
               setTimeout(function() { $("#result").show('slow'); }, 1000);
               $('#otv1').html('Пожалуйста, подождите одну минуту, я обработаю вашу заявку. Не закрывайте чат.');
               setTimeout(function() { $("#otv1").show('slow'); }, 5000);
               $('#otv2').html('К сожалению, сейчас я не могу Вам ответить на ваше сообщение, пожалуйста, напишите' +
                  ' Ваш e-mail и телефон для дальнейшей связи с Вами, после обработки заявки я сразу свяжусь с Вами.');
               setTimeout(function() { $("#otv2").show('slow'); }, 15000);
               setTimeout(function() { $("#otv3").show('slow'); }, 15000);
               setTimeout(function() { $('#p2').css({'display':'none'}).hide('slow'); }, 15000);
            }
            else {
               $('.popup2 .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
               $('.popup2, .overlay').css('opacity','1');
               $('.popup2, .overlay').css('visibility','visible');
               $('.popup').css({'opacity':'0','visibility':'hidden'});
            }
         }
      });
      return false;
   });
});

 

Эта функция срабатывает при отправке первого сообщения клиента в чат. При этом происходит post-запрос и вызов обработчика contact2.php. В нем будет происходить добавление сообщения в базу данных. Сразу же происходит отрисовка этого сообщения в чат, затем запускается функция-таймер. Через секунду после отправки пользователь увидит сообщение «Пожалуйста, подождите минуту, я обработаю вашу заявку. Не закрывайте чат». После вывода этого сообщения еще через 5 секунд запускаем вторую функцию-таймер, которая  предложит пользователю оставить свои данные в блок otv3. Если от обработчика contack2.php  не получен msg, то в блок “popup2” отрисовывается текст о том, что сообщение не отправлено, тк поля не заполнены, после этого идет отрисовка самого блока “popup2” и скрытие предыдущего блока “popup”.

Теперь рассмотрим обработчики.

Для начала нужно создать файл contact.php и наполнить его:

<?php
function send_email($email, $phone, $message) {
    $date_time_string = date('d.m.Y h:i:s');
$name = 'Аноним';
// Разбиение строки в 3 части - date, time and AM/PM
    $dt_elements = explode(' ',$date_time_string);
// Разбиение даты
    $date_elements = explode('.',$dt_elements[0]);
// Разбиение времени
    $time_elements =  explode(':',$dt_elements[1]);
// Если у нас время в формате PM мы можем добавить 12 часов для получения  24 часового формата времени
    $time_elements[0] = $time_elements[0]+5;
// вывод результата
    $date = $time_elements[0].':'.$time_elements[1].':'.$time_elements[2].' '.$date_elements[0].'.'.$date_elements[1].'.'.$date_elements[2];
    // от кого
    $fromMail = $email; // адрес почтового отправителя
    $fromName = 'Заявка';
    // Сюда введите Ваш email
    $emailTo = 'manager@imperial03.ru'; // адрес получателя
    $subject = 'Заявка '.$phone.' '.$date; // ТЕМА ПИСЬМА
    $subject = '=?utf-8?b?'. base64_encode($subject) .'?=';
    $headers = "Content-type: text/plain; charset=\"utf-8\"\r\n";
    $headers .= "From: ". $fromName ." <". $fromMail ."> \r\n";
    // тело письма
    $body = "Получено письмо с сайта imperial03.ru\n
 Имя: $name\n
 E-mail: $email\n
 Телефон: $phone\n
 Сообщение: $message\n
 ";
    $mail = mail($emailTo, $subject, $body, $headers, '-f'. $fromMail );
   // Клиенту говорим что заявка в обработке
   // от кого
         $fromMail1 = 'manager@imperial03.ru'; // адрес почтового отправителя
         $fromName1 = 'Менеджер Алексей';
         // Сюда введите Ваш email
         $emailTo1 = $email; // адрес получателя
         $subject1 = 'Imperial03.ru | Ваша заявка в обработке '; // ТЕМА ПИСЬМА
         $subject1 = '=?utf-8?b?'. base64_encode($subject1) .'?=';
         $headers1 = "Content-type: text/plain; charset=\"utf-8\"\r\n";
         $headers1 .= "From: ". $fromName1 ." <". $fromMail1 ."> \r\n";
         // тело письма
         $body1 = "Ваша заявка находиться в обработке, ждите ответа. В ближайшее время наш менеджер свяжеться с Вами.\n
         -------------------------------------------------------------------------------------------------------------\n
         Имя: $name\n
         E-mail: $email\n
         Телефон: $phone\n
         Сообщение: $message\n
         -------------------------------------------------------------------------------------------------------------\n
         Спасибо что выбрали нашу кампанию!!!\n
         Тел: 8 (3012) 67-67-27\n
         Сайт: http://imperial03.ru\n";
         $mail1 = mail($emailTo1, $subject1, $body1, $headers1, '-f'. $fromMail1 );
//*******//
    if($mail and $mail1) {
      // lo ---- cal -- ll
      $db = mysql_connect ("localhost","imperial","14253647a");
      mysql_select_db ("imperial",$db);
      mysql_set_charset('utf8');
     
      $zakaz = mysql_query ("INSERT INTO forma_link (name,email,phone,message,date) VALUES('$name','$email','$phone','$message','$date')");

      echo 'ok';
    }
}
//проверяем значения полученые при проверке скриптом формы
      $email = trim($_POST['txt2email']);
      $phone = trim($_POST['txt2phone']);
      $message = trim($_POST['txt2message']);
      send_email($email, $phone, $message);
//}

?>

 

Данный обработчик получает три поля с почтой, номером телефона и сообщением от клиента, очищает их от случайных пробелов в начале и конце строки, и отправляет их в функцию send_email(). Данная функция формирует текстовое email сообщение, которое будет отправлено на заданный адрес. При этом оно встраивает в сообщение дату его обработки в 24-х часовом формате. Кроме того, сообщение также сохраняется в базе данных в таблице forma_link. Если запрос проходит успешно, то через echo возвращается “ok”. Если “ok” не возвращен выводится сообщение об ошибке (описано выше).

Теперь разберем работу файла contacts2.php

<?php
function send_message($message) {
      $date = date('d.m.Y h:i:s');
      $db = mysql_connect ("localhost","imperial","14253647a");
      mysql_select_db ("imperial",$db);
      mysql_set_charset('utf8');
      $zakaz = mysql_query ("INSERT INTO forma_anonim (message,date) VALUES('$message','$date')");
      echo $message;
}

//проверяем значения, полученные при проверке скриптом формы
if (trim($_POST['valTrFal'])!='valTrFal_true') {
   echo 'fasle';
}
else {
      $name = trim($_POST['txtname']);
      $email = trim($_POST['txtemail']);
      $phone = trim($_POST['txtphone']);
      $message = trim($_POST['txtmessage']);
      send_message($message);
}
?>

 

С помощью post-запроса данная файл проверяет, активирован ли чекбокс и возвращает в custom.js значение, согласно которому будет (не будет) срабатывать функция отправки сообщения. Функция send_message отправляет считанные с fofm,  введенные клиентом данные (адрес почты, номер телефона, текстовое сообщение) в базу данных.

exp1 Просмотров сегодня +4 28 июня 2017
Реклама помогает поддерживать
и развивать наш сервис.


Подробнее
(ссылка откроется в новой вкладке)
  Реклама