Careerometer 2 Widget


Looking for Careerometer 1 (the previous version)? You can find information here. Please note that Careerometer 1 is no longer actively supported, and may break some embedding websites.

Careerometer 2 is the new, updated version of our Careerometer widget. It has enhanced browser and website compatibility and displays more data. Here it is in action:

Embedding the widget, Careerometer 2

To use the widget in your site, you need to paste one or two lines of code into your HTML website source, at the position where you want the widget to appear. In WordPress, for example, the HTML source is the “text” version of your website (there is a switch at the top right of the WordPress editor).

To use the widget with its default settings, paste this line:

<iframe src="http://www.lmiforall.org.uk/cm2/index.html" width="900" height=435"></iframe>

If you would like to show only 2 cards, paste this one:

<iframe src="http://www.lmiforall.org.uk/cm2/index-2cards.html" width="600" height=435"></iframe>

Note on Certificates and https sites

If your site is running over a secure connection (the address begins with “https://” or you see a green lock in the address bar), you have to embed the widget securely as well, or it will not run properly. To do that, simply change “http://” in the embedding code to “https://”.

 

Configuring the widget

You can configure how many cards to display and whether to pre-set/pre-load any job data by embedding the widget directly, like so:

<div class="cm2-widget" cards="2" preset="3112,1115"></div>
<script src="//www.lmiforall.org.uk/cm2/careerometer2.js"></script>

 

This will display 2 cards, and preload data for electrical technicians (SOC code 3112) and chief executives (SOC code 1115). You can specify more cards than you have preset SOC codes, in which case the widget will just leave the remaining cards empty. If you run a job information site, you may want to use the widget to display information about a particular job in your site’s sidebar. You can do this easily by displaying just one preset card.

<div class="cm2-widget" cards="1" preset="3112"></div>
<script src="//www.lmiforall.org.uk/cm2/careerometer2.js"></script>

Making the widget work on a mobile

The widget by nature is not completely responsive, but it does work on mobile. If you are embedding it using the an iframe method, this is intended strictly for desktop computers or tablets and will always display 3 widgets side by side. However, using the following embedding code:

<div class="cm2-widget" cards="1" preset="3112"></div> <script src="//www.lmiforall.org.uk/cm2/careerometer2.js"></script>

That should give you a widget without an iframe that contains only one card (small enough to fit on a mobile screen).

 

Changing the widget card colours

It is also possible to override the colours that the individual cards use. The following will draw 3 cards, use a bluish tone for the first card, a green tone for the second card, and leave the last card’s colour to chance:

<div class="cm2-widget" cards="3" colours="#003399,green"></div>
<script src="//www.lmiforall.org.uk/cm2/careerometer2.js"></script>

Note that embedding the widget directly may cause it to use some of your site’s CSS styles. In WordPress or a CMS system, this may cause the widget to look strange; you’ll have to adjust your styles and scripts accordingly.

 

Problems?

The widget is intentionally designed to be as non-intrusive as possible when you embed it, and not override any parts of your site layout. We’ve tested this in common site environments, but if the widget makes your site look weird (or the widget itself looks weird), or if you have any other questions, please contact the LMI For All team. You can view how the widget is supposed to look on an empty page, here.

Please note that the widget does not work at all on Internet Explorer 8 or older, and works best on current web browsers.

 

Careerometer in practice: Who is using Careerometer?

Here are a few examples of how others are using Careerometer in their websites:

Also see how many sites have implemented Careerometer 1 and 2 here.