Korte samenvatting:
Ga naar CMS > Manage > Websites > Web-apps en maak een nieuwe web-app aan. Vul een naam, omschrijving, kleuren en drie iconen in en klik op 'Opslaan'. Je website is dan te installeren als web-app op telefoon, tablet en computer.
Gebruiken leden, donateurs of medewerkers je website regelmatig? Dan is het fijn als ze die niet elke keer opnieuw hoeven op te zoeken. Met een web-app zet je jouw website als icoon op het homescherm van een telefoon, tablet of computer. En tik, en de bezoeker is meteen binnen.
Context
Elke website kun je nu omzetten naar een eigen web-app. Dit is een Progressive Web App (PWA): een techniek waarmee bezoekers jouw website installeren als app, met een eigen icoon op hun homescherm. Meer over deze term lees je in 'Web-app (PWA): uitleg, voordelen en begrippen'.
Beheert jouw organisatie meerdere websites, bijvoorbeeld een mijn-omgeving met community voor je leden n een apart intranet voor je medewerkers? Dan maak je voor elke website zijn eigen web-app.
Let op: een website kan maar aan één web-app gekoppeld zijn.
Let op: een website kan maar aan één web-app gekoppeld zijn.
Dit heb je nodig
Bereid het volgende voor voordat je begint:
- Een naam en korte naam voor je web-app (in elke taal die je gebruikt)
- Een korte omschrijving (in elke taal die je gebruikt)
- Een themakleur en achtergrondkleur
- Drie iconen. Je hebt er drie nodig, omdat elk besturingssysteem het icoon van je web-app op een eigen manier gebruikt:
- Hoofd icoon (512x512): het icoon dat op de meeste apparaten getoond wordt, bijvoorbeeld op Windows en op Android buiten Chrome om. Het systeem past hier verder niets aan. Wil je afgeronde hoeken of een andere vorm? Verwerk dat dan al in de afbeelding zelf.
- Maskeerbaar icoon (512x512): 'maskeerbaar' betekent dat het besturingssysteem er zelf een vorm overheen legt, bijvoorbeeld een cirkel. Android gebruikt dit icoon, zodat alle app-iconen op een toestel er hetzelfde uitzien, ook als ze van verschillende bedrijven komen. Omdat het systeem de randen kan wegsnijden, voeg je ongeveer 10% lege ruimte toe rondom je logo. Doe je dat niet? Dan loop je het risico dat een stuk van je logo wordt afgesneden.
- Apple touch icoon (180x180): het icoon dat Apple gebruikt op de iPhone en iPad. Apple rondt de hoeken hier zelf automatisch af. Gebruik daarom een simpel, vierkant icoon zonder transparante randen.
- Eventueel: een pagina die je als startpagina wilt gebruiken. Zie het kader hieronder voor advies hierover.
Welke startpagina kies je?
Kies bij voorkeur een pagina met een overzicht van, of snelmenu naar, de onderdelen die voor jouw type bezoeker het meest interessant zijn. Denk aan de online community en meldingen.
Heeft je website een geïntegreerde mijn-omgeving, dus niet op een apart domein? Anders gezegd: loggen bezoekers in op www.zoolion.org en niet op mijn.zoolion.org? Dan is het een logische keuze om de overzichtspagina van het account in te stellen als startpagina voor de web-app, in plaats van de homepage.
Ook kun je voor de web-app een aanmaken (en die verbergen voor het menu). Zo blijf je vrij om de inhoud van je gewone homepage later aan te passen, zonder dat dit de startpagina van de web-app beïnvloedt.
Instructies
- Ga naar CMS > Manage > Sites&Domains > Web-apps.
- Klik op 'Nieuwe progressive web app'.
- Klik bij Voor website op 'Selecteren/wijzigen...' en kies de website waarvoor je een web-app wilt maken.
- Klik op 'Opslaan'.
- Kies eventueel bij 'Startpagina' een afwijkende pagina. Standaard is dit de homepage van je website.
- Vul in het bewerkscherm bij Naam en Korte naam de naam van je web-app in. Doe dit voor elke taal die je gebruikt. De korte naam verschijnt onder het app-icoon als de volledige naam te lang is.
- Vul bij 'Omschrijving' een korte uitleg voor de bezoeker in. Deze tekst ziet de bezoeker terug in het meldingsscherm dat verschijnt zodra hij of zij op 'Installeer web-app' klikt vanaf jouw website.
- Stel bij 'Themakleur' en 'Achtergrondkleur' de kleuren van je web-app in. Wordt de webapp geïnstalleerd op bijvoorbeeld een laptop, dan is de bovenste balk deze kleur. De kleur van het scherm bij het laden is de achtergrondkleur.
- Upload bij 'Iconen' de drie afbeeldingen die je hebt voorbereid.
- Klik op 'Opslaan'.
Tip: In Chromium-browsers (zoals Chrome, Edge en Brave) op Android wordt het app-icoon soms te ver ingezoomd. Dit is een bug in deze browsers zelf, hier kun je als beheerder niets aan doen. Installeert een bezoeker de web-app vanuit Chrome zelf? Dan komt dit probleem niet voor. Gebruikt een bezoeker Firefox op iOS? Dan toont die browser de naam en het icoon van je web-app helaas niet correct.
Een bestaande web-app terugvinden of bewerken
Wil je de instellingen van een web-app later aanpassen? Ga naar CMS > Sites&Domains > Web-apps. Hier zie je een overzicht van alle web-apps van jouw organisatie, met de bijbehorende website erachter. Achter elke web-app staan twee icoontjes:
- Het potlood-icoon opent het bewerkscherm, waar je alles kunt aanpassen wat je ook bij het aanmaken instelt.
- Het kruis-icoon verwijdert de web-app.
Wil je bezoekers ook actief wijzen op de web-app? Lees dan 'Bezoekers de web-app laten installeren'.