<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><strong>In this guide we will cover:</strong></p><p><strong>- Adding a Custom Banner to the Self-Service Portal</strong></p><p><strong>- Using Sticky Banners</strong></p><p><br></p><p><br></p><p><strong><span style="font-size: 14pt;">Adding a Custom Banner to the Self-Service Portal</span></strong></p><p>In Configuration > Self-Service Portal, scroll to the "Home Screen" section and enable "Display custom HTML". Further options will then show underneath to choose the position(s) of the banner(s), which can be above, below, or both simultaneously. </p><p><br></p><p>Dependant on this selection, it will then show either one or two Fields to enter the HTML for the banner. The recommended height for this is 60px. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImU1MjY3NGNiLWQxNDYtNGMzOC04NTZmLTNhNjYyZDMxMzNlOCJ9.C-Z3dXRvmBHeDj-ECNhesGPR5Obk1XhBx6Q6c0gakIE" class="fr-fic fr-fil fr-dib" width="1211" style="width: 1213px; height: 282.841px;" height="283"></p><p><strong><span style="font-size: 10pt;">Fig 1. Enabling custom HTML and making a banner.</span></strong></p><p><br></p><p>Organisation, Client/Customer, Site and User-level Variables can be used in this HTML, which is shown in this example.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVkNTYwNzllLWE5NzUtNDliZS05ZTE0LWJmNzJmNzQ2NzNjZSJ9.UC6CaruitylbTbwrHuYBmSidFjrr0nwScXlhyAdy54w" class="fr-fic fr-fil fr-dib" width="932" height="68"></p><p><strong><span style="font-size: 10pt;">Fig 2. Adding Organisation Variables to the banner.</span></strong></p><p><br></p><p>If "Custom HTML position" is set to "Display HTML above Home Screen content", the banner will appear in this position.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjRmYmZiNGQxLTQ5YjktNGJjNi04NDliLWM3NzAwNDkyNTg1YSJ9.vv_tJ_KMA0ng1haGFFse7FA9JO4X6kBT9RBu1r2nLF8" class="fr-fic fr-fil fr-dib" width="1216" style="width: 1218px; height: 577.925px;" height="578"></p><p><strong><span style="font-size: 10pt;">Fig 3. Top banner example.</span></strong></p><p><br></p><p id="isPasted">If "Custom HTML position" is set to "Display HTML below Home Screen content", the banner will appear in this position.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImNjZjYyM2ZkLTFlZmYtNDEzYS04MzU0LTRlMGZlNmJlOWY3NyJ9.PwW2--AFHP9Ts6WkARV5RkKyYTsY5AF8NBiAKnVk2sw" class="fr-fic fr-fil fr-dib" width="1216" style="width: 1218px; height: 577.318px;" height="577"></p><p><strong><span style="font-size: 10pt;">Fig 4. Bottom banner example.</span></strong></p><p><br></p><p id="isPasted">If "Custom HTML position" is set to "Display HTML above and below Home Screen content", the banner will appear in both positions.</p><p><br></p><p><strong><span style="font-size: 14pt;">Using Sticky Banners</span></strong></p><p>Enabling "Make custom HTML a sticker banner across all Portal Pages" will show the banner anywhere in the Self-Service Portal a User navigates to.</p><p><br></p><p>This option will only show if the "Custom HTML position" is set to "Display HTML above Home Screen content" or "Display HTML above and below Home Screen content", and will only apply to the top banner.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Ijk2MWY1YTI4LWI2YzctNDVhZC1iNmYzLWY3ODEzNGMyMmViYyJ9.bXLLomt-iaOpHmTwY1tnIErGSjRLwUPoasntr8HFoo8" class="fr-fic fr-fil fr-dib" width="1221" style="width: 1223px; height: 346.723px;" height="347"></p><p><strong><span style="font-size: 10pt;">Fig 5. Enabling a sticky banner.</span></strong></p><p><br></p><p>An example is shown below when logging a Ticket.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEyZTU4ZWZhLTE0YzctNDFkMy05MzkzLTM5NDE5ZWViYzA2YyJ9.OKExogF9Tw9TZOkWZ3w38Rg3wNXT2LvdCeQxFR-L9XM" class="fr-fic fr-fil fr-dib" width="1222" style="width: 1224px; height: 579.587px;" height="580"></p><p><strong><span style="font-size: 10pt;">Fig 6. Sticky banner elsewhere in the Portal.</span></strong></p><p><br></p>
