Oktell-panel.js - История изменений

Oktell Support в 10:52, 19 декабря 2014

2014-12-19T10:52:18Z

Oktell Support в 07:52, 17 июля 2014

2014-07-17T07:52:46Z

Oktell Support в 09:12, 20 января 2014

2014-01-20T09:12:04Z

Oktell Support в 07:29, 15 января 2014

2014-01-15T07:29:31Z

Oktell Support в 07:27, 15 января 2014

2014-01-15T07:27:01Z

Oktell Support в 07:17, 15 января 2014

2014-01-15T07:17:22Z

Oktell Support в 07:17, 15 января 2014

2014-01-15T07:17:12Z

Oktell Support в 07:17, 15 января 2014

2014-01-15T07:17:00Z

Oktell Support в 10:54, 27 ноября 2013

2013-11-27T10:54:38Z

Oktell Support: Новая страница: «TOC '''Oktell-panel.js''' - javascript-плагин для интеграции возможностей телефонии в любые web-ресурсы в...»

2013-11-27T09:05:16Z

Новая страница: «__TOC__ '''Oktell-panel.js''' - javascript-плагин для интеграции возможностей телефонии в любые web-ресурсы в...»

Новая страница

__TOC__

'''Oktell-panel.js''' - javascript-плагин для интеграции возможностей телефонии в любые web-ресурсы вашей компании.

Веб-панель представляет собой '''закреплённый в браузере интерфейс''', в котором отображается список контактов, статусы сотрудников, а также оптимальный набор инструментов, позволяющих управлять вызовами и конференциями. С помощью веб-панели можно

* принимать / совершать / переводить звонки
* создавать / управлять конференциями
* видеть номерной план / очередь звонков

Документацию по '''oktell-panel.js''' смотрите на сайте [http://js.oktell.ru/webpanel/ js.oktell.ru].

В [[Oktell.js |предыдущей статье]] рассматривалась подготовка Oktell для работы с библиотекой''' Oktell.js''', подключение пользователей с привязкой к ip-телефону и с подключением web-телефона. В данной статье настройка '''Oktell-panel''' будет частично повторять предыдущую статью.

<span style="color:red;"> ВНИМАНИЕ: При работе с javascript нельзя перезагружать странице, иначе вы потеряете соединение. '''Используйте только одностраничные сайты!'''

== Настройка Web-сервера Oktell ==

Зайдите в '''Администрирование''' ->''' Общие настройки''' -> '''Настройки web-сервера Oktell'''. Выберите следующие настройки:

* '''Способ соединения с сервером Oktell''': '''HTTP&WebSocket'''
* '''Порты веб-сервера для незащищенных соединений''': по умолчанию, '''80''', '''4055''', '''4066'''. В примере, '''добавлен порт 50500'''.

Если вы используете защищенное соединение, то выберите '''HTTP&WebSocketSecure (TLS)''') и порты по умолчанию. Для получения '''сертификата X.509''' воспользуйтесь статьей [[Получение SSL-сертификата на_StartSSL.com]].

[[Файл:Oktelljs-000.PNG |center | 700 px]]

== Подключение оператора с привязкой к телефону ==

В системе '''Oktell''' сотрудник может использовать '''ip-телефон''' или '''гарнитуру'''. В данной части рассматривается '''подключение сотрудника с привязкой к телефону.'''

=== Настройка карты сети ===

Чтобы сотрудник мог совершать и принимать звонки в карте сети необходимо закрепить телефон за сотрудником.

Зайдите в '''Администрирование''' -> '''Карта сети''' -> '''Настройки телефона'''. Выберите сотрудника в поле '''Пользователь WebCRM'''.

[[Файл:Oktelljs-004.png | center]]

=== Установка библиотеки ===

Скачайте библиотеку '''oktell-panel.js''' с официального сайта: [http://js.oktell.ru/webpanel/ js.oktell.ru]. Распакуйте ее в папку со страницей. В примере, создана страница и в эту же папку распакован архив:

[[Файл:Oktell-panel-001.PNG | center]]

Пример страницы '''oktellpaneltest.html''' ('''подключение пользователя с привязкой к телефону'''):

<!DOCTYPE html>
<html>
<head>
<title> Oktell.js </title>
<meta charset="utf-8">
</head>
<body>

<nowiki><b>Тест Oktell-panel</b></nowiki>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="oktell-panel-0.2.1.css" />
<script type='text/javascript' charset='utf-8' src='oktell-1.5.3.js'></script>
<script type='text/javascript' charset='utf-8' src='oktell-voice-0.1.0.js'></script>
<script type='text/javascript' charset='utf-8' src='oktell-panel-0.2.1.js'></script>

<script type="text/javascript">
$(function(){

// Пример подключения к серверу Oktell при помощи oktell.js
// дополнительные параметры подключения смотрите в документации oktell.js
oktell.connect({
url: ['192.168.0.82:4055'], // ip-адрес вашего сервера Oktell
login: 'user1', // необходимо подставить логин текущего пользователя
password: '1', // необходимо подставить пароль пользователя
oktellVoice: false, // используем веб-телефон Oktell-voice.js
callback: function(data) {
if ( data.result ) {
// успешное подключение
}
}
});

// Пример инициализации oktell-panel.js
$.oktellPanel({
// указаны значения по умолчанию
oktell: window.oktell, // можно задать ссылку на объект Oktell.js
oktellVoice: window.oktellVoice, // можно задать ссылку на объект Oktell-voice.js
dynamic: false, // если true, то панель не скрывается для окна шириной больше 1200px;
// если false, то панель скрывается для любой ширины окна
position: 'right', // положение панели, возможные варианты 'right' и 'left'
debug: false, // логирование в консоль
lang: 'ru', // язык панели, также поддерживаются английский 'en' и чешский 'cz'
showAvatar: false, // показывать аватары пользователей в списке
hideOnDisconnect: true, // скрывать панель при разрыве соединения с сервером Oktell
useNotifies: false, // показывать webkit уведомления при входящем вызове
withoutPermissionsPopup: false, // не использовать попап для запросов доступа к микрофону
withoutCallPopup: false, // не использовать попап для входящих вызовов
withoutError: false // не показывать ошибки соединения с сервером Oktell
});
});
</script>
</body>
</html>

При успешном подключении подведите мышку в правый угол страницы ('''position: 'right''''), перед вами развернется веб-панель с внутренним номерным планом. Веб панель можно сделать статической, воспользуйтесь параметром '''dynamic: true'''.

<span style="color:red;"> ВНИМАНИЕ: замечено, что панель не отображает внутренний номерной план при отсутствии на странице тега '''<!DOCTYPE html>'''

[[Файл:Oktell-panel-002.PNG | 600px | center | border:10px]]

'''Пример файла:''' [[Файл:Oktell-panel -1.zip]]

== Подключение оператора с гарнитурой ==

В этой части статьи рассматривается подключение веб-панели с выделением динамической линии.

=== Настройка Automap ===

Чтобы '''Oktell''' выделил динамическую линию необходимо в серверном конфигурационном файле ('''\oktell\server\oktell.ServerService.exe.config''') определить параметр '''automap'''. Если у вас нет такого ключа добавьте его.

<add key="EnableAutoMap" value="1" />

Если '''EnableAutoMap = 1''', то в клиентское приложение можно заходить с любого компьютера, не определенного в карте сети и к нему автоматически будет прикрепляться '''динамическая''' внутренняя линия (гарнитура). Если '''EnableAutoMap = 0''', то зайти в клиентское приложение можно только с тех компьютеров, которые определены в карте сети.

Перезагрузите сервер '''Oktell'''.

[[Файл:Oktelljs-006.png | center]]

=== Установка библиотеки===

Скачайте библиотеку '''oktell-panel.js''' с официального сайта: [http://js.oktell.ru/webpanel/ js.oktell.ru]. Распакуйте ее в папку со страницей. В примере, создана страница и в эту же папку распакован архив:

<center>
{|cellpadding="10" cellspacing="0" border="1"
|<span style="color:red;"> ВНИМАНИЕ: Google Chrome не предоставляет доступ к гарнитуре '''файлу с html страницей'''.</span> Доступ предоставляется доменам или по ip-адресу. Для того, чтобы проверить работу, вы можете скопировать ваши файлы в папку '''\oktell\Server\WWW\oktell-panel''' и обратится к файлу с помощью веб-сервера Oktell. Например, http://192.168.0.82:4055/oktell-panel/oktellpaneltest2.html
|-
|}
</center>

[[Файл:Oktell-panel-004.PNG | center]]

'''Пример страницы oktellpaneltest2.html (подключение веб-панели с динамической линией): '''

<!DOCTYPE html>
<html>
<head>
<title> Oktell.js </title>
<meta charset="utf-8">
</head>
<body>

<nowiki><h2>Тест Oktell-panel</h2></nowiki>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="oktell-panel-0.2.1.css" />
<script type='text/javascript' charset='utf-8' src='oktell-1.5.3.js'></script>
<script type='text/javascript' charset='utf-8' src='oktell-voice-0.1.0.js'></script>
<script type='text/javascript' charset='utf-8' src='oktell-panel-0.2.1.js'></script>

<script type="text/javascript">
$(function(){

// Пример подключения к серверу Oktell при помощи oktell.js
// дополнительные параметры подключения смотрите в документации oktell.js
oktell.connect({
url: ['192.168.0.82:4055'], // ip-адрес вашего сервера Oktell
login: 'user2', // необходимо подставить логин текущего пользователя
password: '2', // необходимо подставить пароль пользователя
oktellVoice: true, // используем веб-телефон Oktell-voice.js
callback: function(data) {
if ( data.result ) {
// успешное подключение
}
}
});

var onMediaRequestSuccess = function(){
connect();
}
var onMediaRequestError = function(){}

// запрос доступа к микрофону
oktellVoice.createUserMedia( onMediaRequestSuccess, onMediaRequestError );

oktellVoice.on('mediaPermissionsRequest', function(){
// показать попап для уведомления пользователя о необходимости разрешения доступа
});

oktellVoice.on('mediaPermissionsAccept', function(){
// скрыть попап
});

oktellVoice.on('mediaPermissionsRefuse', function(){
// показать попап о невозможности продолжения работы приложения
});

// Пример инициализации oktell-panel.js
$.oktellPanel({
// указаны значения по умолчанию
oktell: window.oktell, // можно задать ссылку на объект Oktell.js
oktellVoice: window.oktellVoice, // можно задать ссылку на объект Oktell-voice.js
dynamic: false, // если true, то панель не скрывается для окна шириной больше 1200px;
// если false, то панель скрывается для любой ширины окна
position: 'right', // положение панели, возможные варианты 'right' и 'left'
debug: false, // логирование в консоль
lang: 'ru', // язык панели, также поддерживаются английский 'en' и чешский 'cz'
showAvatar: false, // показывать аватары пользователей в списке
hideOnDisconnect: true, // скрывать панель при разрывае соединения с сервером Oktell
useNotifies: false, // показывать webkit уведомления при входящем вызове
withoutPermissionsPopup: false, // не использовать попап для запросов доступа к микрофону
withoutCallPopup: false, // не использовать попап для входящих вызовов
withoutError: false // не показывать ошибки соединения с сервером Oktell
});
});
</script>
</body>
</html>

Разница между предыдущим примером в параметре '''oktellVoice: true''' и дополнительными методами на получение доступа к гарнитуре.

При удачном подключении веб-панель запросит '''доступ к микрофону'''.

[[Файл:Oktell-panel-003.PNG | center]]

После получения доступа к гарнитуре, за пользователем закрепится '''динамическая линия'''. Вы сможете увидеть это в''' мониторинге''':

[[Файл:Oktelljs-009.png | center | 700 px]]

'''Пример файла:''' [[Файл:Oktell-panel-2.zip]]

'''Успешной работы с Oktell-panel.js!'''

← Предыдущая		Версия 10:52, 19 декабря 2014
Строка 1:		Строка 1:
−	[[~~Утилиты~~ \| Наверх]]	+	[[WEB-интеграция\| Наверх]]

	__TOC__		__TOC__

← Предыдущая		Версия 09:12, 20 января 2014
Строка 1:		Строка 1:
		+	[[Утилиты \| Наверх]]
		+
	__TOC__		__TOC__

← Предыдущая		Версия 07:29, 15 января 2014
Строка 15:		Строка 15:
	<span style="color:red;"> ВНИМАНИЕ: При работе с javascript нельзя перезагружать странице, иначе вы потеряете соединение. '''Используйте только одностраничные сайты!'''		<span style="color:red;"> ВНИМАНИЕ: При работе с javascript нельзя перезагружать странице, иначе вы потеряете соединение. '''Используйте только одностраничные сайты!'''

−	<span style="color:red;"> ВНИМАНИЕ: </span> Для избежания проблем с ~~регистрации~~ канала зайдите в '''Администрирование''' - '''Параметры аппаратуры''' - '''Сервер ip-телефонии по протоколу SIP/2.0'''. В поле '''Список дополнительных доменов для регистрации''' укажите через пробел сетевое имя компьютера (например, '''OKTELLSERVER''') или домен сервера (например, '''Oktell.ru''').	+	<span style="color:red;"> ВНИМАНИЕ: </span> Для избежания проблем с регистрацией голосового канала зайдите в '''Администрирование''' - '''Параметры аппаратуры''' - '''Сервер ip-телефонии по протоколу SIP/2.0'''. В поле '''Список дополнительных доменов для регистрации''' укажите через пробел сетевое имя компьютера (например, '''OKTELLSERVER''') или домен сервера (например, '''Oktell.ru''').

← Предыдущая		Версия 07:17, 15 января 2014
Строка 16:		Строка 16:

	<span style="color:red;"> ВНИМАНИЕ: </span> Для избежания проблем с регистрации канала зайдите в '''Администрирование''' - '''Параметры аппаратуры''' - '''Сервер ip-телефонии по протоколу SIP/2.0'''. В поле '''Список дополнительных доменов для регистрации''' укажите через пробел сетевое имя компьютера (например, '''OKTELLSERVER''') или домен сервера (например, '''Oktell.ru''').		<span style="color:red;"> ВНИМАНИЕ: </span> Для избежания проблем с регистрации канала зайдите в '''Администрирование''' - '''Параметры аппаратуры''' - '''Сервер ip-телефонии по протоколу SIP/2.0'''. В поле '''Список дополнительных доменов для регистрации''' укажите через пробел сетевое имя компьютера (например, '''OKTELLSERVER''') или домен сервера (например, '''Oktell.ru''').
		+

	[[Файл:ДоменДляРегистрации.png \| 700 px \| center]]		[[Файл:ДоменДляРегистрации.png \| 700 px \| center]]

← Предыдущая		Версия 07:17, 15 января 2014
Строка 14:		Строка 14:

	<span style="color:red;"> ВНИМАНИЕ: При работе с javascript нельзя перезагружать странице, иначе вы потеряете соединение. '''Используйте только одностраничные сайты!'''		<span style="color:red;"> ВНИМАНИЕ: При работе с javascript нельзя перезагружать странице, иначе вы потеряете соединение. '''Используйте только одностраничные сайты!'''
−

	<span style="color:red;"> ВНИМАНИЕ: </span> Для избежания проблем с регистрации канала зайдите в '''Администрирование''' - '''Параметры аппаратуры''' - '''Сервер ip-телефонии по протоколу SIP/2.0'''. В поле '''Список дополнительных доменов для регистрации''' укажите через пробел сетевое имя компьютера (например, '''OKTELLSERVER''') или домен сервера (например, '''Oktell.ru''').		<span style="color:red;"> ВНИМАНИЕ: </span> Для избежания проблем с регистрации канала зайдите в '''Администрирование''' - '''Параметры аппаратуры''' - '''Сервер ip-телефонии по протоколу SIP/2.0'''. В поле '''Список дополнительных доменов для регистрации''' укажите через пробел сетевое имя компьютера (например, '''OKTELLSERVER''') или домен сервера (например, '''Oktell.ru''').

@@ Строка 149: / Строка 149: @@
 '''Пример страницы oktellpaneltest2.html (подключение веб-панели с динамической линией): '''
- <!DOCTYPE html>
+<pre>
- <html>
+<!DOCTYPE html>
- <head>
+<html>
- <title> Oktell.js </title>
+<head>
   <meta charset="utf-8">
- </head>
+</head>
- <body>
+<body>
-−
- <nowiki><h2>Тест Oktell-panel</h2></nowiki>
+<h2>Тест Oktell-panel</h2>
-−
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js" charset="utf-8"></script>
- <link rel="stylesheet" href="oktell-panel-0.2.1.css" />
- <script type='text/javascript' charset='utf-8' src='oktell-1.5.3.js'></script>
+<link rel="stylesheet" href="oktell-panel.css" />
- <script type='text/javascript' charset='utf-8' src='oktell-voice-0.1.0.js'></script>
- <script type='text/javascript' charset='utf-8' src='oktell-panel-0.2.1.js'></script>
+<script type='text/javascript' charset='utf-8' src='oktell.js'></script>
 <script type='text/javascript' charset='utf-8' src='oktell-voice.js'></script>
- <script type="text/javascript">
+<script type='text/javascript' charset='utf-8' src='oktell-panel.js'></script>
- 	$(function(){
 <script type="text/javascript">
- 		// Пример подключения к серверу Oktell при помощи oktell.js
+	$(function(){
- 		// дополнительные параметры подключения смотрите в документации oktell.js
- 		oktell.connect({
+		// Пример подключения к серверу Oktell при помощи oktell.js
- 			url: ['192.168.0.82:4055'], // ip-адрес вашего сервера Oktell
+		// дополнительные параметры подключения смотрите в документации oktell.js
- 			login: 'user2', // необходимо подставить логин текущего пользователя
- 			password: '2', // необходимо подставить пароль пользователя
- 			oktellVoice: true, // используем веб-телефон Oktell-voice.js
+		var onMediaRequestSuccess = function(){
- 			callback: function(data) {
+			oktell.connect({
- 				if ( data.result ) {
+		url: ['192.168.0.1:4055'], // ip-адрес вашего сервера Oktell
- 					// успешное подключение
+		login: 'admin', // необходимо подставить логин текущего пользователя
+		password: 'admin', // необходимо подставить пароль пользователя
+		oktellVoice: true, // используем веб-телефон Oktell-voice.js
- 		});
+		callback: function(data) {
+		if ( data.result ) {
- 		var onMediaRequestSuccess = function(){
+		// успешное подключение
-−
+		}
-−
+		}
- 		var onMediaRequestError = function(){}
+		});
-−
+		}
- 		// запрос доступа к микрофону
- 		oktellVoice.createUserMedia( onMediaRequestSuccess, onMediaRequestError );
+		var onMediaRequestError = function(){}
-−
- 		oktellVoice.on('mediaPermissionsRequest', function(){
+		// запрос доступа к микрофону
- 			// показать попап для уведомления пользователя о необходимости разрешения доступа
+		oktellVoice.createUserMedia( onMediaRequestSuccess, onMediaRequestError );
- 		});
+		oktellVoice.on('mediaPermissionsRequest', function(){
- 		oktellVoice.on('mediaPermissionsAccept', function(){
+			// показать попап для уведомления пользователя о необходимости разрешения доступа
- 			// скрыть попап
+		});
- 		});
+		oktellVoice.on('mediaPermissionsAccept', function(){
- 		oktellVoice.on('mediaPermissionsRefuse', function(){
+			// скрыть попап
- 			// показать попап о невозможности продолжения работы приложения
+		});
- 		});
+		oktellVoice.on('mediaPermissionsRefuse', function(){
- 		// Пример инициализации oktell-panel.js
+			// показать попап о невозможности продолжения работы приложения
- 		$.oktellPanel({
+		});
- 			// указаны значения по умолчанию
- 			oktell: window.oktell, // можно задать ссылку на объект Oktell.js
+		// Пример инициализации oktell-panel.js
- 			oktellVoice: window.oktellVoice, // можно задать ссылку на объект Oktell-voice.js
+		$.oktellPanel({
- 			dynamic: false, // если true, то панель не скрывается для окна шириной больше 1200px;
+			// указаны значения по умолчанию
- 					// если false, то панель скрывается для любой ширины окна
+			oktell: window.oktell, // можно задать ссылку на объект Oktell.js
- 			position: 'right',  // положение панели, возможные варианты 'right' и 'left'
+			oktellVoice: window.oktellVoice, // можно задать ссылку на объект Oktell-voice.js
- 			debug: false, // логирование в консоль
+			dynamic: false, // если true, то панель не скрывается для окна шириной больше 1200px;
- 			lang: 'ru', // язык панели, также поддерживаются английский 'en' и чешский 'cz'
+					// если false, то панель скрывается для любой ширины окна
- 			showAvatar: false, // показывать аватары пользователей в списке
+			position: 'right', // положение панели, возможные варианты 'right' и 'left'
- 			hideOnDisconnect: true, // скрывать панель при разрывае соединения с сервером Oktell
+			ringtone: 'path/to/ringtone.mp3', // путь до мелодии вызова
- 			useNotifies: false, // показывать webkit уведомления при входящем вызове
+			debug: false, // логирование в консоль
- 			withoutPermissionsPopup: false, // не использовать попап для запросов доступа к микрофону
+			lang: 'ru', // язык панели, также поддерживаются английский 'en' и чешский 'cz'
- 			withoutCallPopup: false, // не использовать попап для входящих вызовов
+			showAvatar: false, // показывать аватары пользователей в списке
- 			withoutError: false // не показывать ошибки соединения с сервером Oktell
+			hideOnDisconnect: true, // скрывать панель при разрывае соединения с сервером Oktell
- 		});
+			useNotifies: false, // показывать webkit уведомления при входящем вызове
- 	});
+			container: false, // DOMElement или jQuery элемент, который нужно использовать как контейнер.
- </script>
+			useSticky: true, // использовать залипающие заголовки;
- </body>
+					// на мобильных устройствах и при использовании контейнера (параметр container)
- </html>
+					// не используются.
 Разница между предыдущим примером в параметре '''oktellVoice: true''' и дополнительными методами на получение доступа к гарнитуре.

@@ Строка 23: / Строка 23: @@
 == Настройка Web-сервера Oktell ==
-Зайдите в '''Администрирование''' ->''' Общие настройки''' -> '''Настройки web-сервера Oktell'''. Выберите следующие настройки:
+Чтобы использовать '''Oktell-panel.js''' вам необходимо настроить '''web-сервер'''.
-* '''Способ соединения с сервером Oktell''': '''HTTP&WebSocket'''
+Для настройки '''web-сервера''' воспользуйтесь статьей: [[Настройка_Web-сервера_Oktell | Настройка Web-сервера Oktell]].
-* '''Порты веб-сервера для незащищенных соединений''': по умолчанию, '''80''', '''4055''', '''4066'''. В примере, '''добавлен порт 50500'''.
-−
-Если вы используете защищенное соединение, то  выберите '''HTTP&WebSocketSecure (TLS)''') и порты по умолчанию. Для получения '''сертификата X.509''' воспользуйтесь статьей [[Получение SSL-сертификата на_StartSSL.com]].
-−
-[[Файл:Oktelljs-000.PNG |center | 700 px]]
 == Подключение оператора с привязкой к телефону ==

Oktell-panel.js - История изменений

Oktell Support в 10:52, 19 декабря 2014

Oktell Support в 07:52, 17 июля 2014

Oktell Support в 09:12, 20 января 2014

Oktell Support в 07:29, 15 января 2014

Oktell Support в 07:27, 15 января 2014

Oktell Support в 07:17, 15 января 2014

Oktell Support в 07:17, 15 января 2014

Oktell Support в 07:17, 15 января 2014

Oktell Support в 10:54, 27 ноября 2013

Oktell Support: Новая страница: «__TOC__ '''Oktell-panel.js''' - javascript-плагин для интеграции возможностей телефонии в любые web-ресурсы в...»

Oktell Support: Новая страница: «TOC '''Oktell-panel.js''' - javascript-плагин для интеграции возможностей телефонии в любые web-ресурсы в...»