Musikhjälpen-widget: så lägger du till den på er webb

Arkiv: Musikhjälpen 2023 är sedan länge avslutad och widgeten ligger inte längre uppe. Texten står kvar som den skrevs i december 2023.

Vad är detta?

Den 11-17 december sänds Musikhjälpen från Stortorget i Växjö. Årets tema är "Ingen ska behöva dö av hunger". Just nu pågår den värsta hungerkrisen i modern tid, fler än 700 miljoner människor är drabbade och över 40 miljoner lever på gränsen till svält.

Att ha tillgång till mat är en mänsklig rättighet, men trots att det går att förse jordens befolkning med tillräckligt mycket mat dör människor runtom i världen varje dag. Till exempel så beror nära hälften av alla dödsfall bland barn under fem år på undernäring.

Tanken med widgeten är att göra det enkelt för besökare på din webbplats att bidra till årets upplaga av Musikhjälpen. Genom att klicka på widgeten öppnas ett popup-fönster där användarna kan kopiera ett Swish-nummer för donationer eller välja att donera via en webblänk.

Genom att använda widgeten hjälper du inte bara till att sprida medvetenhet om hungerkrisen utan också att göra det lättare för människor att bidra. Allt involverat är helt gratis, och det enda ni behöver göra är att lägga in en liten kodrad på er hemsida.

<script src="https://musikhjalpen.gofantastic.org/funktion-widget.js"></script>

Lägg till på hemsida

Nedan har ni några enkla steg för hur man lägger in kodraden som genererar widgeten för några av de vanligaste CMS:en.

Webflow

1. Logga in på ditt Webflow-konto och välj ditt webbplatsprojekt.
2. Gå till projektets inställningar, in på "Project Settings".
3. Gå till "Custom Code" och lägg in scriptet i fältet som heter "Head code".
4. Publicera ändringarna för att se widgeten på din webbsida.

WordPress

1. Logga in på din WordPress-sida.
2. Om du har Tag Manager uppsatt på din hemsida så brukar det vara enklare att använda det. Annars installerar du ett plugin som gör att du enkelt kan lägga in kod. Sök förslagsvis på "Custom code" och installera ett som du tycker passar för din WP-uppsättning.
3. När det är klart brukar man oftast få olika fält i pluginet, leta efter ett som heter i stil med "Head Code".
4. Klistra in scriptet och klicka på spara/publicera.

Squarespace

1. Logga in på ditt Squarespace-konto och välj webbplats.
2. Gå till sidan "Pages". I menyn till vänster, längst ner, har du ett val som heter "Website tools" som du ska klicka på.
3. Därefter väljer du "Code injection" och klistrar in scriptet i fältet "Header Code".

Google Tag Manager

1. Logga in på ditt Google Tag Manager-konto och välj din behållare.
2. Skapa en ny Custom HTML-tag och klistra in widgetens kod.
3. Ställ in aktiveringsregler för att bestämma när widgeten ska laddas, till exempel på alla sidor.
4. Publicera ändringarna i din GTM-behållare.

Info om widgeten

Widgeten är byggd med enkel teknik. Den använder grundläggande språk som HTML, CSS och JavaScript, och är utvecklad som en Node.js-applikation.

All kod för widgeten ligger på Heroku, en molntjänst som säkerställer att widgeten är tillgänglig och presterar väl. För att lägga till widgeten på din webbplats behöver du bara inkludera ett litet JavaScript-snippet. Detta script hämtar widgeten från Heroku och lägger till den på din webbplats.

För att mäta och förstå användningen av widgeten har jag adderat Mixpanel, ett analysverktyg. Mixpanel spårar anonymt hur många gånger widgeten laddas och hur många gånger dess knappar trycks på. Detta hjälper till att analysera användarbeteende och effektiviteten av widgeten, utan att kompromissa med användarnas integritet.