en pt nl nl en en nl nl en nl nl nl nl nl nl nl nl nl nl nl nl en nl nl nl nl en nl nl en nl nl en en nl en nl nl fr nl nl nl nl nl nl oc nl nl en nl nl nl nl nl nl nl nl nl nl en nl nl nl nl nl nl nl nl nl
Sinds een aantal jaar werk ik bij het bedrijf BlinktUit aan de WordPress plugin Buttonizer. Ik ben, samen met de eigenaren van BlinktUit, de bedenker en vooral de hoofddeveloper van de plugin. Met meer dan 20.000 70.000 installaties begint het een plugin te worden met een flinke userbase en het lijkt me leuk om te delen hoe we er zijn gekomen en welke technieken we gebruiken 🙂
Voor de 2022 update, klik hier.
Buttonizer is een zogeheten Call to Action (CTA) button manager voor WordPress. Je kan de zwevende knoppen toevoegen aan je WordPress website. De knoppen kun je zelf naar eigen smaak stijlen en aanpassen. De plugin is vooral bedoeld voor kleine CTA acties, zoals een 'bel ons', 'like ons' of 'mail ons' knop, ook links en andere plugin acties zijn er mogelijk.
Stukje geschiedenis & het idee
In 2017 kwam het idee van de plugin tot stand: voor de websites die we bouwden wilden we gebruik maken van de Material design CTA knoppen. In de WordPress plugin repository was hier nog geen plugin voor. Op een gegeven moment zijn we de plugin gaan bouwen en hadden we enkele simpele features, zoals:
Knop kleur & tekst kleur aanpassen
That's it. Vanaf mei 2017 ben ik er aan gaan werken en heb ik extra functies ingebouwd. Terwijl we dit deden begon het idee op te komen om de lege ruimte in de WordPress plugin repository op te vullen, we gaan de plugin uitbrengen. We gingen kijken of er genoeg animo was en of we er iets leuks van konden maken. Ik heb toen features toegevoegd aan de plugin zoals nieuwe knopacties, tijdschema mogelijkheden en meerdere menu stijlen. Ook kon je een heel menu maken in plaats van één enkele knop zoals eerder het geval was. Omdat het een gratis plugin is wilden we ook gaan kijken of het mogelijk was om wat aan de plugin te verdienen, dus we implementeerde Freemius. Freemius heeft een geheel licentie systeem. We maakten toen enkele functies premium, zoals de tijdschema's en de WhatsApp knopactie. Verder hadden we enorm veel gratis functies.
De plugin bestond hier alleen uit een beetje CSS, stukje ongeorganiseerde JavaScript en heul veel PHP.
Toen ging het langzaam. 1 installatie (wijzelf), 30 installallaties (nog steeds wijzelf waarschijnlijk, wij zette de knop namelijk ook op onze eigen websites van klanten) en toen 50 (toen waren wij het niet meer).
In de loop van de maanden werd Buttonizer steeds meer gedownload, we hadden op een gegeven moment meer installaties dan websites die wij zelf hadden. Dat betekende dat andere mensen ook de plugin installeerden op hun website. Ook waren er een paar mensen die onze premium functies gingen uitproberen. Vanaf dat moment wilden we extra functies toevoegen aan de plugin zoals page rules en extra knopacties.
In 2018 hebben we de plugin alleen maar meer functies gegeven en werd het langzamerhand populairder met een paar duizend installaties.
Rebuild 2019, versie 2.0
Eind 2018 vonden we het tijd voor een rebuid, de code was niet suprieur geschreven (aangezien het mijn eerste WordPress plugin was), daarbij was tijd voor vernieuwing zodat het er ook moderner uit kon gaan zien. We hadden iets van 5.000 installaties, dus we hadden wel het idee dat de plugin verder kon groeien.
We wilden een volledige frontend interface, zoals gebruikelijk was bij de WordPress Customizer en een aantal andere plugins. Toen bij de rebuild nam JavaScript de meerderheid in en werd PHP geminimaliseerd naar enkele ajax requests die door de frontend wordt uitgelezen. CSS werd vanaf dat punt ook belangrijker en werd geschreven in Sass (SCSS). Met deze rebuild konden we ons focussen op het bouwen van een goede interface.
We passeerden in maart 2019 eindelijk de 10.000 gebruikers en de beta voor 2.0 was in volle gang onder onze gebruikers. In mei dat jaar is de 2.0 update live gegaan. Helaas met wat bugs die onze beta gebruikers niet hadden gevonden maar gebruikers ook merkten. Die losten we op en voegden veel nieuwe functies toe.
En dat had veel effect! Nadat de meeste bugs eruit waren en we weer op een normale manier nieuwe features toevoegden zagen we de actieve installaties flink stijgen. Er werd positief over Buttonizer geschreven en we stegen in december 2019 naar 20.000 installaties!
Rebuild 2020, versie 2.1
Mijn JavaScript frontend skills waren nog niet helemaal geweldig dus het is nu een zooitje geworden voor ons om te bouwen. Dus we werken op dít moment aan een nieuwe versie met een nieuwe frontend interface die makkelijker voor de klant is én voor ons om te bouwen. We hebben een hoop geleerd van de 2.0 rebuild en willen dat nu gaan gebruiken voor de 2.1 rebuild. We hopen dat deze nieuwe rebuild over enkele maanden gereleased kan worden 🙂
Ik zal het topic updaten zodra er updates zijn over de 2.1 versie waar we nu aan werken, maar stiekem is dat nog een geheimpje en weten onze gebruikers & klanten nog niet eens dat er een toffe nieuwe versie aankomt 😎
Toen we in 2017 begonnen met Buttonizer waren we een team van 4 personen. 1 dev (ik), 1 marketing persoon, 1 ontwerper en een support/meedenker. Het hele bedrijf dus eigenlijk 😂 In 2018 kwam er een nieuwe dev bij die ons ondersteunde met de development en in januari 2019 kwam er nog een developer bij.
We werken er nu aan met een heel team van 1 ontwerper, 1 UX tester, 2 marketing & content en 4 devs. Binnenkort komt er een content writer bij. Niet alleen de installaties groeien, maar ook het team er omheen 😃
Voorbeeld knoppen op de site van mijn bedrijf:
Update 2022 - Een nieuwe fase
Sinds de laatste update in 2022 is er enorm veel gebeurt! We zijn gegroeid van 20.000 installaties naar 70.000 actieve installaties. Daarnaast is de interface volledig vernieuwd en maken we gebruiken van nieuwe technieken achter de schermen.
In 2020 hebben we zoals beschreven in het hoofdtopic opnieuw een update uitgebracht, we hebben de volledige interface herschreven naar React.js, mijn kennis was hierin verbeterd en ik was overtuigd dat het voor ons beter was. Daarnaast hebben we de volledige widget volledig herschreven waardoor wij veel sneller nieuwe functionaliteiten konden toevoegen. Na deze update zijn we flink gegroeid.
In begin 2021 ben ik begonnen met mijn afstudeerstage in Buttonizer. Tijdens mijn afstudeeronderzoek ben ik gaan onderzoeken hoe wij meer voor onze gebruikers konden betekenen, zoals bijvoorbeeld statistieken aanbieden en meer widgets en bars.
Onze ambities waren om meer platformen te ondersteunen, naast alleen WordPress. Ik heb toen een enquête gehouden onder onze gebruikers en heb deze data goed bekeken. Het blijkt dat veel van onze gebruikers ook gebruik maken van Shopify, Wix en eigen software. De interesse was best hoog om Buttonizer ook op die platformen te gebruiken.
Dus... dat hebben we gedaan. Ik heb voor Buttonizer een nieuwe API geschreven in Symfony door middel van het gebruiken van API-Platform, Alle endpoints die de WordPress editor worden gebruikt heb ik overgenomen en in de nieuwe backend verwerkt. Daarnaast zijn een aantal zaken herschreven.
In de WordPress editor werd de site altijd weergegeven in een iframe, zo kunnen gebruikers sneller zien hoe hun knoppen eruit komen te zien. Uiteraard zou dat niet kunnen in onze standalone versie, dus we hebben het opgelost door een screenshot te maken van hun site en deze te laten zien. Ze kunnen nog steeds navigeren door een URL balk bovenin de pagina als extra touch.
Begin augustus 2021 is het nieuwe dashboard online gegaan en zijn alle gebruikersgegevens overgezet. In december 2021 is het nieuwe platform live gegaan en zijn we begonnen met met het organiseren van een gesloten bèta, gebruikers konden zich aanmelden en werden uitgeloot om het nieuwe platform uit te proberen.
Eind december is de bèta afgerond en hadden we de meeste bugs gefixed.
In de eerste maanden van 2022 ben ik aan het werk geweest voor de Shopify applicatie. Deze wilden wilden we graag live hebben en is gebouwd in React die onze API gebruikt.
Door de strenge eisen van Shopify was de applicatie wat vertraagd, maar de applicatie ging in mei live!
Herschrijven van de WordPress plugin
En toen was het tijd voor wat liefde voor de WordPress plugin. Na twee weken hard werken hebben we deze omgetoverd zodat deze gebruik maakt van onze standalone versie. Onze enige angst was dat mensen de plugin links zouden laten liggen vanaf het moment dat er een account moest worden aangemaakt.
Deze rewrite was 1.5 maand geleden afgerond en hebben we onze plugin geüpdatet naar versie 3.0. Direct na de release werd onze grootste angst weggenomen en zagen we de aanmeldingen stijgen. Gemiddeld stijgen we met een paar honder installaties per dag en hebben we nu bijna 3.500 actieve sites op onze standalone en groeien we elke dag verder.
Al deze sites zijn nu al goed voor meer dan 1.000.000 requests per dag naar onze API, die gehost wordt op een DigitalOcean server. Al deze requests laden onze widget in en geven de door de gebruiker ingestelde knoppen weer.
Na een paar release en bugfixes zijn we bezig geweest met het bouwen van een functionaliteit die we al heel lang graag wilden bouwen: klikactiviteit meten, maar dan privacy vriendelijk.
Zo kunnen we gebruikers inzichten geven over wat er gebeurt met de knoppen die ze ingesteld hebben. De kliks worden tijdelijk in een Redis opgeslagen en daarna gescraped door Prometheus waarna deze via de API in ons dashboard zichtbaar zijn. Deze functionaliteit was een tijdje in bèta en is vorige week online gegaan voor alle sites. Na livegang komen er voor alle sites gecombineerd zo'n 500 kliks per kwartier binnen en zijn er per dag meer dan 48.000 kliks die worden verwerkt.
Op dit moment zijn collega's bezig het het ontwerpen van een statistieken dashboard die het huidige tijdelijke dashboard vervangt. Zodra deze af is zal ik deze delen 😎
Recap & de software
Tot zover de update van dit project.
Alles op een rijtje:
Prometheus gebruiken we om data inzichtelijk te maken
Grafana gebruiken we om de data uit Prometheus in te zien
API-Platform (Symfony) gebruiken we voor onze API
Het gebruikers dashboard, de WordPress plugin en Shopify applicatie is geschreven in React.js + Sass
Redis gebruiken we om tijdelijke data op te slaan en als caching mechanisme
Eigen script om screenshots te maken van sites die gebruik maken van Buttonizer
Hoop dat het allemaal een beetje interessant is! Mocht je vragen of feedback hebben, laat het weten!