innovaphone wiki - User contributions [en]

Main Page

2024-12-12T13:37:17Z

Tac: /* Latest News */

__NOTOC__

<div style="margin:0px; margin-right:10px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0em 1em;">
== Remote Support ==
innovaphone only carries out scheduled remote maintenance via our ticket system by prior consultation. 
Please do not accept AnyDesk requests without prior appointment via ticket.

Please ensure that you download the [https://anydesk.com/en/downloads/windows latest AnyDesk version].

Please note: We cannot accept any liability for the external content of AnyDesk. AnyDesk is responsible for the content of its own software.
We are not liable for any damages resulting from the use of a non-updated or non-conforming version of AnyDesk.

== Searching ==
Searching in wiki works, but is sometimes cumbersome. However, you can have Google do the job for you. Try [https://www.google.de/search?q=site%3Ainnovaphone.com+xml+documentation <code>site:innovaphone.com your search terms</code>] to search the innovaphone sites for matches!

If you still don't find what you are looking for, [mailto:presales@innovaphone.com drop us a message]
</div>


<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em;">



== Latest News ==
[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V14r2 product/14r2/firmware 1420433 (sr5) available | Version 14r2 Service Release 5]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V14r1 product/14r1/firmware 1410584 (sr10) available | Version 14r1 Service Release 10]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V13r3 product/13r3/firmware 138005 (sr22) available | Version 13r3 Service Release 22]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V12r2 product/12r2/firmware 125886 (sr72) available | Version 12r2 Service Release 72]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Cam|Cam]] 16:22, 18 September 2023 (CEST)
[[App Calculator beta1 available]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Sga|Sga]] ([[User talk:Sga|talk]]) 17:43, 15 September 2023 (CEST)
[[Support:Wireless Handset Firmware IP73 1011 (5.0.1) released | Wireless Handset Firmware IP73 1011 (5.0.1)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Gal|Gal]] ([[User talk:Gal|talk]]) 13:39, 31 July 2023 (CEST)
[[Support:Wireless Handset Firmware IP64 10314 (3.0.13)/IP65 10119 (3.0.13) released | Wireless Handset Firmware IP64 10314 (3.0.13)/IP65 10119 (3.0.13)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Cam|Cam]] 12:03, 31 July 2023 (CEST)
[[App Working final available]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] 15:38, 6 February 2023 (CET)
[[Support:Wireless_Handset_Firmware_IP62_3040621_(6.2.7)_released | Wireless Handset Firmware IP62 3040621 (6.2.7)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 13:13, 6 February 2023 (CET)
[[Support:WinPDM_Software_3130113_%284.1.8%29_released | WinPDM Software 3130113 (4.1.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 15:05, 11 February 2022 (CET)
[[Support:Wireless_Handset_Firmware_IP64_10313_(2.12.10)/IP65_10118_(2.12.10)_released | Wireless Handset Firmware IP64 10313 (2.12.10)/IP65 10118 (2.12.10)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 16 June 2021 (CEST)
[[Support:iQM_Build_8029100_available | IQM Build 8029100 Hotfix34]] is now available from the [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Afi|Afi]] 12:46, 16 June 2021 (CEST))
[[Support:TAPI Service Provider 8188 (hotfix21) available|TAPI Service Provider 8188 (hotfix21)]] is now available from [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Linux_Application_Platform_100271_(sr64)_available | Linux Application Platform V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Reporting_100271_(sr64)_available | innovaphone Reporting V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Fax_100271_(sr64)_available | innovaphone Fax V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Exchange_Calendar_Connector_100271_(sr64)_available | innovaphone Exchange Calendar Connector V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 18:21, 12 October 2020 (CEST)
[[Support:Wireless_Handset_Firmware_IP61_3022811_(4.7.8)/IP63_3022912_(4.7.8)_released | Wireless Handset Firmware IP61 3022811 (4.7.8)/IP63 3022912 (4.7.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 21:30, 27 March 2020 (CET)
[[Support:Wireless_Handset_Firmware_and_Management_Software_product/9.00/wireless_100037_%28hotfix19%29_available | Wireless Package hotfix 19]] is now available from the [http://download.innovaphone.com/ice/9.00#wireless V9 download area].

[[User:Dde|Dde]] 07:56, 9 March 2020 (CET)
[[Support:App_Platform_build_90007_available | App Platform build 90007]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 02 March 2020 (CET)
[[Support:Recording_Build_121100_available | innovaphone Recording SR29 build 121100]] is now available from the [http://download.innovaphone.com/ice/10.00/#recording V10 download area].
</div>

<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em;">

== New Articles ==

{{Special:Newestpages/all/20}}
</div>

<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em; font-size:1">
== More innovaphone Ressources ==
* [http://www.innovaphone.com Home Page]
* [http://download.innovaphone.com Download Site ]
* [http://my.innovaphone.com my.innovaphone ]
* [http://mantis.innovaphone.com/ Ticketing System ]
</div>

Main Page

2024-12-12T13:35:56Z

Tac: /* Latest News */

__NOTOC__

<div style="margin:0px; margin-right:10px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0em 1em;">
== Remote Support ==
innovaphone only carries out scheduled remote maintenance via our ticket system by prior consultation. 
Please do not accept AnyDesk requests without prior appointment via ticket.

Please ensure that you download the [https://anydesk.com/en/downloads/windows latest AnyDesk version].

Please note: We cannot accept any liability for the external content of AnyDesk. AnyDesk is responsible for the content of its own software.
We are not liable for any damages resulting from the use of a non-updated or non-conforming version of AnyDesk.

== Searching ==
Searching in wiki works, but is sometimes cumbersome. However, you can have Google do the job for you. Try [https://www.google.de/search?q=site%3Ainnovaphone.com+xml+documentation <code>site:innovaphone.com your search terms</code>] to search the innovaphone sites for matches!

If you still don't find what you are looking for, [mailto:presales@innovaphone.com drop us a message]
</div>


<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em;">



== Latest News ==
[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V14r2 product/14r2/firmware 1420433 (sr5) available | Version 14r2 Service Release 5]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V14r1 product/14r1/firmware 1410584 (sr10) available | Version 14r1 Service Release 10]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V13r3 product/13r3/firmware 138005 (sr22) available | Version 13r3 Service Release 22]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 14:35, 12 December 2024 (CET)
[[Support:Firmware V12r2 product/12r2/firmware 125886 (sr72) available | Version 12r2 Service Release 72]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] ([[User talk:Afi|talk]]) 15:22, 13 November 2024 (CET)
[[Support:Firmware V14r2 product/14r2/firmware 1420399 (sr4) available | Version 14r2 Service Release 4]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] ([[User talk:Afi|talk]]) 15:22, 13 November 2024 (CET)
[[Support:Firmware V14r1 product/14r1/firmware 1410578 (sr9) available | Version 14r1 Service Release 9]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] ([[User talk:Afi|talk]]) 15:22, 13 November 2024 (CET)
[[Support:Firmware V13r3 product/13r3/firmware 137999 (sr21) available | Version 13r3 Service Release 21]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] ([[User talk:Afi|talk]]) 15:22, 13 November 2024 (CET)
[[Support:Firmware V12r2 product/12r2/firmware 125885 (sr71) available | Version 12r2 Service Release 71]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Cam|Cam]] 16:22, 18 September 2023 (CEST)
[[App Calculator beta1 available]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Sga|Sga]] ([[User talk:Sga|talk]]) 17:43, 15 September 2023 (CEST)
[[Support:Wireless Handset Firmware IP73 1011 (5.0.1) released | Wireless Handset Firmware IP73 1011 (5.0.1)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Gal|Gal]] ([[User talk:Gal|talk]]) 13:39, 31 July 2023 (CEST)
[[Support:Wireless Handset Firmware IP64 10314 (3.0.13)/IP65 10119 (3.0.13) released | Wireless Handset Firmware IP64 10314 (3.0.13)/IP65 10119 (3.0.13)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Cam|Cam]] 12:03, 31 July 2023 (CEST)
[[App Working final available]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] 15:38, 6 February 2023 (CET)
[[Support:Wireless_Handset_Firmware_IP62_3040621_(6.2.7)_released | Wireless Handset Firmware IP62 3040621 (6.2.7)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 13:13, 6 February 2023 (CET)
[[Support:WinPDM_Software_3130113_%284.1.8%29_released | WinPDM Software 3130113 (4.1.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 15:05, 11 February 2022 (CET)
[[Support:Wireless_Handset_Firmware_IP64_10313_(2.12.10)/IP65_10118_(2.12.10)_released | Wireless Handset Firmware IP64 10313 (2.12.10)/IP65 10118 (2.12.10)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 16 June 2021 (CEST)
[[Support:iQM_Build_8029100_available | IQM Build 8029100 Hotfix34]] is now available from the [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Afi|Afi]] 12:46, 16 June 2021 (CEST))
[[Support:TAPI Service Provider 8188 (hotfix21) available|TAPI Service Provider 8188 (hotfix21)]] is now available from [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Linux_Application_Platform_100271_(sr64)_available | Linux Application Platform V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Reporting_100271_(sr64)_available | innovaphone Reporting V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Fax_100271_(sr64)_available | innovaphone Fax V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Exchange_Calendar_Connector_100271_(sr64)_available | innovaphone Exchange Calendar Connector V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 18:21, 12 October 2020 (CEST)
[[Support:Wireless_Handset_Firmware_IP61_3022811_(4.7.8)/IP63_3022912_(4.7.8)_released | Wireless Handset Firmware IP61 3022811 (4.7.8)/IP63 3022912 (4.7.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 21:30, 27 March 2020 (CET)
[[Support:Wireless_Handset_Firmware_and_Management_Software_product/9.00/wireless_100037_%28hotfix19%29_available | Wireless Package hotfix 19]] is now available from the [http://download.innovaphone.com/ice/9.00#wireless V9 download area].

[[User:Dde|Dde]] 07:56, 9 March 2020 (CET)
[[Support:App_Platform_build_90007_available | App Platform build 90007]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 02 March 2020 (CET)
[[Support:Recording_Build_121100_available | innovaphone Recording SR29 build 121100]] is now available from the [http://download.innovaphone.com/ice/10.00/#recording V10 download area].
</div>

<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em;">

== New Articles ==

{{Special:Newestpages/all/20}}
</div>

<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em; font-size:1">
== More innovaphone Ressources ==
* [http://www.innovaphone.com Home Page]
* [http://download.innovaphone.com Download Site ]
* [http://my.innovaphone.com my.innovaphone ]
* [http://mantis.innovaphone.com/ Ticketing System ]
</div>

File:Widget-code-popup.png

2023-12-11T10:16:25Z

Tac: Tac uploaded a new version of File:Widget-code-popup.png

Reference14r1:Concept Contact Widgets

2023-12-11T10:11:42Z

Tac: /* Content-Security-Policy */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widget License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
* The Widget uses Mail-Links (mailto:).
* The Widget uses Tel-Links (tel:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; child-src 'self' '''mailto:''' '''tel:'''; img-src '''data:'''"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-11T10:11:14Z

Tac: /* Content-Security-Policy */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widget License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
* The Widget uses Mail-Links (mailto:).
* The Widget uses Tel-Links (tel:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; child-src 'self' '''mailto:''' '''tel:'''"; img-src '''data:'''
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-11T10:10:42Z

Tac: /* Content-Security-Policy */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widget License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
* The Widget uses Mail-Links (mailto:).
* The Widget uses Tel-Links (tel:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:'''; child-src 'self' '''mailto:''' '''tel:'''"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-11T10:08:47Z

Tac: /* Content-Security-Policy */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widget License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
* The Widget uses Mail-Links (mailto:).
* The Widget uses Tel-Links (tel:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com''' '''mailto:''' '''tel:'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-11T10:08:14Z

Tac: /* Content-Security-Policy */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widget License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
* The Widget uses Mail-Links (mailto:).
* The Widget uses Tel-Links (tel:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-08T13:59:28Z

Tac: /* Requirements */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widget License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-06T09:15:09Z

Tac: /* Requirements */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widgets License''' (optional) is required to remove any 'innovaphone' branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-06T09:14:07Z

Tac: /* Requirements */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections [*]
* '''Widgets License''' (optional) is required to remove the innovaphone branding from the Widget UI

[*] '''UC License''' can also be used since it includes a '''Video License'''

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-06T09:13:21Z

Tac: /* Requirements */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections <ref>'''UC License''' can also be used since it includes a '''Video License'''</ref>
* '''Widgets License''' (optional) is required to remove the innovaphone branding from the Widget UI

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-06T09:09:14Z

Tac: /* Requirements */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1
* One '''Port License''' is used by the app service to establish a VoIP registration at the PBX
* '''Video License''' (optional) is required to establish video connections
* '''Widgets License''' (optional) is required to remove the innovaphone branding from the Widget UI

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

Reference14r1:Concept Contact Widgets

2023-12-06T08:57:16Z

Tac: /* What is a Contact Widget? */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is an element that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Web visitor in a browser. 
The myApps web uses the logging facilities provided by the browser it runs in (i.e. JavaScript function <code>console.log</code>). In most browser this is available as ''Console'' after pressing F12.

The called agent working with myApps client. 
The myApps platform services provide more elaborate tracing mechanisms. See ''Troubleshooting'' in [[{{NAMESPACE}}:Concept_myApps_platform_services#Troubleshooting|Concept myApps platform services]].

Troubleshooting AP Services on the AP. 
Troubleshooting a specific App instance on the AP [[{{NAMESPACE}}:Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs|Course13:IT_Plus_-_Tools_for_Troubleshooting#App_Service_Logs]]

Go to the AP Manager and select the App instance from the Contact Widgets App. Click on Diagnose and make sure that the box App is ticked.
[[File:AP-Diagnostics.png|thumb|AP-Diagnostics]]

Make sure that the logging of the App instance has been activated.
[[File:AP-DiagnosticsLogging.png|thumb|AP-Diagnostics-Logging]]

File:Cardset-widget.png

2023-11-28T07:05:13Z

Tac: Tac uploaded a new version of File:Cardset-widget.png

File:Cardset-widget.png

2023-11-28T06:55:44Z

Tac: Tac uploaded a new version of File:Cardset-widget.png

Reference14r1:Concept Contact Widgets

2023-11-28T06:49:57Z

Tac: /* Loading the Widget */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Session" response providing the widget's display-name and other parameters. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Reference14r1:Concept Contact Widgets

2023-11-28T06:45:39Z

Tac: /* Loading the Widget */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Session","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Name" response providing the widget's display-name. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Reference14r1:Apps/PbxManager/App Contact Widgets

2023-11-28T06:38:55Z

Tac: /* Add an App */

[[File:Contact-Widgets.png|150px|frame|alt=Contact Widgets App|Contact Widgets App]]

This PBX Manager Plugin contains 1 section:
* Add, edit or delete Contact Widgets App Objects on the PBX.

== Add an App ==
; Name
: The name displayed for the App Object.

; SIP
: The sip-id for the App Object, which must be unique.

; PBX
: Name of the PBX (required in multi-PBX environments only).

; Licenses
: If you want the Contact Widgets App to consume licenses.
: Video License is required to make video calls.
: Widget Licenses are required to remove innovaphone-branding from Widget UI.

; Config Templates
: Assign the app to any config template.

Reference14r1:Apps/PbxManager/App Contact Widgets

2023-11-20T14:11:32Z

Tac:

[[File:Contact-Widgets.png|150px|frame|alt=Contact Widgets App|Contact Widgets App]]

This PBX Manager Plugin contains 1 section:
* Add, edit or delete Contact Widgets App Objects on the PBX.

== Add an App ==
; Name
: The name displayed for the App Object.

; SIP
: The sip from the App Object, which must be unique.

; PBX
: Name of the PBX (required in multi-PBX environments only).

; Licenses
: If you want the Contact Widgets App to consume licenses.
: Video License is required to make video calls.
: Widget Licenses are required to remove innovaphone-branding from Widget UI.

; Config Templates
: Assign the app to any config template.

Reference14r1:Apps/PbxManager/App Contact Widgets

2023-11-20T14:11:05Z

Tac: /* Add an App */

This PBX Manager Plugin contains 1 section:
* Add, edit or delete Contact Widgets App Objects on the PBX.
[[File:Contact-Widgets.png|150px|frame|alt=Contact Widgets App|Contact Widgets App]]

== Add an App ==
; Name
: The name displayed for the App Object.

; SIP
: The sip from the App Object, which must be unique.

; PBX
: Name of the PBX (required in multi-PBX environments only).

; Licenses
: If you want the Contact Widgets App to consume licenses.
: Video License is required to make video calls.
: Widget Licenses are required to remove innovaphone-branding from Widget UI.

; Config Templates
: Assign the app to any config template.

Reference14r1:Apps/PbxManager/App Contact Widgets

2023-11-20T14:02:06Z

Tac:

Reference14r1:Apps/PbxManager/App Contact Widgets

2023-11-20T13:59:17Z

Tac: Created page with "This PBX Manager Plugin contains 1 section: * Add, edit or delete Contact Widgets App Objects on the PBX. thumb frame Contact Widgets App == Add an App == ; Name : The name displayed for the App Object. ; SIP : The sip from the App Object, which must be unique. ; Config Template : Assign App to any config template"

This PBX Manager Plugin contains 1 section:
* Add, edit or delete Contact Widgets App Objects on the PBX.
[[File:Contact-Widgets.png|thumb]]
[[File:Contact Widgets App|frame]]
[[File:Contact-Widgets.png|alt=Contact Widgets App|Contact Widgets App]]

== Add an App ==
; Name
: The name displayed for the App Object.

; SIP
: The sip from the App Object, which must be unique.

; Config Template
: Assign App to any config template

File:Contact-Widgets.png

2023-11-20T13:56:54Z

Tac:

app icon

File:Widget-code-popup.png

2023-10-20T09:32:53Z

Tac:

File:Adding-new-agents.png

2023-10-20T09:32:04Z

Tac:

File:Widget-new-widget-features.png

2023-10-20T09:31:34Z

Tac:

File:Widget-code-new-widget.png

2023-10-20T09:30:08Z

Tac:

Reference14r1:Concept Contact Widgets

2023-10-20T09:29:21Z

Tac:

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[File:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[File:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Name","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Name" response providing the widget's display-name. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Reference14r1:Concept Contact Widgets

2023-10-20T09:28:57Z

Tac: /* Overview */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[File:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[Bild:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[Bild:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Name","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Name" response providing the widget's display-name. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

File:Concept-widgets-overview.png

2023-10-20T08:49:56Z

Tac:

File:Sidebar-Widget.png

2023-10-20T08:48:45Z

Tac:

Reference14r1:Concept Contact Widgets

2023-10-20T08:48:02Z

Tac: /* What is a Contact Widget? */

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[File:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[File:Sidebar-Widget.png]]

= Overview =
[[Bild:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[Bild:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[Bild:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Name","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Name" response providing the widget's display-name. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

File:Cardset-widget.png

2023-10-20T08:47:01Z

Tac:

Reference14r1:Concept Contact Widgets

2023-10-20T08:42:37Z

Tac: Created page with "{{FIXME|reason=still in progress}} Conference = Applies To = * innovaphone PBX from version 14r1 * innovaphone Application Platform = Requirements = * innovaphone PBX * innovaphone Application Platform * Firmware Version 14r1 = What is a Contact Widget? = A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat..."

{{FIXME|reason=still in progress}}
[[Category:Concept|Conference]]

= Applies To =
* innovaphone PBX from version 14r1
* innovaphone Application Platform

= Requirements =
* innovaphone PBX
* innovaphone Application Platform
* Firmware Version 14r1

= What is a Contact Widget? =
A Contact Widget (or Website Widget) is a thing that can be added to a website. It offers to website visitors a way to get in contact with agents (e.g. help-desk). Website visitors can start chat sessions (asking questions, getting answers) or can start voice or even video calls.

An nice example for a "Sidebar Widget" can be viewed [https://www.innovaphone.com/de/ip-telefonie/innovaphone-pbx.html here]. 
When you have opened this website the Sidebar Widget comes slowly into view on the right side.

Example of a Cardset-Widget:

[[Bild:Cardset-widget.png]]

Example of a Sidebar-Widget:

[[Bild:Sidebar-Widget.png]]

= Overview =
[[Bild:Concept-widgets-overview.png|thumb|Overview]]
The central part of the new Widgets-Concept is the '''Contact-Widgets-App'''.
The Contact Widgets App is installed on the innovaphone Application Platform and it allows a PBX user to define Contact Widgets.

Contact Widgets can be integrated in a Website to offer easy ways to website users to contact '''Agents'''. Agents are PBX users meant to communicate with external clients. 
There are 2 fundamental types of Contact Widgets:
* '''Sidebar Widgets'''
* '''Cardset Widgets'''

A Sidebar Widget appears one side of the website trying to take as less space as possible. The website visitor can expand the Sidebar Widget if interested. 
A Cardset Widget appears as integrated part of the website content, offering one (or more) contacts in form of ordinary business cards.

= Configuration =
* Download the 'Contact Widgets App' via App Store.
* Install the App on the App Platform Manager.
* Create an instance for the Widgets App on the Manager. We recommend to use no capital letters and no special characters (also such as space).
* Create a new PBX Object with the PBX Manager Plugin. (*)
* Assign App to authorized (admin) users, which will be allowed to create/change/delete Contact Widgets.

(*) You can also create the PBX Object manually: 
* Create a new object of type "App".
* Give it a "Long Name" ("Contact Widgets") and a Name ("widgets").
* On the "App" tab configure URL to App Service on App Platform ("http://<ipaddress-or-dnsname>/widgets/innovaphone-widgets").
* Activate option "Websocket"
* Grant access to APIs: "PbxSignal" (mandatory), "Admin" (optional) and "PbxApi" (mandatory)

= Using the Contact Widgets App =
Click on one of the buttons (depending on what type of widget you want to create):
* [+ Add new sidebar widget]
* [+ Add new cardset widget]
A new (empty) widget is displayed. You can give the widget a name by clicking the pen-symbol. The widget name helps to identify widgets as soon the number of widgets starts to grow. 
You can expand and collaps widgets by clicking the header of each widget.
[[Image:Widget-code-new-widget.png|thumb|New Widget]]

== Creating a new Widget ==

New Widget features and options

*You can add the main contact details for this widget
*Select the default language
*Set your prefered font settings
*Change the colour settings
*Change the margin settings
*z-index

[[Image:Widget-new-widget-features.png|thumb|Widget Features]]

== Adding Agent to Widget ==
You can add and remove Agents to a Widget. Agents can be contacted by external website visitors. 
New agents are added by clicking the [+] button inside the agents container.
[[Bild:Adding-new-agents.png|thumb|Adding agents]]
A dialog opens where you can define the agent. It all starts with the agent's 'SIP-ID'. That's the dialable PBX user address. You can use the search function to find a PBX user by name.

There are several (optional) attributes you can set for an agent, like 'Display name', 'Phone number', 'Email address' and 'Picture'. A picture can be placed by drag & drop or can be selected from local disk by clicking the placeholder rectangle.

Finally you can define the ways of communication the agent is available for:
* Voice-only calls
* Video calls (including voice)
* Chat
* Email

For a Cardset-Widget the order of agents could be relevant. You can change the order of agents in the Widgets-App by easy drag & drop using the mouse.

Each widget gets a unique ID (uuid) assigned on its initial creation. This uuid is used to identify the widget when it is integrated into a website.

= Integrating Widgets into Website =
Now it is the website admin's turn to integrate the widget into the website. 
To do this, click the [Code] button in the Widgets App at that widget you want to include. A popup appears showing a handful of code lines (HTML and Javascript). 
[[Bild:Widget-code-popup.png|thumb|Code Popup]]
You can ''copy'' the code lines into clipboard by clicking the [Copy] button. 
You can ''paste'' the code lines from clipboard into your website code. 
There's also a [Download] button. When clicking this button a small HTML file is saved on your local computer. This HTML file can be opened in a browser to preview the widget and test the widget's functionality.

== Content-Security-Policy ==
If the website uses Content-Security-Policy (CSP) it could be necessary to add entries to config sections 'default-src' and 'img-src'.
* The Widget opens a secure websocket connection (wss:)
* The Widget loads images via Data-URL (data:).
<meta
http-equiv="Content-Security-Policy" content="
default-src 'self' '''wss://*.innovaphone.com'''; img-src '''data:''';"
/>

= After Integration =
Once your widget is live on the website you can still change and update the widget in the Widgets-App. You can update the list of agents or change any other attribute. As soon as you click the widget's [Save] button any open widget instance in a web browser will update immmediately. No need for the website administrator to update the code.

= Widget-API — Protocol between Website Widget and App Service =
Basically, this section does not matter. To create and use widgets, knowledge about the protocol is not required. 
All who are interested in technical details are welcome to read on.

== Loading the Widget ==

When a widget is loaded in the browser window of the website visitor, a websocket connection is opened to the app service on the innovaphone Application Platform. Once the websocket connection is established it goes like this:
<pre>
[1] {"mt":"Start","uuid":"fadc5da4cae94bfc9434d9957ea08ccb"}
[2] {"mt":"Name","name":"Visitenkarten","lang":"de","strings":{...}}
[3] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
[4] {"mt":"GetPicture","id":"atlantis"}
[5] {"mt":"Info","id":"columbia","dn":"Columbia","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":1}
[6] {"mt":"GetPicture","id":"columbia"}
[7] {"mt":"IceConfig","stun":"stun.innovaphone.com","turn":"turn.innovaphone.com"}
[8] {"mt":"Picture","id":"atlantis","url":"data:image/jpeg;base64..."}
[9] {"mt":"Picture","id":"columbia","url":"data:image/jpeg;base64..."}
[10] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"offline","media":["voice","video","email","chat"],"order":0}
[11] {"mt":"Info","id":"atlantis","dn":"Atlantis","department":"","phonenumber":"","email":"","company":{},"presence":"online","media":["voice","video","email","chat"],"order":0}
</pre>

[1] The "Start" request is sent with the unique id of the widget. 
[2] The app service sends the "Name" response providing the widget's display-name. 
[3]-[6] The app service sends "Info" messages for all configured agents. Each "Info" message triggers a "GetPicture" request to get a picture of the agent. 
[7] The app service sends "IceConfig" providing the STUN and TURN config required for media calls. 
[8]-[9] The app service sends "Picture" messages for all agents. 
[10]-[11] The presence of an agent may change over time. Presence updates are provided with "Info" messages.

== Initiating a call ==

<pre>
[1] {"mt":"CreateCall","dest":"atlantis","dn":"Mein Name"}
[2] {"mt":"Channels","cmd":"PROPOSAL","sdp":"..."}
[3] {"mt":"CallInfo","state":"alerting"}
[4] {"mt":"CallInfo","state":"connected","cmd":"SELECT","sdp":"..."}
[5] {"mt":"ClearCall"}
[6] {"mt":"CallInfo","state":"terminated"}
</pre>

[1] "CreatCall" message sets the target of the call ('dest') and the own display name ('dn'). 
[2] "Channels" message provides the media offer for this call. Complete SDP offer is provided. 
[3] "CallInfo" is received giving information about the call's current state. 
[4] Next "CallInfo" is received telling the call was answered and deliviering the remote side's media answer. 
[5] Web site user terminates the call. 
[6] The final "CallInfo" message is received. 

= Troubleshooting =
'''If an issue can be reproduced'''

Main Page

2023-05-25T11:26:47Z

Tac:

__NOTOC__

<div style="margin:0px; margin-right:10px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0em 1em;">

== Remote Support ==

[https://get.anydesk.com/PK8coqHH/AnyDesk.exe Download Anydesk]

== Searching ==
Searching in wiki works, but is sometimes cumbersome. However, you can have Google do the job for you. Try [https://www.google.de/search?q=site%3Ainnovaphone.com+xml+documentation <code>site:innovaphone.com your search terms</code>] to search the innovaphone sites for matches!

If you still don't find what you are looking for, [mailto:presales-at-innovaphone-dot-com drop us a message]
</div>


<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em;">



== Latest News ==

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 13:24, 25 May 2023 (CEST)
[[Howto:Firmware_Upgrade_V13r3 | Version 13r3 SR5]] is now available from the new [http://store.innovaphone.com/release/download.htm download page].
[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 13:24, 25 May 2023 (CEST)
[[Howto:Firmware_Upgrade_V13r2 | Version 13r2 SR23]] is now available from the new [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] ([[User talk:Afi|talk]]) 11:11, 2 May 2023 (CEST)
[[Support:Wireless_Handset_Firmware_IP73_1008_(4.0.2)_released | Wireless Handset Firmware IP73 1008 (4.0.2)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Smayoral|sma]] 10:29, 27 April 2023 (CEST)
[[Support:Firmware V12r2 product/12r2/firmware 125871 (sr 62) available | Version 12r2 Service Release 62]] is now available from the [http://store.innovaphone.com/release/download.htm download page].
[[User:Smayoral|sma]] 10:29, 27 April 2023 (CEST)
[[Support:Firmware V11r2 product/11r2/firmware 113809 (sr 66) available | Version 11r2 Service Release 66]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Cam|Cam]] 16:43, 25 April 2023 (CEST)
[[App Working Beta beta1 available]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] 15:38, 6 February 2023 (CET)
[[Support:Wireless_Handset_Firmware_IP62_3040621_(6.2.7)_released | Wireless Handset Firmware IP62 3040621 (6.2.7)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 13:13, 6 February 2023 (CET)
[[Support:WinPDM_Software_3130113_%284.1.8%29_released | WinPDM Software 3130113 (4.1.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Inno-mst|Inno-mst]] 17:40, 14 February 2022 (CET)
[[Support:Firmware V12r1 product/12r1/firmware 121355(sr 46) available | Version 12r1 Service Release 46]] is now available from the [https://store.innovaphone.com/release/download.htm download page].

[[User:Inno-mst|Inno-mst]] 11:22, 14 April 2022 (CEST)
[[Support:Operator9 90246 (hotfix24) available | Operator9 hotfix24]] is now available from [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Afi|Afi]] 15:05, 11 February 2022 (CET)
[[Support:Wireless_Handset_Firmware_IP64_10313_(2.12.10)/IP65_10118_(2.12.10)_released | Wireless Handset Firmware IP64 10313 (2.12.10)/IP65 10118 (2.12.10)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 16 June 2021 (CEST)
[[Support:iQM_Build_8029100_available | IQM Build 8029100 Hotfix34]] is now available from the [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Afi|Afi]] 12:46, 16 June 2021 (CEST))
[[Support:TAPI Service Provider 8188 (hotfix21) available|TAPI Service Provider 8188 (hotfix21)]] is now available from [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Linux_Application_Platform_100271_(sr64)_available | Linux Application Platform V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Reporting_100271_(sr64)_available | innovaphone Reporting V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Fax_100271_(sr64)_available | innovaphone Fax V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Exchange_Calendar_Connector_100271_(sr64)_available | innovaphone Exchange Calendar Connector V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 18:21, 12 October 2020 (CEST)
[[Support:Wireless_Handset_Firmware_IP61_3022811_(4.7.8)/IP63_3022912_(4.7.8)_released | Wireless Handset Firmware IP61 3022811 (4.7.8)/IP63 3022912 (4.7.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 21:30, 27 March 2020 (CET)
[[Support:Wireless_Handset_Firmware_and_Management_Software_product/9.00/wireless_100037_%28hotfix19%29_available | Wireless Package hotfix 19]] is now available from the [http://download.innovaphone.com/ice/9.00#wireless V9 download area].

[[User:Dde|Dde]] 07:56, 9 March 2020 (CET)
[[Support:App_Platform_build_90007_available | App Platform build 90007]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 02 March 2020 (CET)
[[Support:Recording_Build_121100_available | innovaphone Recording SR29 build 121100]] is now available from the [http://download.innovaphone.com/ice/10.00/#recording V10 download area].

== New Articles ==

{{Special:Newestpages/all/20}}
</div>

<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em; font-size:1">
== More innovaphone Ressources ==
* [http://www.innovaphone.com Home Page]
* [http://download.innovaphone.com Download Site ]
* [http://my.innovaphone.com my.innovaphone ]
* [http://mantis.innovaphone.com/ Ticketing System ]
* [[Support:What are the Roadmap Documents? | Roadmaps ]]
</div>

Main Page

2023-05-25T11:24:12Z

Tac: /* Latest News */

__NOTOC__

<div style="margin:0px; margin-right:10px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0em 1em;">

== Remote Support ==

[https://get.anydesk.com/PK8coqHH/AnyDesk.exe Download Anydesk]

== Searching ==
Searching in wiki works, but is sometimes cumbersome. However, you can have Google do the job for you. Try [https://www.google.de/search?q=site%3Ainnovaphone.com+xml+documentation <code>site:innovaphone.com your search terms</code>] to search the innovaphone sites for matches!

If you still don't find what you are looking for, [mailto:presales-at-innovaphone-dot-com drop us a message]
</div>


<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em;">



== Latest News ==

[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 13:24, 25 May 2023 (CEST)
[[Howto:Firmware_Upgrade_V13r3 | Version 13r3 SR5]] is now available from the new [http://store.innovaphone.com/release/download.htm download page].
[[User:Tac|Tac]] ([[User talk:Tac|talk]]) 13:24, 25 May 2023 (CEST)
[[Howto:Firmware_Upgrade_V13r2 | Version 13r2 SR23]] is now available from the new [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] ([[User talk:Afi|talk]]) 11:11, 2 May 2023 (CEST)
[[Support:Wireless_Handset_Firmware_IP73_1008_(4.0.2)_released | Wireless Handset Firmware IP73 1008 (4.0.2)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Smayoral|sma]] 10:29, 27 April 2023 (CEST)
[[Support:Firmware V13r3 product/13r3/firmware 137818 (sr 4) available | Version 13r3 Service Release 4]] is now available from the [http://store.innovaphone.com/release/download.htm download page].
[[User:Smayoral|sma]] 10:29, 27 April 2023 (CEST)
[[Support:Firmware V13r2 product/13r2/firmware 136416 (sr 22) available | Version 13r2 Service Release 22]] is now available from the [http://store.innovaphone.com/release/download.htm download page].
[[User:Smayoral|sma]] 10:29, 27 April 2023 (CEST)
[[Support:Firmware V12r2 product/12r2/firmware 125871 (sr 62) available | Version 12r2 Service Release 62]] is now available from the [http://store.innovaphone.com/release/download.htm download page].
[[User:Smayoral|sma]] 10:29, 27 April 2023 (CEST)
[[Support:Firmware V11r2 product/11r2/firmware 113809 (sr 66) available | Version 11r2 Service Release 66]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Cam|Cam]] 16:43, 25 April 2023 (CEST)
[[App Working Beta beta1 available]] is now available from the [http://store.innovaphone.com/release/download.htm download page].

[[User:Afi|Afi]] 15:38, 6 February 2023 (CET)
[[Support:Wireless_Handset_Firmware_IP62_3040621_(6.2.7)_released | Wireless Handset Firmware IP62 3040621 (6.2.7)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 13:13, 6 February 2023 (CET)
[[Support:WinPDM_Software_3130113_%284.1.8%29_released | WinPDM Software 3130113 (4.1.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Inno-mst|Inno-mst]] 17:40, 14 February 2022 (CET)
[[Support:Firmware V12r1 product/12r1/firmware 121355(sr 46) available | Version 12r1 Service Release 46]] is now available from the [https://store.innovaphone.com/release/download.htm download page].

[[User:Inno-mst|Inno-mst]] 11:22, 14 April 2022 (CEST)
[[Support:Operator9 90246 (hotfix24) available | Operator9 hotfix24]] is now available from [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Afi|Afi]] 15:05, 11 February 2022 (CET)
[[Support:Wireless_Handset_Firmware_IP64_10313_(2.12.10)/IP65_10118_(2.12.10)_released | Wireless Handset Firmware IP64 10313 (2.12.10)/IP65 10118 (2.12.10)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 16 June 2021 (CEST)
[[Support:iQM_Build_8029100_available | IQM Build 8029100 Hotfix34]] is now available from the [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Afi|Afi]] 12:46, 16 June 2021 (CEST))
[[Support:TAPI Service Provider 8188 (hotfix21) available|TAPI Service Provider 8188 (hotfix21)]] is now available from [https://store.innovaphone.com/release/download.htm the Software download area].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Linux_Application_Platform_100271_(sr64)_available | Linux Application Platform V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Reporting_100271_(sr64)_available | innovaphone Reporting V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Fax_100271_(sr64)_available | innovaphone Fax V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Dde|Dde]] 13:17, 2 November 2020 (CET)
[[Support:Innovaphone_Exchange_Calendar_Connector_100271_(sr64)_available | innovaphone Exchange Calendar Connector V10 100271 sr64]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 18:21, 12 October 2020 (CEST)
[[Support:Wireless_Handset_Firmware_IP61_3022811_(4.7.8)/IP63_3022912_(4.7.8)_released | Wireless Handset Firmware IP61 3022811 (4.7.8)/IP63 3022912 (4.7.8)]] is now available from the [https://store.innovaphone.com/release/download.htm App store].

[[User:Afi|Afi]] 21:30, 27 March 2020 (CET)
[[Support:Wireless_Handset_Firmware_and_Management_Software_product/9.00/wireless_100037_%28hotfix19%29_available | Wireless Package hotfix 19]] is now available from the [http://download.innovaphone.com/ice/9.00#wireless V9 download area].

[[User:Dde|Dde]] 07:56, 9 March 2020 (CET)
[[Support:App_Platform_build_90007_available | App Platform build 90007]] is now available from the [http://store.innovaphone.com/release/download.htm App store].

[[User:kwa|kwa]] 14:00, 02 March 2020 (CET)
[[Support:Recording_Build_121100_available | innovaphone Recording SR29 build 121100]] is now available from the [http://download.innovaphone.com/ice/10.00/#recording V10 download area].

== New Articles ==

{{Special:Newestpages/all/20}}
</div>

<div style="margin:0px; margin-right:10px; margin-top:15px; border:1px solid #58C4C3; background-color:#F4F4F4; padding:0em 1em 0.5em 1em; font-size:1">
== More innovaphone Ressources ==
* [http://www.innovaphone.com Home Page]
* [http://download.innovaphone.com Download Site ]
* [http://my.innovaphone.com my.innovaphone ]
* [http://mantis.innovaphone.com/ Ticketing System ]
* [[Support:What are the Roadmap Documents? | Roadmaps ]]
</div>

Reference13r3:Concept App SoftphoneApp

2022-11-30T10:52:47Z

Tac: /* In-call feature */

[[Category:Concept|Apps]]
[[Category:Concept_App_SoftphoneApp]]
{{FIXME|reason=This product is in the beta phase and is not yet finished}}

== Applies To ==

* innovaphone PBX from version 13r3
* myApps clients version 13r3

== Requirements ==

* innovaphone PBX
* myApps native client (Windows, MacOS, iOS or Android) or a Browser (Chrome, Firefox, ...)
* App(phone) and App(softphone) license per user.
* Port license per registered softphone

== Compatibility ==

* Softphone App running in a myApps 13r3 native client is not compatible with a 13r2/13r1 PBX.

== Concept ==

=== Configuration ===

The Softphone App is directly loaded from the PBX either in a native client or in a brower.

For configuring the softphone app at a user object
# enable the app "softphone".
# activate the App(softphone) and App(phone) licenses.
# create a device for registration and configure "softphone" as the device app.

Additionally users can add a softphone and the corresponding device themselves using the Profile App, as long as (1.) and (2.) are already configured by the admin.

=== Standard App, Wake and Push mechanism ===

myApps client allows to define a default app for telephony.

If the Softphone App is defined as the default app, the PBX will wake the softphone if the user receives a call and the softphone is not running.

=== Technical Overview ===

==== Native client ====

If the softphone App is loaded in a native client, a signaling module establishes the registration to the PBX and handles signaling messages for the calls.

That means a running Web UI is not needed to establish a connection to the PBX and to start and receive calls. Main advantages of this solution are:
* Calls are signaled to the user even if the UI is not opened (important in mobile environment to present the call faster to the user)
* Calls are not terminated if the UI is closed

A first start of myApps triggers an automatic launch of the Softphone App (defined as Standard App) in order to get PBX url, app, hardware id and credentials for connecting to the PBX.

This information is stored locally in the operating system and is only accessible by the user (e.g. Windows Registry).

Following starts of myApps do not require to launch the Softphone since the signaling module is able to connect to the PBX with the stored information.

If the Softphone App is removed as standard app this data is deleted from the operating system. Therefore anytime a new Softphone App is defined as standard app it will be started automatically in order to get the information.

Once myApps is started the signaling module automatically opens a websocket connection to the PBX and registers to it. At this point the signaling module is able to receive calls (as mentioned before this is really important with mobile devices)

While the UI is still not running a native notification will be presented to the user in order to accept or reject the call. In the meantime the Softphone UI will be started since it is defined as standard app but the good point is that the user does not have to wait until the Softphone UI is fully loaded like it happened in 13r1 or 13r2 versions.

If the call is accepted before the Softphone UI runs it will only have audio. Video will be added later if the "Autostart video" setting is on.

When the Softphone UI is started it opens a websocket connection to the new signaling module in order to monitor the calls and to send user commands (terminate call, appSharing, view mode, mute, add/remove video, ...) to the module.

If the Softphone UI is closed during a call. The calls switches to only audio and a new notification shows up in order to be able to disconnect the call.

==== Browser ====

If the Softphone App is loaded in a browser, it uses the WebRTC technology.

The registration to the PBX and signaling is done in Javascript and therefore the Softphone UI needs to run in order to make and receive calls.

This solution does not offer some features which are provided by the native services.

== Features ==

Some functionalities are available even if the Softphone UI is not running and there are also differences between native clients and browsers

=== Softphone UI not running ===

{|
! style="text-align: left; font-weight: bold" | Feature

! style="text-align: left; font-weight: bold"| Availability
|-

| || Windows || iOS || Android || macOS || Browser<ref>This refers to the myApps web application running in a browser with no platform services available</ref>

|-
| Audio calls only || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Accept/reject incoming calls (using OS notification) || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Disconnect calls (using OS notification) || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Possibility to record calls [https://wiki.innovaphone.com/index.php?title=Reference13r3:Concept_myApps_platform_services#Recording Recording] || ✔ || ✔ || ✔ || ✔ || ✗

|}

Use cases:
* Smartphones: On the smartphones incoming calls (via Push) can be accepted, while the UI is still loading.
* Windows: Call is not disconnected when closing Softphone App inside myApps.

=== Additional features with Softphone UI ===

==== In-call feature ====

{|
! style="text-align: left; font-weight: bold" | Feature

! style="text-align: left; font-weight: bold"| Availability
|-

| || Windows || iOS || Android || macOS || Browser<ref>This refers to the myApps web application running in a browser with no platform services available</ref>

|-
| Media: Multi-Video, application sharing, non-persistent chat
|| ✔ || ✔ || ✔ || ✔ || ✔
|-
| Call control: Hold, transfer, park, DTMF || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Local 3-party-conference || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Additional conference control: Request to speak, list of participants || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Display recording state. Start / stop recording? || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Call completion || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Hide own number, send number || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Start external application for call (automatic or manual) [https://wiki.innovaphone.com/index.php?title=Reference13r3:Concept_myApps_platform_services#Call_an_external_application_for_calls External Applications] || ✔ || ✗ || ✗ || ✔ || ✗
|-
| Detach video || ✔ || ✗ || ✗ || ✔ || ✗
|-
| Acoustic "Blubb" when joining a conference || ✔ || ✔ || ✔ || ✔ || ✔
|}

==== General features (not call-related) ====

{|
! style="text-align: left; font-weight: bold" | Feature
! style="text-align: left; font-weight: bold"| Availability
|-
| || Windows || iOS || Android || macOS || Browser<ref>This refers to the myApps web application running in a browser with no platform services available</ref>
|-
| Favorites (profile picture, dialog monitoring, start call, start chat, pickup, transfer)
|| ✔ || ✔ || ✔ || ✔ || ✔
|-
| Call history (profile picture, start call, start chat, transfer) || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Search (profile picture, contact details, start call, start chat, transfer) || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Call forwardings (display and configuration) || ✔ || ✔ || ✔ || ✔ || ✔
|-
| New ringtones added in 13r3 || ✔ || ✔ || ✔ || ✔ || ✔
|}

=== Other features ===

Additionally Android Auto is now supported and we also did a general rework of the Sofphone UI:
* Multi-video support in conferences (similar to Conference Web Access)
* Improved usability

== Known problems ==

== Related Articles ==

* [[Reference13r3:Concept_myApps_platform_services]]
* [[Reference13r3:Concept_myApps]]
* [[Reference13r3:Concept_Multi-Video-Conference]]

Reference13r3:Concept App SoftphoneApp

2022-11-30T10:52:28Z

Tac:

[[Category:Concept|Apps]]
[[Category:Concept_App_SoftphoneApp]]
{{FIXME|reason=This product is in the beta phase and is not yet finished}}

== Applies To ==

* innovaphone PBX from version 13r3
* myApps clients version 13r3

== Requirements ==

* innovaphone PBX
* myApps native client (Windows, MacOS, iOS or Android) or a Browser (Chrome, Firefox, ...)
* App(phone) and App(softphone) license per user.
* Port license per registered softphone

== Compatibility ==

* Softphone App running in a myApps 13r3 native client is not compatible with a 13r2/13r1 PBX.

== Concept ==

=== Configuration ===

The Softphone App is directly loaded from the PBX either in a native client or in a brower.

For configuring the softphone app at a user object
# enable the app "softphone".
# activate the App(softphone) and App(phone) licenses.
# create a device for registration and configure "softphone" as the device app.

Additionally users can add a softphone and the corresponding device themselves using the Profile App, as long as (1.) and (2.) are already configured by the admin.

=== Standard App, Wake and Push mechanism ===

myApps client allows to define a default app for telephony.

If the Softphone App is defined as the default app, the PBX will wake the softphone if the user receives a call and the softphone is not running.

=== Technical Overview ===

==== Native client ====

If the softphone App is loaded in a native client, a signaling module establishes the registration to the PBX and handles signaling messages for the calls.

That means a running Web UI is not needed to establish a connection to the PBX and to start and receive calls. Main advantages of this solution are:
* Calls are signaled to the user even if the UI is not opened (important in mobile environment to present the call faster to the user)
* Calls are not terminated if the UI is closed

A first start of myApps triggers an automatic launch of the Softphone App (defined as Standard App) in order to get PBX url, app, hardware id and credentials for connecting to the PBX.

This information is stored locally in the operating system and is only accessible by the user (e.g. Windows Registry).

Following starts of myApps do not require to launch the Softphone since the signaling module is able to connect to the PBX with the stored information.

If the Softphone App is removed as standard app this data is deleted from the operating system. Therefore anytime a new Softphone App is defined as standard app it will be started automatically in order to get the information.

Once myApps is started the signaling module automatically opens a websocket connection to the PBX and registers to it. At this point the signaling module is able to receive calls (as mentioned before this is really important with mobile devices)

While the UI is still not running a native notification will be presented to the user in order to accept or reject the call. In the meantime the Softphone UI will be started since it is defined as standard app but the good point is that the user does not have to wait until the Softphone UI is fully loaded like it happened in 13r1 or 13r2 versions.

If the call is accepted before the Softphone UI runs it will only have audio. Video will be added later if the "Autostart video" setting is on.

When the Softphone UI is started it opens a websocket connection to the new signaling module in order to monitor the calls and to send user commands (terminate call, appSharing, view mode, mute, add/remove video, ...) to the module.

If the Softphone UI is closed during a call. The calls switches to only audio and a new notification shows up in order to be able to disconnect the call.

==== Browser ====

If the Softphone App is loaded in a browser, it uses the WebRTC technology.

The registration to the PBX and signaling is done in Javascript and therefore the Softphone UI needs to run in order to make and receive calls.

This solution does not offer some features which are provided by the native services.

== Features ==

Some functionalities are available even if the Softphone UI is not running and there are also differences between native clients and browsers

=== Softphone UI not running ===

{|
! style="text-align: left; font-weight: bold" | Feature

! style="text-align: left; font-weight: bold"| Availability
|-

| || Windows || iOS || Android || macOS || Browser<ref>This refers to the myApps web application running in a browser with no platform services available</ref>

|-
| Audio calls only || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Accept/reject incoming calls (using OS notification) || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Disconnect calls (using OS notification) || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Possibility to record calls [https://wiki.innovaphone.com/index.php?title=Reference13r3:Concept_myApps_platform_services#Recording Recording] || ✔ || ✔ || ✔ || ✔ || ✗

|}

Use cases:
* Smartphones: On the smartphones incoming calls (via Push) can be accepted, while the UI is still loading.
* Windows: Call is not disconnected when closing Softphone App inside myApps.

=== Additional features with Softphone UI ===

==== In-call feature ====

{|
! style="text-align: left; font-weight: bold" | Feature

! style="text-align: left; font-weight: bold"| Availability
|-

| || Windows || iOS || Android || macOS || Browser<ref>This refers to the myApps web application running in a browser with no platform services available</ref>

|-
| Media: Multi-Video, application sharing, non-persistent chat
|| ✔ || ✔ || ✔ || ✔ || ✔
|-
| Call control: Hold, transfer, park, DTMF || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Local 3-party-conference: || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Additional conference control: Request to speak, list of participants || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Display recording state. Start / stop recording? || ✔ || ✔ || ✔ || ✔ || ✗
|-
| Call completion || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Hide own number, send number || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Start external application for call (automatic or manual) [https://wiki.innovaphone.com/index.php?title=Reference13r3:Concept_myApps_platform_services#Call_an_external_application_for_calls External Applications] || ✔ || ✗ || ✗ || ✔ || ✗
|-
| Detach video || ✔ || ✗ || ✗ || ✔ || ✗
|-
| Acoustic "Blubb" when joining a conference || ✔ || ✔ || ✔ || ✔ || ✔
|}

==== General features (not call-related) ====

{|
! style="text-align: left; font-weight: bold" | Feature
! style="text-align: left; font-weight: bold"| Availability
|-
| || Windows || iOS || Android || macOS || Browser<ref>This refers to the myApps web application running in a browser with no platform services available</ref>
|-
| Favorites (profile picture, dialog monitoring, start call, start chat, pickup, transfer)
|| ✔ || ✔ || ✔ || ✔ || ✔
|-
| Call history (profile picture, start call, start chat, transfer) || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Search (profile picture, contact details, start call, start chat, transfer) || ✔ || ✔ || ✔ || ✔ || ✔
|-
| Call forwardings (display and configuration) || ✔ || ✔ || ✔ || ✔ || ✔
|-
| New ringtones added in 13r3 || ✔ || ✔ || ✔ || ✔ || ✔
|}

=== Other features ===

Additionally Android Auto is now supported and we also did a general rework of the Sofphone UI:
* Multi-video support in conferences (similar to Conference Web Access)
* Improved usability

== Known problems ==

== Related Articles ==

* [[Reference13r3:Concept_myApps_platform_services]]
* [[Reference13r3:Concept_myApps]]
* [[Reference13r3:Concept_Multi-Video-Conference]]

Reference:Supported SIP Features and List of RFC's

2022-10-17T08:14:58Z

Tac: /* List of supported RFCs */

==Summary==
SIP Features and list of RFC’s supported in version 6 of innovaphone firmware

==Applies To==
This information applies to
* All innovaphone V6 devices
Build 06-6040001 and later.

==More Information==

===PBX Features and their corresponding RFCs===

MWI (RFC 3842/RFC 3265 "Subscription für message-summary")

DTMF (RFC 2833 "RTP payload for DTMF")

Name Identification (Display String, RFC 3325 "Asserted Identity")

Hold/Retrieve (RFC 3264 "Offer/Answer Model for SDP") [[Howto:SIP Reverse Negotiation - Call Transfer]]

Transfer (RFC 3515 "REFER Method", RFC 3891 "Replaces Header)

Coder Change [T.38] (RFC 3264 "Re-Negotiation")

Call Forwarding (PBX internal, "183 Call Is Being Forwarded", "Diversion Header")

Overlap Dialing (RFC 3578)

Dialoge State monitoring (partner Key) (RFC 4235)

Instant Messaging (RFC 3428)

=== CTI Features and their corresponding RFCs ===

Initiate outgoing call (a call with <code>Answer-Mode: Auto</code> header (RFC 5373) is sent to the originating phone)

Accept incoming call (an unsolicited NOTIFY-Request with <code>Event: talk</code> header (RFC 3265) is sent to the accepting phone)

In a scenario where a call is accepted on a different device (e.g. pickup group), the PBX will use the Reason Header <code>Reason: SIP ;cause=200 ;text="Call completed elsewhere"</code> in its Cancel Message to signal that a call is accepted elsewhere and must not be entered in the phones call list. (RFC 3326)

===List of supported RFCs===

*RFC 1889
RTP: Real-Time Transport Protocol

*RFC 1890
RTP Profile for Audio and Video Conferences with Minimal Control

*RFC 2327, RFC 3266, RFC 4566
SDP: Session Description Protocol

*RFC 2396
Uniform Resource Identifiers (URI): Generic Syntax

* RFC 2543
SIP: Session Initiation Protocol (obsolete)

* RFC 2616
Hypertext Transfer protocol (HTTP/1.1)

*RFC 2617
HTTP Authentication: Basic and Digest Access Authentication

*RFC 2782
A DNS RR for specifying the location of services (DNS SRV)

*RFC 2976
The SIP INFO Method (including the non-standard <code>application/dtmf-relay</code> and <code>application/dtmf</code> content types with a fixed duration of 250)

*RFC 3203
DHCP reconfigure extension

*RFC 3261
SIP: Session Initiation Protocol

*RFC 3263
Session Initiation Protocol (SIP): Locating SIP Servers

*RFC 3264
An Offer/Answer Model with the Session Description Protocol (SDP) [[Howto:SIP Reverse Negotiation - Call Transfer]]

*RFC 3265
SIP-Specific Event Notification

*RFC 3323
A Privacy Mechanism for the Session Initiation Protocol (SIP)

*RFC 3326
The Reason Header Field for the Session Initiation Protocol

*RFC 3389
RTP Payload for Comfort Noise

*RFC 3515
The Session Initiation Protocol (SIP) Refer Method

*RFC 3550
RTP: Transport Protocol for Real-Time Applications

*RFC 3551
RTP Profile for A/V Conferences with Minimal Control

*RFC 3555
MIME Type Registration of RTP Payload Formats

*RFC 3578
Mapping of Integrated Services Digital Network (ISDN) User Part (ISUP) Overlap Signalling to the Session Initiation Protocol (SIP)

*RFC 3680
SIP Event Package for Registrations

*RFC 3764
enumservice registration for SIP Adresses-of-Record

*RFC 3824
Using E.164 numbers with SIP

*RFC 3891
The Session Initiation Protocol ‘Replaces Header’

*RFC 3892
The SIP Referred-By Mechanism
-SIP-aware filtering (to prevent SIP attacks)

*RFC 3842
SIP Message Waiting

*RFC 3311
re-INVITE

*RFC 2833
DTMF via RTP Channel , RTP payload for DTMF

*RFC 3325
Name identification

*RFC 3578
Overlap Dialing

*RFC 3420
Internet Media Type message/sipfrag

*RFC 3428
Extension for Instant Messaging

*RFC 3262
Reliability of Provisional Responses in Session Initiation Protocol (SIP)

*RFC 4028
Session Timers in the Session Initiation Protocol (SIP)

*RFC 4235
Dialoge State monitoring (partner Key)

*RFC 4612
Real-Time Facsimile (T.38) - audio/t38 MIME Sub-type Registration

*RFC 4733
RTP Payload for DTMF Digits, Telephony Tones, and Telephony Signals

*RFC 4916
Connected Identity in the Session Initiation Protocol (SIP)

*RFC 5373
Requesting Answering Modes for the Session Initiation - only Header <code>Answer-Mode: Auto</code> for calls started via SOAP/TAPI is supported. Header <code>Priv-Answer-Mode</code> for urgent calls is not supported.

*RFC 4568
Session Description Protocol (SDP) Security Descriptions for Media Streams

===List of supported RFCs in V8===

*RFC 3863
Presence Information Data Format (PIDF)

*RFC 4480
Rich Presence Extensions to the Presence Information Data Format (PIDF)

*RFC 3856
A Presence Event Package for the Session Initiation Protocol (SIP)

===List of supported RFCs in V9===

*RFC 4235
An INVITE-Initiated Dialog Event Package for the Session Initiation Protocol (SIP)

*RFC 4040
RTP Payload Format for a 64 kbit/s Transparent Call

===List of supported RFCs in v11r1===
* RFC 5245
Interactive Connectivity Establishment (ICE)

* RFC 6336
Interactive Connectivity Establishment (ICE) Options

*RFC 5763
DTLS-SRTP Framework

===List of supported RFCs in v13r2===
*RFC 5626
Client-Initiated Connections in SIP

==Related Articles==
* [[Howto:SIP Reverse Negotiation - Call Transfer]]

* [[Howto:SIP Media Negotiation - Details]]
* [[Howto:Guidelines for Testing 3rd Party SIP Terminal Devices]]
* Additional RFC's listed here: [[Howto:Security_works_with_innovaphone]]

[[Category:Howto|{{PAGENAME}}]]
[[Category:Faq|{{PAGENAME}}]]

Reference13r3:Concept Multi-Video-Conference

2022-01-19T15:11:43Z

Tac: /* Multi-Video Signaling */

[[Category:Concept|Apps]]

== Description ==

The PBX conference object now supports multiple video streams.
Not only one video stream of the current speaker, but video streams from all participating users.

== Applies To ==

* innovaphone PBX from version 13r3

== Requirements ==

* innovaphone PBX
* Firmware V13r3xx
* Endpoints supporting the multi-video signaling technology

== Endpoints ==

In order to see multiple videos the endpoint must support the new multi-video signaling.
Available endpoints are:

* innovaphone Softphone-App (version 13r3 or higher)
* innovaphone Phone-App (version 13r3 or higher) and a desk-phone
* innovaphone Web Access Client

== Multi-Video Signaling ==

A multi-video conference starts as any other traditional conference by calling a conference object (See "How to configure a conference object" for mor information).
An audio-only connection is established at the very beginning. A welcome message might be played to the new participant (if configured).
After this initial call setup the calling endpoint is joined into the conference room. It now can hear all other participants and can speak to other participants.

To every participant the conference room provides information about all current participants.
This participant information block contains information about:

* Display name
* Status flags (e.g. is-muted, is-speaking, is-sharing, wants-to-speak)
* Video stream information (contains information about available video streams of a participant)

After having the initial audio-only connection established, an endpoint with a video camera may establish additional video-send connections.
These video-send signaling connections are independent from (but related to) the main connection (audio-only).
Up to 3 video-send connections can be established with different quality/bandwith profiles:

* LOW bandwith video stream (bandwith < 100 kbit/s)
* MEDIUM bandwith video stream (bandwith < 250 kbit/s)
* HIGH bandwith video stream (bandwith < 1000 kbit/s)

All these video streams are sent to the central conference. The central conference will broadcast these video streams to other particiants on demand.

Other participants get information about the offered video streams and other participants can get these video streams by opening dedicated video-recv connections.

[[Image:Conference_Videostreams.png]]

== Bandwith Consideration ==

File:Conference Videostreams.png

2022-01-19T15:10:26Z

Tac:

Reference13r3:Concept Multi-Video-Conference

2021-12-21T15:01:50Z

Tac: /* Multi-Video Signaling */

Reference13r3:Concept Multi-Video-Conference

2021-12-21T14:55:04Z

Tac: /* Multi-Video Signaling */

Reference13r3:Concept Multi-Video-Conference

2021-12-21T14:36:20Z

Tac: /* Multi-Video Signaling */

Reference13r3:Concept Multi-Video-Conference

2021-12-21T14:30:45Z

Tac: /* Multi-Video Signaling */