Skip to content
Erik Isberg
All writing

2 December 2023

The Musikhjälpen widget: how to add it to your site

Archive: Musikhjälpen 2023 ended long ago and the widget is no longer running. The text stands as it was written in December 2023.

What is this?

Musikhjälpen broadcasts from Stortorget in Växjö on 11-17 December. This year's theme is "No one should have to die of hunger". The worst hunger crisis in modern times is under way right now: more than 700 million people are affected and over 40 million live on the edge of starvation.

Access to food is a human right, yet even though there is enough food to feed everyone on the planet, people die around the world every day. Close to half of all deaths among children under five are caused by malnutrition.

The idea behind the widget is to make it easy for visitors to your site to contribute to this year's campaign. Clicking the widget opens a popup where people can copy a Swish number for donations or donate through a link.

By adding the widget you help spread awareness of the hunger crisis and make it easier for people to give. Everything involved is free, and all you have to do is put one line of code on your site.

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

Adding it to your site

Below are the steps for adding the line that renders the widget, for a few of the most common CMSes.

Webflow

  1. Log in to Webflow and open your site project.
  2. Go to the project's settings, into "Project Settings".
  3. Go to "Custom Code" and put the script in the field named "Head code".
  4. Publish to see the widget on your site.

WordPress

  1. Log in to your WordPress site.
  2. If you already have Tag Manager on the site it is usually easier to go through it. Otherwise install a plugin that lets you add code. Search for "Custom code" and pick one that suits your setup.
  3. Once installed the plugin usually gives you a few fields. Look for one named something like "Head Code".
  4. Paste the script and save or publish.

Squarespace

  1. Log in to Squarespace and select your site.
  2. Go to "Pages". At the bottom of the left menu there is an option called "Website tools".
  3. Choose "Code injection" and paste the script into the "Header Code" field.

Google Tag Manager

  1. Log in to Google Tag Manager and select your container.
  2. Create a new Custom HTML tag and paste the widget code.
  3. Set the trigger rules for when the widget should load, for example on all pages.
  4. Publish the changes in your container.

About the widget

The widget is built with plain technology. It uses HTML, CSS and JavaScript, and runs as a Node.js application.

All the code sits on Heroku, a cloud service that keeps the widget available and performing well. To add the widget to your site you only need to include a small JavaScript snippet. That script fetches the widget from Heroku and adds it to your page.

To measure and understand how the widget is used I added Mixpanel. It anonymously tracks how many times the widget loads and how many times its buttons are pressed, which helps analyse behaviour and how well the widget works, without compromising anyone's privacy.