Careerometer
Careerometer is a freely available widget provided by the LMI for All service. It is an easy way to get access to labour market information on your own website. Careerometer is the new, updated version of our Careerometer (version 1) widget developed early on in the project. This widget has enhanced browser and website compatibility and displays more data. Instructions on how to embed and format to your needs is detailed.
Careerometer in practice
Careerometer is being widely used and has been embedded in a number of organisational websites and not estimated to be used in over 160 websites across Great Britain, including for example:
- An online careers magazine, which a number of other websites point to as a resource (Moving On magazine).
- Online UK-wide careers resources.
- Higher education institutions, higher education and colleges consortia websites
- Schools, academies and UTC websites
- Further education colleges and sixth forms websites
- Career organisations and services
Using Careerometer? Please drop us an email and let us know at LMIforAll.dfe@education.gov.uk
Here it is in action:
Embedding the widget, Careerometer
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="https://www.lmiforall.org.uk/cm2/index.html" width="900" height="460"></iframe>
If you would like to show only 2 cards, paste this one:
<iframe src="https://www.lmiforall.org.uk/cm2/index-2cards.html" width="600" height="460"></iframe>
Embedding on WIX Websites
To embed the widget on a WIX website, open the website editor and select the place where you want the widget to appear. Then, go to Add → More → Embeds → HTML iFrame, and add a new iFrame component. The component will ask for an address. Put in “https://www.lmiforall.org.uk/cm2/index.html” (without the quotes), and confirm. Note: do not put in the full widget code given in the other examples– this will not work. WIX also does not allow you to configure the number of cards or colours.
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>
If want to preload a card with the UK average data you can do this:
<div class="cm2-widget" cards="1" preset="ukavg"></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 cards 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).
Contextualising the widget
We suggest that you add some text to introduce Careerometer. The following is a suggestion, so please feel free to amend to reflect your users.
Careerometer can be used to explore and compare key information about occupations, help you learn about different occupations and identify potential careers.
It provides access to a selection of UK headline data relating to pay, weekly hours of work and future employment prospects for different occupations, as well as description of the occupation.
Simply type in the title of the job you are interested in and the widget provides a series of options from which you can select the most relevant to you. You can then look up another two occupations and compare. You can also select ‘display the UK average’ and compare the information with the occupation you have selected.
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.
Examples of how others have used Careerometer 2
Here are a few examples of how others are using Careerometer in their websites:
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.