Page Comparison

<div idclass="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>

<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>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">
					function googleTranslateElementInit() { src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
		</div>
		
		<div class="pdf-button">
						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><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 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>

</div>
</div>

...

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

• Customizable Call button (simple HTML template) with customer authorization or without
• Customizable Widget (embedded into the website or into a separate web page) with customer authorization or without
• HTML email signature with call button, with customer authorization or without

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

Wildix Kite is fully integrated into the Wildix telephony system:

...

Configuration of Kite service consists of two steps:

• Dialplan configuration – done by PBX administrator
• Implementation on the website – carried out by website webmaster / softhouse

...

• Google Chrome
• Mozilla Firefox
• Safari (Limitation: video calls on Safari do not work using Collaboration native app)

We recommend to use the latest stable version of a browser.

Licenses:

• UC-Business, more information: https://www.wildix.com/licensing/
  • note: one UC-Business is needed for each user that must be contacted via Kite service

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

Instructions for PBX admin

...

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

...

Create Kite link with disabled notifications

...

How you can use Kite link

...

• Add a Kite contact-me button to a website
• Display additional agent information (status, picture, geolocation)
• Add a Kite widget to a website

Email signature with Kite contact

...

button 

Anchor
kitesignature kitesignature

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>

...

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

...

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

• Show user status and geolocation in JSON format:

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

...

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

• Information about the user that includes all the data in JSON format:

...

• uid: unique ID of the user
• name: user name
• avatar: http:\/\/[PBX_IP_address]\/user_avatar\/[Extension_Number].png
• pbx: PBX Serial number
• presence:
  • online: online or offline
  • show: the status set up by the user (away, dnd)
  • device_show: device status (talking, ringing)
  status:
  • status
  message
• location: serves for geolocation ({address, latitude, longitude})
• • (talking, ringing)
• status: status message
• pbxIp: PBX IP address
• pbxDomain: PBX domain name

...

In the folder you will find two templates.

Template "contacts":

Template "contacts-new":

...

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

...

.

Template "contacts":

Template "contacts-new":

Add a Kite Widget to your website

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

• Go to the page of code generation: http://kite.wildix.com/pages/widget/
• Fill out the fields:
  • Loading type: choose between Async (selected by default) and Sync type. With Async type, a script is loaded simultaneously, which helps to speed the page loading and reduce the amount of downloaded data. With Sync type, a script is loaded sequentially. Use case: Async type can be applied when you need to integrate the Kite widget into an e-commerce platform (for example, Shopify, Magento etc) to have it loaded right away before a page is loaded
  • Widget design: choose the new (selected by default) or the old design
  • Widget icon (new design): select the Kite icon (Chat or Phone) to be displayed on your website
  • Widget icon color (new design): select the Kite icon color
  • PBX name (new design)/ Serial (old design): PBX name (*.wildixin.com domain name)
  • Extension: extension of PBX user or call group number
  • Site URL: URL of your website
  • Hover title (new design): enter a title to be displayed when hovering over the Kite icon
  • Top title / Bottom title (old design): enter titles to be displayed on the Kite icon before and after clicking on it
  • Default language: select the default language of the Kite user authorization window, or keep the option “Auto-detection” enabled
  • Auto connect: allows PBX users to receive notification once Kite user opens the page (even if Kite widget is not open)
  • Auto login: after you enable the option, you can fill out Name and Email of Kite user for pre-authorization
  • Ask geolocation: uncheck the box in order to disable option of asking geolocation
  • Ask notification permission: uncheck the box to disable sending HTML5 notifications
  • Widget behavior: select whether to expand the widget by default, expand the widget after a timeout, or open the widget in a new window
  • Position and Offsets: select and optimize the widget position on your website
• Click Generate
• The code is generated, copy the code and paste it into your website between the tags and / or into a single web page
  
  

...