Wildix WebRTC Kite Guide provides the information on how to create a contact-me link and add it to a company website.


<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<span class="page-title-pdf">Wildix WebRTC Kite - Admin Guide - English</span>



<div class="fb-like" data-href="https://confluence.wildix.com/x/xQY8AQ" data-layout="button_count" data-action="recommend" data-size="large" data-show-faces="true" data-share="true"></div>


 <div class="lang-box-pdf">
	<div>
<div class="lang-switch">
			<span class="letters-form"><a title="French" href="https://confluence.wildix.com/x/3AY8AQ" target="_blank">FR</a>&nbsp;|&nbsp;<a title="German" href="https://confluence.wildix.com/x/4AY8AQ">DE</a></span>
		</div>
		<div class="google-lang">
			<div id="google_translate_element">
			</div>
			<script type="text/javascript">
					function googleTranslateElementInit() {
						new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'de,es,fr,it,nl', autoDisplay: false}, 'google_translate_element');
						}
			</script>
			<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
		</div>
		
		<div class="pdf-button">
			<a href="https://confluence.wildix.com/spaces/flyingpdf/pdfpageexport.action?pageId=20711109" alt="Convert to .pdf" title="Convert to .pdf"><img src="https://confluence.wildix.com/download/attachments/14549012/pdf-button-download-wildix-documentation.png"></a>
		</div>
	</div>
</div>


This guide is intended for the following audience:

  • PBX administrator, since it explains how to configure Wildix Kite on PBX side
  • webmaster, since it provides the information on how to add the service to a company’s website

WMS version: 3.88

Updated: April 2019

Permalink: https://confluence.wildix.com/x/xQY8AQ

Important: Starting from WMS version 3.86, use only PBX domain name in Kite links (do not use PBX serial); e.g.:

  • kite.wildix.com/[pbx domain]/[extension] – correct
  • kite.wildix.com/[pbx serial]/[extension] – not correct


Recommended WMS version 3.87 or higher! For more information, check the chapter Requirements.

Introduction

Wildix Kite is a professional solution for business communication based on the WebRTC technology that brings Unified Communications to the corporate website. With Wildix Kite a website visitor can communicate with the company call agents via chat, audio and video, desktop and data sharing, all this with just one click.

Features supported:

Wildix WebRTC Kite can be added to the website in the form of:

An example of Kite implementation can be found here: www.wildix.com/contacts

Wildix Kite is fully integrated into the Wildix telephony system:

Configuration

Configuration of Kite service consists of two steps:

Requirements

Browser compatibility with WMS version 3.87 and higher (audio and video support):

Browser compatibility with WMS version 3.86 and lower:

We recommend to use the latest stable version of browser.

Licenses:

Check the ports to open on Firewall: Ports used by Wildix services

Instructions for PBX admin

Dialplan configuration


Now all the users registered to your PBX can receive calls via Kite service. In case you need to limit the numbers that can be dialed via Kite, refer to Limit access to Kite service chapter.

Create Kite link

Example: https://kite.wildix.com/ucit/324



PBX user receives a chat request via Wildix Collaboration interface. In addition to the usual options, available in Collaboration web interface, in chat dialog with another PBX user, the following options are available for kite user:




Note: On WMS 4.01 PBX user can initiate a call and videoconference with Kite user (available only in WMS 4.01). 


Kite user can initiate a call, start video streaming or desktop sharing with the PBX user using the icons situated in the upper part of the screen, click the Paperclip icon to send a file or simply drag the file into the input field (support to send files only in JPEG / PDF format), click Options to:



Note: Kite user can resize video during streaming: 

  • Place mouse at the bottom of video block  -> mouse cursor should change to “Resize ()“
  • Hold and drag the video to the bottom/ top of the screen to increase/ decrease its size 

Or

  • Right-click on video -> click Show Controls -> click Fullscreen button

Limitations:

  • Impossible to resize video in Screen Sharing embedded mode (separate screen sharing and chat/ video section)
  • Impossible to resize video on touch-screen devices


Create Kite link for Auto-call (call starts after clicking on Kite link)

To enable auto-call (call starts automatically after clicking on Kite link, chat remains available), you should add “?autocall” to your Kite link. So create Kite link in the following format:

Where

Create Kite link for DIRECT call (without entering chat)

To enable direct call without entering chat, create Kite link in the following format:

Where

Note: phone number must not coincide with any existing extension number of user or call group.

Create Kite link to allow actions only after PBX user sends a message

It is possible to allow chat & screen sharing only after PBX user sends a message. 

To enable the option, you should add “?waitMessageFromOperator” to the Kite URL.

Example of the URL: “https://kite.wildix.com/ucit/324?waitMessageFromOperator”. In this case Kite user can send a message, start a call and screen sharing, only after the PBX user sends the first message.
The following values are supported by the parameter:

You can specify several values separated by comma, example: “https://kite.wildix.com/ucit/324?waitMessageFromOperator=chat,screensharing

Create Kite link to prevent from asking geolocation

It is possible to prevent Kite from asking geolocation.

To disable the option of asking Kite user's geolocation, you should add "?geolocation=no" to the Kite URL.

Example of the URL: "https://kite.wildix.com/eugeniocloud/448?geolocation=no". 

Note: The option can also be disabled/ enabled when generating Kite Widget.

Create Kite link with disabled notifications

It is possible to disallow notification permission.

To disable sending HTML5 notifications about new chat messages, incoming calls etc, you should add "?notifications=no" to the Kite URL.

Example of the URL: "https://kite.wildix.com/eugeniocloud/448?notifications=no".

Note: The option can also be disabled/ enabled when generating Kite Widget.

How you can use Kite link

In this Guide we provide information for website webmaster and explain how to:

Email signature with Kite contact button

You can also use Kite in your email signature, and you don’t need web developer skills, to be able to do it, just follow this link: Generate the HTML signature for email.

Example: 

<table cellpadding="7" cellspacing="0">

<tbody><tr><td width="75" height="5" align="left" valign="middle" bgcolor="#FFFFFF"><img id="picture" style="border-color:#DDD;width: 85px;height: 85px;" src="https://kite.wildix.com/ucit/324/api/avatar" width="85" height="85"></td>

<td width="250" height="5" align="left" valign="middle"><table><tbody><tr><td><div style="line-height: 25px;"><span id="uName1" style="font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #000000; font-weight: bold;">Elena Kornilova</span></div></td></tr>

<tr><td><div style="line-height: 14px;"><span id="uJob1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 12px; color: #000000;">Documentation & Tech communications Manager</span></div></td></tr>

<tr><td><div style="line-height: 14px;"><span id="uCompany1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 12px; line-height: 22px; color: #000000;">Wildix</span><span id="separator1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 10px; visibility: visible;"> | </span><span id="uWebsiteShow1" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: 0000ff; text-decoration: underline;"><a href="http://www.wildix.com">www.wildix.com</a></span></div></td></tr></tbody></table></td></tr>

<tr><td colspan="2" valign="middle"><span contenteditable="true" id="simple" style="font-family:Verdana, Geneva, sans-serif; text-align:left; font-size:12px; line-height:25px; color: #000000;">Prefer online communication?</span><br>

<span id="kiteText1" style="font-family:Verdana, Geneva, sans-serif; font-size:15px; line-height:25px; color: #0000FF; text-decoration:underline; font-weight:bold"><a href="https://kite.wildix.com/ucit/324">Click here to chat with me now</a></span></td></tr>

<tr><td colspan="2" valign="middle"><div style="line-height:12px"><span id="tel1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; line-height: 12px; font-size: 10px; color: rgb(0, 0, 0); visibility: hidden; display: none;">Tel: </span><span id="uPhone1" style="font-family: Verdana, Geneva, sans-serif; text-align: left; font-size: 10px; color: rgb(0, 0, 0); display: none;"><br></span>

<span id="uAddress1" style="line-height: normal; font-family: Verdana, Geneva, sans-serif; font-size: 10px; color: rgb(0, 0, 0); display: none;"></span></div>

<div style="line-height:12px"><p><span id="uLinkedin1" style="font-family:Verdana, Geneva, sans-serif; font-size:10px; color: 0000FF; text-decoration:underline; display:none;"><a href="">Add me on LinkedIn</a></span></p></div>

<div style="line-height:12px"><p><span id="uCustomLink1" style="line-height: 12px; font-family:Verdana, Geneva, sans-serif; text-align:left; font-size:10px; display:inline-block; color: #000000; display:none;"></span></p></div>

<div style="line-height:12px"><p><span id="customField1" style="font-family:Verdana, Geneva, sans-serif; font-size:10px; color: #000000; display:none;"></span></p></div>

</td></tr>

</tbody></table>


Limit access to Kite service

Via ACL groups you can forbid a user’s presence status and message, avatar visualization, geolocation sharing:

Via Dialplan you can limit the numbers that can be dialed via Kite service:

You can remove “Internalcalls” from Included procedures and add only those numbers that can be dialed. Otherwise you can set up the system to route the incoming calls to certain numbers to Voicemail or to other users.

Instructions for web master

Display call agent information on the website

Kite APIs allow displaying call agent’s presence status, personal image, geolocation. This information is synced with Wildix PBX.

Note: information is not taken from the PBX in real time, it is synced every 10 seconds, so it’s necessary to specify the refresh time in the JavaScript that loads the information.


https://kite.wildix.com/PBX_Name/Extension_Number/api/avatar

https://kite.wildix.com/PBX_Name/Extension_Number/api/presence/image

https://kite.wildix.com/PBX_Name/Extension_Number/api/presence

Example:

{“type”:”result”,”result”:{“online”:true,”show”:false,”device_show”:false,”status”:false,”location”:{“address”:false,”lat”:false,”lng”:false}}}



https://kite.wildix.com/PBX_Name/Extension_Number/api/info

Example:

{“type”:”result”,”result”:{“uid”:”XXXXXXX”,”name”:”User Name”,”avatar”:”http:\/\/XXX.XX.X.XX\/user_avatar\/XXX.png”,”pbx”:”0050568XXXXX”,”presence”:{“online”:true,”show”:false,”device_show”:false,”status”:false,”location”:{“address”:false,”lat”:false,”lng”:false}},”pbxIp”:”XXX.XX.X.XX”, "pbxDomain":"pbx.wildixin.com"}}



Variables explanation:

Auto-fill customer name (skip authorization)

It is possible to enable each customer to access Kite service without having to fill in his / her personal data each time. Use Kite link in the following format:

where:

Example: https://kite.wildix.com/ucit/324?name=Elena&email=elena.kornilova@wildix.com

Customer authorization information is already filled out automatically:


To allow Kite user to connect automatically, add the value “&autologin=1” in the end of the link:

Example: https://kite.wildix.com/ucit/324?name=Elena&email=elena.kornilova@wildix.com&autologin=1.

Kite link in iframe

To insert Kite link into the website page in an iframe, add "/embedded" in the end of the link:

Example:

&nbsp;
<div align="center"><iframe src="https://kite.wildix.com/mybpx/60" allow="microphone; camera" width="300" height="380" frameborder="0" scrolling="no">
Sorry, your browser doesn't support iframe.
</iframe></div>

A ready HTML template

Download a ready HTML template HERE

Note: it is possible to use call group ID instead of an extension number, in this way you can route the chat requests to group of users.

In the folder you will find two templates.

Template "contacts":

Template "contacts-new":


Add a Kite Widget to your website

Example of Wildix Kite Widget can be found on www.wildix.com:


Note: It is possible to perform a test to see how the widget will look on your website: After filling out the fields, press Test instead of Generate, you will see the widget simulation.



Note: you can edit Kite user name or email (or other values) inside the code after the Kite widget code has been generated (edit the corresponding line of the code).



<div class="fb-like" data-href="https://confluence.wildix.com/x/xQY8AQ" data-layout="button_count" data-action="recommend" data-size="large" data-show-faces="true" data-share="true"></div>



<div class="ask-question">
		<div class="text-before-buttons">
			<span style="font-size: 24px; text-align: center;">Not finding the help you need?</span><br>
Join the Facebook group to ask a question!
		</div>
<div class="fb-buttons">
<span style="align: center;"><a href="https://www.facebook.com/groups/wildixtechwizards" target="_blank"><img src="https://manuals.wildix.com/wp-content/uploads/2017/03/facebook_tech-wizards.png" alt="facebook_tech-wizards" width="282" height="80" align="center"/></a></span></div>
	</div>
</div>