Интерфейс Click2Call & ClickCallBack

    Подключение Вставка кнопки
      Вставка кнопки звонка Старт звонка по клику на существующем элементе страницы Завершение активного вызова Посылка DTMF Настройка вида интерфейса
    Пример

Подключение

Подключение Click2Call осуществляется вызовом программного кода сервиса на страницах ресурса:

<head>

...

<script type="text/javascript" src="http://ctc. ru. /ctc. js"></script>

<script type="text/javascript">

itl_add_ctc_css();

</script>

...

</head>

Вставка кнопки

Вставка кнопки звонка

Вставка кнопки звонка в нужное место страницы осуществляется функцией itl_ctc:

itl_ctc(clientId, langId, interfaceMode, size);
    Обязательные аргументы
      clientId - уникальникальный id клиента, получаемый при генерации кнопки в интерфейсе; langId - ru / en;
    Опциональные аргументы
      interfaceMode - набор предопределенных констант, объединенных по "ИЛИ", описывающих режим отображения интерфейса click2call:
        ITL_CTC_DIALPAD - показывать dialpad; ITL_CTC_POPUP - открывать интерфейс звонка в новом окне; ITL_CTC_CALLBACK - использовать функцию обратного вызова: пользователь указывает номер телефона, на который он собирается позвонить, система звонит на этот номер, и если звонок успешный, соединяет его с клиентом.
      size - массив размеров окна [UCC:width, height]

Пример кода:

<body>

...

<div>

<script>itl_ctc("client1", "ru");</script>

</div>

В элемент-контейнер <div> будет добавлено все необходимое для отображения кнопки. Элемент кнопки звонка - <em class="ctc_button"></em>. По умолчанию стили для элемента "ctc_button" заданы в css, подключаемом с помощью функции itl_add_ctc_css(). Заказчик может переопределить стили (см. раздел Настройка вида интерфейса).

НЕ нашли? Не то? Что вы ищете?

Старт звонка по клику на существующем элементе страницы

Связывание элемента страницы с функциональностью Click2Call осуществляется с помощью функции

itl_ctc_obj(elementId, clientId, langId, interfaceMode, size);
    Обязательные аргументы
      elementId - идентификатор элемента, клик на котором будет инициировать звонок. Вместо id можно передавать и сам элемент, полученный с помощью метода getElementById(id); clientId - то же, что и в itl_ctc(); langId - то же, что и в itl_ctc();
    Опциональные аргументы
      interfaceMode - набор предопределенных констант, объединенных по "ИЛИ", описывающих режим отображения интерфейса click2call:
        ITL_CTC_DIALPAD - показывать dialpad; ITL_CTC_POPUP - открывать интерфейс звонка в новом окне; ITL_CTC_CALLBACK - использовать функцию обратного вызова: пользователь указывает номер телефона, на который он собирается позвонить, система звонит на этот номер, и если звонок успешный, соединяет его с клиентом.
      params - вместо interfaceMode может передаваться список дополнительных параметров:
        mode - тоже самое, что и interfaceMode; callback - функция-обработчик для событий внутри системы. На вход получает два параметра: тип события и данные. Возможные типы событий:
          connected - XIMSS соединение успешно поднято disconnected - XIMSS соединение разорвано (вторым параметром в функцию может прийти описание ошибки) callProvisioned - звонок заметили на той стороне, там звонит телефон callConnected - звонок успешно начался callProgress - звонок продолжается, вторым параметром в функцию приходит количество секунд с начала звонка callDisconnected - звонок завершен (вторым параметром в функцию может прийти описание ошибки)
      size - массив размеров окна [UCC:width, height]

Запуск звонка по клику на существующий элемент страницы осуществляется следующим фрагментом кода:

<body>

...

<img src="btn-accept. png" id="call2" style="cursor: pointer;"/><br/>Call me

...

<script>itl_ctc_obj("call2", "client1", "ru");</script>

"call2" - идентификатор элемента, клик на котором будет инициировать звонок. Вместо id можно передавать и сам элемент, например так:

<body>

...

<img src="btn-accept. png" id="call2" style="cursor: pointer;"/><br/>Call me

...

<script>itl_ctc_obj(document. getElementById("call2"), "clientId", "ru");</script>

Пример вызова с обработчиком событий

<head>

<script>

var ctc = null;

myCallback = function(eventType, errorMsg) { console. log(eventType+ (errorMsg?(": "+errorMsg):"")); }

</script>

</head>

<body>

WBDemo web2.0: <em id="call2" style="text-decoration: underline; cursor: pointer;">Call</em>^

<script>ctc = itl_ctc_obj(document. getElementById("call2"), "wbdemo", "en", {mode: ITL_CTC_DIALPAD, callback: myCallback});</script>^

</body>

Примеры модификации интерфейса:

Только dialpad

<script>itl_ctc("calledName", "en", ITL_CTC_DIALPAD);</script>

Новое окно + dialpad

<script>itl_ctc("calledName", "ru", ITL_CTC_POPUP|ITL_CTC_DIALPAD);</script>

Новое окно + интерфейс заказа обратного звонка

<script>itl_ctc("calledName", "ru", ITL_CTC_POPUP|ITL_CTC_CALLBACK);</script>

Завершение активного вызова

Для завершения активного вызова доступен метод hangup();

<body>

...

<img src="btn-accept. png" id="call2" style="cursor: pointer;"/><br/>Call me

...

<script>var ctc = itl_ctc_obj("call2", "client1", "ru");</script>

"call2" - идентификатор элемента, клик на котором будет инициировать звонок. Вместо id можно передавать и сам элемент, например так:

<body>

...

<img src="btn-hangup. png" id="call2" style="cursor: pointer;" onclick="ctc. hangup();"/><br/>Hangup

...

<script>itl_ctc_obj(document. getElementById("call2"), "clientId", "ru");</script>

Посылка DTMF

Для посылки DTMF во время активного вызова доступен метод sendDTMF(код);

Настройка вида интерфейса

Ограничение
В текущей версии кастомизация возможна только при условии, что функциональность Click2Call не использует открытия нового окна (константы ITL_CTC_POPUP не должно быть в модификаторах интерфейса).

В общем случае HTML код, генерируемый программой имеет вид:

<em class="ctc_button"></em>

<em class="ctc_flash"><object... </em>

<em class="ctc_arr"></em>

<em class="ctc_info">

<em class="status">Talking</em>

<em class="top"></em>

<em class="info">

<h1>

<em class="dpad">

<em class="dpad_row"><em class="dpad_btn"><em>1</em></em><em class="dpad_btn"><em>2</em></em><em class="dpad_btn"><em>3</em></em></em>

<em class="dpad_row"><em class="dpad_btn"><em>4</em></em><em class="dpad_btn"><em>5</em></em><em class="dpad_btn"><em>6</em></em></em>

<em class="dpad_row"><em class="dpad_btn"><em>7</em></em><em class="dpad_btn"><em>8</em></em><em class="dpad_btn"><em>9</em></em></em>

<em class="dpad_row"><em class="dpad_btn"><em>*</em></em><em class="dpad_btn"><em>0</em></em><em class="dpad_btn"><em>*</em></em></em>

</em>

<em class="ctcInfoTime">00:13</em>

</h1>

<p>...</p>

<h2 class="connected">

<u>Hangup</u>

</h2>

</em>

<em class="bottom"></em>

</em>


<em class="ctc_button"> - сама кнопка (элемент может отсутствовать, если использовалась привязка программы к уже существующему элементу)

В процессе работы программы этому элементу добавляются классы, отражающие текущее состояние звонка, а именно:

    .dialing - устанавливается связь .ringing - звонит телефон клиента .connected - связь установлена

<em class="ctc_flash"> - контейнер для flash объекта. Стили для этого элемента менять не рекомендуется.

<em class="ctc_arr"> - контейнер для указателя (см. рисунок). В момент инициации звонка программа сама решает где удобнее показать окно с учетом этого контейнера. Контейнеру могут быть присвоены классы:

    .lefttop - стрелка будет слева-сверху .righttop - стрелка будет справа-сверху .leftbottom - стрелка будет слева-снизу .rightbottom - стрелка будет справа-снизу

<em class="ctc_info"> - контейнер для информационного окна звонка, содержит 4 дочерних элемента:

    <em class="status"> - в этот элемент программа выводит статус звонка <em class="top"> - верхний колонтитул <em class="info"> - контейнер для информации <em class="bottom"> - нижний колонтитул

<em class="info"> - контейнер для информации, содержит 3 дочерних элемента

    <h1> - контейнер для заголовка, в зависимости от состояния программы может содержать <em class="dpad"> (см. ниже), <em class="ctcInfoTime"> (см. ниже), <p> <p> - контейнер для дополнительной информации <h2> - контейнер для кнопок, в зависимости от состояния программы контейнеру могут быть добавлены классы:
      .calling - идет соединение .connected - соединение установлено .error - ошибка

<h2> - контейнер может содержать несколько элементов <u> - кнопок. При наведении мыши на <u> - элементу добавляется класс "hover";

<em class="dpad"> - контейнер для dialpad. Содержит 4 элемента <em class="dpad_row">, каждый из которых содержит по 3 элемента <em class="dpad_btn">. При наведении мыши на <em class="dpad_btn"> - элементу добавляется класс "hover"

<em class="ctcInfoTime"> - контейнер для счетчика времени, содержит строковое отображение продолжительности звонка.

Пример