<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><p data-pasted="true"><strong><span style="font-size: 11pt;">In this guide we will cover:</span></strong><span style="box-sizing: inherit; font-size: 11pt;"><strong style="box-sizing: inherit; font-weight: 700;"><br>- What is the Progressive Web Application</strong></span></p><p><span style="font-size: 11pt;"><strong>- Agent Application Progressive Web App </strong></span></p><p><span style="font-size: 11pt;"><strong>- Portal Web Progressive App</strong></span></p><p><br></p><p><br></p><p><strong><span style="font-size: 14pt;">What is the Progressive Web Application</span></strong></p><p><span style="font-size: 11pt;">The progressive web app allows you to install Halo on your desktop for easy access. Opening the app will take you straight to your Halo, meaning you do not need to open your browser to access your instance. Any Agent/User with access to the instance will be able to download the Web App by following the process outlined below.</span></p><p><br></p><p><span style="font-size: 14pt;"><strong>Agent Application Progressive Web App</strong></span></p><p><span style="font-size: 11pt;">The Agent Application can be installed as a Progressive Web App by using the "Install Halo" option in your browser. </span></p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImExMDc5MjFlLTI1N2QtNDExYi04ZjRlLWJhYTk3MzdjMmNhZCJ9.MQouprBLeJTl74N-cDNHueofP4FHhF64qnsTdOhsbns" class="fr-fic fr-fil fr-dib" width="1065" height="237"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;" data-pasted="true"><strong style="box-sizing: inherit; font-weight: bolder;"><span style="box-sizing: inherit; font-size: 10pt;">Fig 1. Installing Halo as a Progressive Web App</span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Poppins, sans-serif, Roboto; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></p><p>When downloaded the app will show on your desktop. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImNhMzE1YTVhLTRmNDItNGFmOC04MGNmLTkyMjFkZTljNDZlYSJ9.GCVlPMB7KGI4n6Dhwi1EUvOeUbOuOHrxvA4w-fXPMLU" class="fr-fic fr-fil fr-dib" width="411" height="98"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;" data-pasted="true"><strong style="box-sizing: inherit; font-weight: bolder;"><span style="box-sizing: inherit; font-size: 10pt;">Fig 2. Web App in a Taskbar. </span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Poppins, sans-serif, Roboto; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></p><p data-pasted="true"><strong><span style="font-size: 14pt;">Portal Progressive Web App</span></strong></p><p><span style="font-size: 11pt;">To install the Self-Service Portal as a Progressive Web App, head to Configuration > Organisation > Configure My Organisation. In here you will find the option to change your portals Favicon, and a checkbox to "Allow the Portal to be installed as a Progressive Web App". When enabled you will be able to provide a name and description for your app as well as the logo. </span></p><p><br></p><p data-pasted="true"><span style="color: rgb(235, 107, 86);"><strong>Important: To do this you must have a self-service portal with it's own host name (separate URL from the Agent application).</strong></span></p><p><br></p><p><em data-pasted="true"><strong>Note: This will only work for hosted customers</strong></em></p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE3YjA3MzliLWUxOWMtNDQ1ZS05NjJkLWVhYjRiY2ExZTczNSJ9.29amYwyoLag-U18CnqKNONAd6-D5EH4oF9b5Nb6qDBM" class="fr-fic fr-fil fr-dib" width="865" height="930"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;" data-pasted="true"><strong style="box-sizing: inherit; font-weight: bolder;"><span style="box-sizing: inherit; font-size: 10pt;">Fig 3. Portal App settings </span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p><span style="font-size: 11pt;">Following the same steps as for the Agent Application, when you open the portal you will see the option to download your portal as a Web App.</span></p><p data-pasted="true"><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImExMDc5MjFlLTI1N2QtNDExYi04ZjRlLWJhYTk3MzdjMmNhZCJ9.MQouprBLeJTl74N-cDNHueofP4FHhF64qnsTdOhsbns" width="1065" height="237" class="fr-fic fr-dii"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;" data-pasted="true"><strong style="box-sizing: inherit; font-weight: bolder;"><span style="box-sizing: inherit; font-size: 10pt;">Fig 4. Installing the Portal as a Progressive Web App</span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: Poppins, sans-serif, Roboto; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></p><p>When downloaded the app will show on your desktop. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImNhMzE1YTVhLTRmNDItNGFmOC04MGNmLTkyMjFkZTljNDZlYSJ9.GCVlPMB7KGI4n6Dhwi1EUvOeUbOuOHrxvA4w-fXPMLU" width="411" height="98" class="fr-fic fr-dii"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;" data-pasted="true"><strong style="box-sizing: inherit; font-weight: bolder;"><span style="box-sizing: inherit; font-size: 10pt;">Fig 5. Web App in a Taskbar. </span></strong></p>
