Кейс: кастомизация для обзвона с оператором

Интересный кейс подготовил наш отдел разработки. Для одного из клиентов наши специалисты реализовали систему автоматического обзвона с переключением на оператора. Это распространённое решение среди наших клиентов, необычной стала разработка специального окна, содержащего информацию для оператора о абоненте.

Информационное окно оператора

Суть конфигурации

Call Office производит автоматический обзвон, при этом программа установлена на компьютере оператора. В момент соединения, программа переключает связь на звуковую карту и открывает специальное окно, в котором можно внести и сохранить статус звонка и назначить дату повторного звонка. Внесённые данные сохраняются в локальную базу данных.

Стандартные средства записи результата звонка были отключены, сохранение данных в БД было реализовано командами. В зависимости от выбранного оператором статуса звонка, активировалась соответствующая команда и записывала результат SQL-запросом.

Информационное окно в этом решении содержит простейшую форму с возможностью выбора статуса звонка из выпадающего списка. Если выбран статус, предполагающий повторный контакт — открывается дополнительное поле формы, позволяющее выбрать дату (так называемый DatePicker).

Код информационного окна

На случай, если это решение заинтересовало вас, мы выкладываем код формы, вы можете кастомизировать его и использовать в собственной конфигурации.

JavaScript-код:

<script>
                   // jQuery уже подключен, поэтому можно подключать дополнительны стили и скрипты так:

//   $('head').append ('<link rel="stylesheet" href="путь до css файла">');
//   $('head').append ('<script src="путь до js файла">');

	function Show (Id, IsShow)
	{
      document.getElementById (Id).style.display = (IsShow)? 'block': 'none';
   }

   function OnSelect (Select)
   {
      Show ('DivComment', false);
      Show ('DivDateOkonchaniaStrahovki', false);
      Show ('DivDateTimePerezvonit', false);

switch (Select.value) {

         case 'ZastrahDate':
            Show ('DivDateOkonchaniaStrahovki', true);
            break;

         case 'NaRaschet':
            Show ('DivComment', true);
            break;

         case 'ShortPerezvonLess2Days':
         case 'LongPerezvonMore2Days':
            Show ('DivDateTimePerezvonit', true);
            break;
      }
   }

   function SetCurrentDate (Id)                           // Устанавливаем текущую дату
   {
      var CurrentDate = new Date ();

      Id.val (CurrentDate.getDate () + '.' + (CurrentDate.getMonth () + 1) + '.' + CurrentDate.getFullYear ());
   }

   function SetCurrentDateTime (Id)
   {
      var CurrentDate = new Date ();

      Id.val (CurrentDate.getDate () + '.' + (CurrentDate.getMonth () + 1) + '.' + CurrentDate.getFullYear () + ' ' +
              CurrentDate.getHours () + ':' + CurrentDate.getMinutes () + ':' + CurrentDate.getSeconds ());
   }

   function CheckDate (Id)                                // Функция проверки даты
   {
      var Value = Id.val ();
      if (Value == '') return true;

      var Reg = /^(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{2}|\d{4})$/.exec (Value);

      if (Reg !== null) {

         var Day   = Reg[1];
         var Month = Number (Reg[2] - 1);
         var Year  = Reg[3].length == 2 ? '20' + Reg[3] : Reg[3];

         var CheckDate = new Date (Year, Month, Day);

         if (CheckDate.toString    () !== 'Invalid Date' &&
             CheckDate.getMonth    () == Month &&
             CheckDate.getFullYear () == Year &&
             CheckDate.getDate     () == Day) {
            return true;
         }
      }

      alert ('Неверно указана дата');

      Id.focus ();

      return false;
   }

   function CheckDateTime (Id)                              // Функция проверки даты и времени
   {
      var Value = Id.val ();
      if (Value == '') return true;

      var Reg = /^(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{2}|\d{4})\s+(\d{1,2})(:?\s|\-|\/|\.|\:)(\d{1,2})(?:\s|\-|\/|\.|\:)(\d{1,2})$/.exec (Value);

      if (Reg !== null){

         var Day   = Reg[1];
         var Month = Number (Reg[2] - 1);
         var Year  = Reg[3].length == 2 ? '20' + Reg[3] : Reg[3];
         var Hours   = Reg[4];
         var Minutes = Reg[5];
         var Seconds = Reg[6];

         var CheckDate = new Date (Year, Month, Day, Hours, Minutes, Seconds);

         if (CheckDate.toString    () !== 'Invalid Date' &&
             CheckDate.getMonth    () == Month &&
             CheckDate.getFullYear () == Year &&
             CheckDate.getDate     () == Day &&
             CheckDate.getHours    () == Hours &&
             CheckDate.getMinutes  () == Minutes &&
             CheckDate.getSeconds  () == Seconds) {
            return true;
         }
      }

      alert ('Неверно указана дата и/или время');

      Id.focus ();

      return false;
   }

   function OnSaveNew ()
   {
      switch ($('#Status').val ()){
         case 'ZastrahDate':
            if (!CheckDate ($('#UF_DateOkonchaniaStrahovki'))) return;
            break;

         case 'ShortPerezvonLess2Days':
         case 'LongPerezvonMore2Days':
	         if (!CheckDateTime ($('#UF_DateTimePerezvonit'))) return;
  	         break;
      }

      if (IsTest) {                                         // Если в режиме демонстрации содержимого окна
         alert ('Status: ' + $('#Status option:selected').text ());
      }
      else {

         SaveVariables ();                                  // Сохраняем поля формы в переменные сценария

         Script.AddVariable ('Status', $('#Status option:selected').text ());

         OnSave ();                                         // Вызываем стандартное поведение при сохранении результата звонка
      }
   }

   document.getElementById ('Save').onclick = OnSaveNew;    // Подменяем функцию сохранения результата звонка на свою
   document.getElementById ('Save').firstChild.data = 'Сохранить';

</script>

HTML-код формы:

<div style="width:20px; height:230px;">
	<label for="Status">Статус:</label>
	<select id="Status" onchange="OnSelect (this)">
		<option value="ZastrahDate">Застрахован (дата)</option>
		<option value="ZastrahNotDate">Застрахован (без даты)</option>
		<option value="NaRaschet">На расчет</option>
		<option value="ShortPerezvonLess2Days">Короткий перезвон (меньше 2 дней)</option>
		<option value="LongPerezvonMore2Days">Длинный перезвон (больше 2 дней)</option>
		<option value="Escape">Отказ</option>
		<option value="Silent">Тишина/автоответ/занят/срыв</option>
	</select>
	<div id="DivDateOkonchaniaStrahovki" style="padding-top: 3px;">
		<label for="UF_DateOkonchaniaStrahovki" style="display: inline-block;">Дата окончания страховки:</label>
		<input type="text" id="UF_DateOkonchaniaStrahovki" maxlength="10" style="width:72px;">
		<button title="Установить текущую дату" onclick="SetCurrentDate ($('#UF_DateOkonchaniaStrahovki'))" style="width:25px">T</button>
	</div>
	<div id="DivDateTimePerezvonit" style="display: none; padding-top: 3px;">
		<label for="UF_DateTimePerezvonit" style="display: inline-block;">Перезвонить:</label>
		<input type="text" id="UF_DateTimePerezvonit" maxlength="19" style="width:134px;">
		<button title="Установить текущую дату и время" onclick="SetCurrentDateTime ($('#UF_DateTimePerezvonit'))" style="width:25px">T</button>
	</div>
	<div id="DivComment" style="display:none; padding-top: 3px;">
		<label for="UF_Comment" style="display: block;">Комментарий:</label>
		<textarea id="UF_Comment" cols="45" rows="5"></textarea>
	</div>
</div>

Вставьте этот код в поле «Показывать всплывающее окно» в настройке «Диспетчера переключений».

Понравилась статья? Расскажите друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *