Web Push-melding toevoegen aan uw WordPress-site

Is het je opgevallen dat push-meldingen op populaire websites zoals Facebook worden gebruikt? Onlangs vroeg een van onze lezers of het mogelijk was om web pushmeldingen toe te voegen in WordPress. Natuurlijk is het. In dit artikel laten we u zien hoe u een pushmelding via het web toevoegt aan uw WordPress-site.

Waarom Web Push-meldingen toevoegen aan uw WordPress-site?

Web pushmeldingen zijn klikbare berichten die op het bureaublad van de gebruiker worden weergegeven. Ze kunnen zelfs worden weergegeven als de browser van de gebruiker niet is geopend.

Afgezien van de desktop werken web push-notificaties ook in mobiele browsers.

Populaire sites zoals Facebook, Pinterest, LinkedIn en vele anderen maken al gebruik van web pushmeldingen. Het blijkt boeiender te zijn dan sms, e-mailmarketing en andere sociale media. Volgens een enquête hebben pushmeldingen een open tarief van 50% op mobiele apparaten.

Dit betekent meer betrokken publiek voor uw WordPress-site en een aanzienlijke boost in uw algemene pageviews en terugkerende bezoekers.

Laten we echter een blik werpen op het toevoegen van push-notificaties op het web aan een WordPress-site.

Push-notificaties voor het web instellen in WordPress met OneSignal

OneSignal is een gratis service waarmee u pushmeldingen kunt toevoegen aan websites, internet of mobiele apps.

Het eerste dat u hoeft te doen, is de OneSignal-plug-in installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Na activering zal de plug-in een nieuw menu-item met de naam OneSignal toevoegen aan uw WordPress-beheerbalk. Als u erop klikt, gaat u naar de instellingenpagina van de plug-in.

De instellingenpagina is onderverdeeld in de tabbladen Setup en Configuration. Het setup-tabblad is eigenlijk gedetailleerde documentatie over het instellen van OneSignal pushmeldingen in WordPress. Het heeft dezelfde stappen die we u in deze zelfstudie laten zien.

Om OneSignal in te stellen, moet u verschillende API-sleutels en applicatie-ID's aan de plugin-instellingen toevoegen.

Laten we beginnen.

Stap 1: maak Google Keys

Eerst moet je de Google Services Wizard-website bezoeken.

Geef eenvoudig een naam op voor uw app en voeg een Android-pakketnaam toe. OneSignal maakt geen gebruik van de naam van het Android-pakket, maar het is een verplicht veld.

Kies vervolgens uw land en regio en klik vervolgens op de knop 'Services kiezen en configureren'.

Hiermee gaat u naar het volgende scherm waar u wordt gevraagd om Google-services te selecteren die u met uw app wilt gebruiken. U moet klikken op de knop 'Google Cloud Messaging inschakelen'.

U ziet nu de API-sleutel van uw server en de afzender-ID.

U moet uw afzender-ID kopiëren en deze in het tabblad Configuratie van WordPress in het veld Google-projectnummer plakken.

U moet ook uw Server API-sleutel kopiëren en deze in een tekstbestand op uw computer plakken. U hebt deze API-sleutel later in deze zelfstudie nodig.

Stap 2: Pushmeldingen voor Chrome en Firefox instellen

We stellen nu pushmeldingen in voor Chrome en Firefox. Eerst moet je de OneSignal-website bezoeken en je gratis account maken.

Zodra u uw account hebt aangemaakt, moet u inloggen en op 'Een nieuwe app toevoegen' klikken.

U wordt gevraagd een naam voor uw app in te voeren. U kunt elke gewenste naam gebruiken en vervolgens op 'Maken' klikken om door te gaan.

Op de volgende pagina wordt u gevraagd een platform te selecteren om te configureren. U moet 'Website Push' selecteren en vervolgens op de volgende knop klikken om door te gaan.

Hierna wordt u gevraagd om een ​​browserplatform te selecteren. U ziet Google Chrome en Mozilla Firefox in één vak en Safari in een ander vak.

U moet op Google Chrome en Mozilla Firefox klikken. We zullen je laten zien hoe je Safari installeert, later in dit artikel.

Klik op de volgende knop om verder te gaan.

In de volgende stap wordt u gevraagd om uw url van de WordPress-site in te voeren, de Google Server API-sleutel en de URL voor uw pictogramafbeelding voor standaardmeldingen..

Als uw website geen SSL / HTTPS ondersteunt, moet u het vakje ernaast aanvinken 'Mijn site is niet volledig HTTPS' keuze. U kunt SSL ook op uw website instellen als u dat wilt, maar dit is niet verplicht.

Google Chrome ondersteunt geen web pushmeldingen voor niet-SSL of http-websites. OneSignal lost dit probleem op door gebruikers te abonneren op een subdomein in hun eigen https-domein.

controleren 'Mijn site is niet volledig HTTPS' optie geeft HTTP-fallback-opties weer. U moet een subdomein kiezen voor uw app en het Google-projectnummer of de Sender ID invoeren die u in de eerste stap hebt gegenereerd.

Klik op de knop Opslaan om verder te gaan. Nu kunt u dit dialoogvenster verlaten. U krijgt een melding dat uw configuratie nog niet is voltooid en kan later worden hervat. Klik op Ja om het dialoogvenster te sluiten.

Stap 3: OneSignal Keys verkrijgen

U moet nu OneSignal Keys voor uw website hebben. Klik in het dashboard van uw app op App-instellingen.

Hiermee ga je naar de pagina met app-instellingen. U moet op het tabblad Sleutels en ID's klikken.

Hiermee wordt uw OneSignal App ID en Rest API Key weergegeven.

U moet deze kopiëren en in het OneSignal WordPress plug-ins configuratietabblad op uw site plakken.

Stap 4: Safari-web pushmeldingen instellen

Vergeet niet dat we de push-notificatie-instellingen van Safari web overgeslagen hebben. Nu laten we u zien hoe u pushmeldingen van Safari-web kunt instellen.

Log in op je OneSignal-account en ga naar je pagina met app-instellingen. Blader omlaag naar webplatforms en klik op de knop Configureren naast Apple Safari.

Er verschijnt een dialoogvenster waarin u wordt gevraagd uw sitenaam en site-URL in te voeren.

Schakel vervolgens het selectievakje naast in 'Ik wil mijn eigen meldingspictogrammen uploaden' keuze.

Je ziet nu een optie om verschillende pictogramgroottes te uploaden. Dit zijn vierkante afbeeldingen, gebruik Photoshop of een beeldbewerkingsprogramma om pictogrammen in de exacte grootte te maken.

Klik op bestandsknoppen kiezen om al uw pictogrammen te uploaden.

Klik op de knop Opslaan en sluit vervolgens het dialoogvenster.

Vernieuw de pagina met app-instellingen en scrol omlaag naar Webplatforms. Deze keer ziet u 'Web ID' onder Apple Safari.

U moet deze web-ID kopiëren en op het tabblad Configuratie van de OneSignal-plug-in op uw site plakken.

Dat is alles, u hebt met succes OneSignal web pushmeldingen voor uw WordPress-site opgezet.

Stap 5: Web Push-meldingen testen op uw WordPress-site

Standaard voegt de OneSignal-plug-in een abonnementspictogram toe aan uw WordPress-site. Ga naar uw website in een ondersteunde browser en klik vervolgens op de abonneerknop.

Je ziet het standaard 'bedankt voor inschrijving' bericht.

Log nu in op OneSignal-account. Klik op de naam van uw app en vervolgens op App-instellingen.

Blader omlaag naar de sectie Webplatforms en klik op de configuratieknop naast Google Chrome en Firefox.

U ziet het platformconfiguratiescherm dat u eerder hebt ingevuld. Klik eenvoudig op de knop Opslaan en klik vervolgens op Doorgaan.

U wordt gevraagd om de doel-SDK te selecteren. U moet WordPress selecteren en vervolgens op Volgende klikken.

Omdat u slechts één abonnee heeft op het moment dat uw abonnee-ID automatisch wordt ingevuld.

Klik op de volgende knop en je zult de 'Testinstellingen' stap.

Klik op 'Stuur testbericht' knop.

One Sign verzendt nu een web push-melding.

Het uiterlijk van de meldingen kan verschillen, afhankelijk van de browser die u hebt gebruikt om u te abonneren. Wanneer de melding op uw computerscherm verschijnt, klikt u erop.

Je wordt naar het bevestigingsscherm geleid om aan te geven dat je OneSignal web pushmeldingen voor je website hebt ingesteld.

Keer terug naar het configuratiescherm op de OneSignal-website en klik op 'Controleer de meldingsstatus'knop.

U ziet nu een ander succesbericht dat aangeeft dat u web push-notificaties hebt toegevoegd aan uw WordPress-site.

Hoe Web Push-meldingen in WordPress met OneSignal verzenden

De plug-in OneSignal web pushmeldingen op uw WordPress-site stuurt automatisch een melding naar alle abonnees wanneer u een nieuw bericht publiceert.

U kunt ook handmatig meldingen verzenden vanuit uw OneSignal App Dashboard. Log in op uw OneSignal-account en klik op uw app-naam.

Klik in het menu aan de linkerkant op de knop 'Nieuw bericht'.

Dit brengt u naar het nieuwe berichtenscherm. U kunt een titel en bepaalde inhoud voor uw melding invoeren.

U kunt ook op Opties, Segment, Schema / Later verzenden klikken om uw push-bericht voor internet verder aan te passen.

U kunt het bijvoorbeeld koppelen aan een bepaalde pagina op uw site, het naar een bepaald segment van uw gebruikers sturen of plannen dat het op een bepaald tijdstip wordt verzonden.

We hopen dat dit artikel je heeft geholpen om push push-meldingen toe te voegen aan je WordPress-site. Wellicht wilt u ook onze lijst met beste lidmaatschapsplugins voor WordPress zien.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.