Desktop Web App Customization options

2020-10-30 13:17:12 UTC

Note: all screenshots and examples are from Chrome browser 

Tab bar 

  • You can edit the title. 

This is the title of the solution that will be used as the browser tab title.  

  • You can edit the icon.  

The image that is shown in the browser tab. It should be 32x32px. Supported formats are .png. .gif and .ico. Visiolink will need a link to the image, which can be hosted anywhere online. 

blobid0.png

 

Top bar image 

  • You can add/change top bar image 

The image that is shown in the top middle of Desktop Web App. It should be in landscape and 40px high. Supported formats are .png. .jpg and .svgVisiolink will need a link to the image, which can be hosted anywhere online. 

Air in top and bottom need to be part of the image and remember to deliver an image with transparent background. 

blobid1.png

 

Archive 

  • Enable/disable archive 

Choose whether you want archive displayed or not 

  • Change archive mode 

There are 3 different archive modes, designed after how often your publications is released:  

  • Daily (shows publication for a week at a time) 
  • Weekly (shows publication for a month at a time)  
  • Singles (shows publication for a year at a time) 

You can choose an archive mode that is different from your publication schedule if you prefer that layout (example daily publication releases but having Singles archive mode). Screenshot examples below. 

Fleste aviser weekly 

  • Sort archive ascending/descending 

Should the archive be sorted with the latest publication first or last. 

  • First day of week 

Choose between Monday or Sunday 

Archive mode: Daily 

Displays all publications in the selected week 

blobid2.png

Archive mode: Weekly 

Displays all publication in the selected month 

blobid3.png

Archive mode: Singles 

Displays all publications in the selected year 

blobid4.png

 

Desktop App Splash 

  • Set a splash screen 

You can set a splash screen with an image, which will show as the first thing when you open the Desktop Web App. The splash screen will require the following: 

  1. URL to image 
  2. Height 
  3. Width 

Example: 

blobid5.png

 

Back Arrow (in Desktop Web App, not browser) 

  • Hide back arrow 

Whether or not the back arrow should be displayed 

  • Back arrow redirection 

By default, the back-arrow points back to region picker (if you have one). Some prefer it to point back to their webpage instead, which is possible. Visiolink just need a URL. 

blobid6.png

 

Custom HTML blocks 

We have the option for custom HTML blocks several places in the Desktop Web App. HTML blocks can be used in a wide of different ways. It can be an ad, text, embedded youtube video, a link to your website or whatever else you desire. Only your imagination and your web development skills is a limit, because Visiolink doesnt develop these custom HTML blocks for you. The blocks can be of any size (if it doesnt ruin the general layout) but are limited to specific positions. 

Example of HTML block: <div style="color: red; font-size: 22px; background: white; height: 240px;width:300px; display: flex; justify-content: center; align-items: center"><b>This is a custom html block</b></div> 

HTML block positions: 

  • On the region picker: Above buttons 

Not completely centered due to checkbox to remember regions 

  • On the region picker: Below buttons 

Centered below regions  

  • As a global footer 

This is global which means it will always keep showing in the Desktop Web App. 

  • On the frontpage EITHER at the top OR above archive 

We have limited the amount of positions for HTML blocks on the frontpage, so you choose to have it either at the top of the right side or further down above the archive.   

 Visual examples below: 

blobid7.png

blobid8.png

blobid9.png

 

Login 

  • Show or hide voucher 

Only relevant if you have voucher codes for your customers 

  • Show or hide password 

It can be relevant to hide password depending on what validation you have 

  • Show or hide forgot password option 

This will require an URL and a system to handle forgotten passwords on your end 

  • Show or hide purchase option 

This will require an URL to a place where the customer can purchase access 

 

blobid10.png

 

Key Color 

  • Add a Key Color to the Desktop Web App 

key color is a color which will give the app a bit of customization. It will change the color of some selections and buttons throughout the app (example below). You can only choose 1 color and it must be in a hex color code (example: #289d2f).  

blobid11.png

 

Search 

  • Enable or disable search 

Whether the search is possible or not 

 

Language  

  • Pick a language 

Pick a language for your app 

  • Overwrite language strings 

You have the option to overwrite certain strings if you are not satisfied with the translation or prefer another wording. You have the option to override the following words and sentences:

  • Additional titles header 
  • Allow tracking text 
  • Archive header 
  • Archive no issues 
  • Back 
  • Cancel 
  • Cover view header 
  • Email 
  • Forgot password 
  • GDPR2 accept button text 
  • GDPR2 accept header text 
  • GDPR2 accept text 
  • GDPR2 decline button text 
  • GDPR2 manage button close 
  • GDPR2 manage button save 
  • GDPR2 manage header text 
  • GDPR2 manage text 
  • Go to archive 
  • Latest header 
  • Log out 
  • Login 
  • Login button text 
  • Login no subscription 
  • No issues for title 
  • Open archive text 
  • Open info text 
  • Open issue from search 
  • Open search text 
  • Password input  
  • Previous issues header 
  • Privacy consent button text (GDPR1) 
  • Privacy consent read more (GDPR1) 
  • Privacy consent text (GDPR1) 
  • Purchase 
  • Region picker header 
  • Related issues header 
  • Remember region check box 
  • Return to regions button text 
  • Search button text  
  • Search header 
  • Search no results 
  • Search page numbering 
  • Search to 
  • Sections header 
  • Select 
  • Session timeout header 
  • Session timeout login button 
  • Show more 
  • Solution disabled button text 
  • Solution disabled description 
  • Solution inactive header 
  • Timeout text description 
  • Voucher 
  • Voucher code 

 

Related content / Additional titles  

  1. You can add a module with Related content
  2. You can add a module with additional titles 

This is only relevant if you have a publication that contains more than one title, a linked with other regions or in other ways have a link to other publications. For more detailed info contact a Visiolink Project Manager. 

blobid12.png

 

Regions 

For each region you have the following customization options: 

  • Image on region picker 

We recommend a image of size 236x60 px with transparent baggrund 

See picture of example below. 

  • Enable archive or not 
    • Ascending or descending search
    • Archive mode 
  1.  

Same as general settings, just on Region level 

  • Add Custom HTML block 

Same as general settings, just on Region level 

  • First day of week (Sunday or Monday) 

Same as general settings, just on Region level 

  • Show publication dates 

Same as general settings, just on Region level 

  • Show supplements 

Same as general settings, just on Region level 

  • Key color 

Same as general settings, just on Region level 

  • Language  

Same as general settings, just on Region level 

 

blobid13.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments