Trine Widgets

Background

Trine is a company that makes it easy for people to invest in solar energy in growing markets. Their mission is to give people a triple return on investment - earn a profit while making social and environmental impact. They have an amazing amount of data available on the companies in their roster, letting the investors follow their money in real-time, and see the impact they make. We thought we could help them combine this with their ever-ongoing effort to reach out to potential new investors.

Idea

The idea was to create a widget library, accessible from a trine investor’s profile page. The widget lets the investor visualize how their money impacts the world, and can customize the looks and metrics with a few simple clicks. A code snippet is generated based on these selections, and can then easily be copied and pasted into the investors company homepage, personal blog or other, letting them show off how they are making the world a better place by investing in Trine, with real-time impact data. The basic customizable abilities were to show things like co2 emissions avoided (along with airplane och meat kilo equivalents, instead of just kilos), number of people supplied with solar electricity, interest money earned and number of projects supported.

Stack

We chose to adapt Web Components for the actual code output of our widget, as it has good browser support with polyfills, and is an easy way to add a customizable component with isolated styling. We used the Stencil framework to generate these in an easy way. The front-end for the widget creator was built in Aurelia, and the js for the Web Component itself was published as an NPM package. We created a small mocked-API hosted on Heroku to test and handle CORS issues.

Challenges

Modern websites are very different from each other, the web has always been a fast-moving place, with front-end libraries and frameworks coming and going in rapid succession. This means that it is tricky to write a piece of code that works on all websites, regardless of the technology used to render the site. This makes the widget output code a delicate thing, since it has to fit into both a modern single-page-application site, and an old Wordpress php-blog with nothing but vanilla HTML and JS.

In order to accomodate easy handover to Trine, we wrote the widget creator application using the same front-end framework they use on their site: Aurelia. None of us had worked with this before - and as always, there's a certain amount of warm-up time required to get into a new framework.

Results

https://prototypsthlm.gitlab.io/trine-widget-app/

Results were unusually close to what we had expected to achieve during this week. We managed a total of 7 customizable options for the widget, along with the option to customize the title, generating a total of 16 different appearances for the widget.

The widget needs more testing on various websites to be certain there’s no compatibility issues with unforeseen weird js-blocking features or css rules, but in all the results feel quite polished and stand-alone.

We also managed to build a small Gmail plugin that adds a minimalistic version of the widget into the user’s email signature.

Team

Villiam Poignant Björn Helgeson