On this page you'll find instructions for embedding the Altmetric badges in your website. The badges are free to use for academic repositories and individual researchers.

If you want to use the badges on a site that isn't your lab or personal homepage, blog or an institutional repository then you should first contact us at [email protected] so that we can clear your use case. Do not use the badges commercially - on a journal, search engine, in an app etc. - without talking to us first! We're required by some of our data sources to keep track of who is using the badges and what for, and so need to issue you a license.

If you're an organisation or publisher and would like to use these badges, please get in touch to discuss implementation.

For researchers and academic repositories, the badges are simple to set up with a two step process:

  1. Add the following line of code anywhere on an HTML page:
    <script type='text/javascript' src=''></script>
  2. Add a div element specifying a DOI (digital object identifier), arXiv ID, Handle, PubMed ID, ISBN, URI or Altmetric ID wherever you want a badge to appear:
    <div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>

    Replace the contents of data-doi with the DOI of the article you want the badge to represent: alternatively you can use a data-arxiv-id attribute containing an arXiv ID, data-handle attribute containing a Handle, data-isbn attribute containing an ISBN, data-uri attribute containing a URI or data-pmid attribute containing a PubMed ID.

    If it isn't possible for you to set the data-doi attribute you can leave it empty and the embed script will look for a DOI in the dc:identifier or citation_doi <meta> tags of the current page. Contact us if you need any help with this.

That's it! You'll end up with a badge that looks like this:

You can change how the badge looks, add popovers or display a breakdown of where an article has been mentioned by customising the embed - see below.

Please see our full terms and conditions for more information.

Clicking on a badge

When clicked the badges lead to a page on that contains more information on the article specified.

By default the information pages only show these first few mentions on each service. We can co-brand the page with your logo and give your visitors a more detailed breakdown of the conversations happening around each article - please see our services for publishers page or contact [email protected] for details.


You can optionally customise how the badge appears by adding attributes:

  • Use the data-badge-type attribute to choose a particular style of badge (see here for a list of options).
  • Set the data-badge-popover attribute to show a popover when a user hovers over the badge.
  • Use the data-badge-details attribute to show a breakdown of the data next to donut style badges.
  • Use the data-no-score attribute to specify if a score should be displayed in the center of the donut style badges.
  • Use the data-hide-less-than attribute to specify if the badge should be hidden when the Altmetric score is less than a given number.
  • Use the data-link-target attribute to specify if a user should be brought to a new tab or window when they click on a badge.
  • Use the data-condensed attribute to show a condensed version of the badge.

Some XML based journal platforms don't allow data-* attributes in front end code. Don't worry! As a fallback you can also specify options as CSS classes.
You can read more about this here.

Build your own

The HTML to copy into your page for the above embed:

As a reminder: if you want to use the badges on a site that isn't your lab or personal homepage, blog or an institutional repository then you should first contact us at [email protected] so that we can clear your use case. Do not use the badges commercially - on a journal, search engine, in an app etc. - without talking to us first!


Most basic badge, DOI 10.1038/nature.2012.9872

Click on the badge to see more information about this article.

<div class='altmetric-embed' data-doi='10.1038/nature.2012.9872'></div>

Donut style badge, arXiv ID 1209.4191

This is an arXiv ID.

<div class='altmetric-embed' data-badge-type='donut' data-arxiv-id='1209.4191'></div>

Donut style badge, PubMed ID

This is a PubMed ID.

<div class='altmetric-embed' data-badge-type='donut' data-pmid='21771119'></div>

Donut style badge, Handle

This is a Handle.

<div class='altmetric-embed' data-badge-type='donut' data-handle='2022/14471'></div>

Donut style badge, ISBN

This is an ISBN Badge. 10 or 13 Digit ISBN (does not require normalisation)

<div class='altmetric-embed' data-badge-type='donut' data-isbn='978-3-319-25557-6'></div>

Donut style badge, URI

This is a URI.

<div class='altmetric-embed' data-badge-type='donut' data-uri=''></div>

Donut style badge, URN

<div class='altmetric-embed' data-badge-type='donut' data-urn='urn:nbn:de:hbz:294-46567'></div>

Donut style badge, NCT ID

<div class='altmetric-embed' data-badge-type='donut' data-nct-id='NCT01564784'></div>

Donut style badge, Altmetric ID

This is an Altmetric ID.

<div class='altmetric-embed' data-badge-type='donut' data-altmetric-id='569975'></div>

Donut style badge, Altmetric ID, no score shown

This is an Altmetric ID.

<div class='altmetric-embed' data-no-score='true' data-badge-type='donut' data-altmetric-id='569975'></div>

Donut style badge, PubMed ID, clicking opens details in a new tab

Here we're using the data-link-target attribute to specify that the details link should open in a new tab.

<div class='altmetric-embed' data-link-target='_blank' data-badge-type='donut' data-pmid='21771119'></div>

10.1016/S0140-6736(11)61619-x with a popover appearing to the left (hover over the badge)

<div class='altmetric-embed' data-badge-popover='left' data-doi='10.1016/S0140-6736(11)61619-x'></div>

Showing medium donut and details side by side

<div class='altmetric-embed' data-badge-type='medium-donut' data-badge-details='right' data-doi='10.1136/bmj.39471.430451.BE'></div>

Showing condensed donut and details

<div class='altmetric-embed' data-badge-type='donut' data-condensed='true' data-badge-details='right' data-doi='10.1136/bmj.39471.430451.BE'></div>

Same article as before, but hiding the badge when the score is less than 100

<div class='altmetric-embed' data-badge-type='medium-donut' data-hide-less-than='100' data-badge-details='right' data-doi='10.1136/bmj.39471.430451.BE'></div>

No mentions

If an article has no mentions the Altmetric badge will show a score of 0.

<div class='altmetric-embed' data-doi='10.1016/S0140-6736(11)61619-x-y'></div>

No mentions with data-hide-no-mentions

If data-hide-no-mentions is set then the embed won't display at all if the DOI hasn't been mentioned.

<div class='altmetric-embed' data-hide-no-mentions='true' data-doi='10.1016/S0140-6736(11)61619-x-y'></div>


Please note that popovers will only work in IE8 and above. They will fail gracefully and simply not appear when triggered on earlier versions of IE.

If you're using a later version of IE but still can't see popovers make sure that you haven't turned compatibility view on for your site by accident.

If you'd like a popover to appear when the user hovers over a badge use the data-badge-popover attribute specifying where you'd like the popover to appear: left, right, top or bottom.

Popover on left

Hover over the donut to show a popover to its left.

<div data-badge-type='donut' class='altmetric-embed' data-badge-popover='left' data-doi='10.1016/S0140-6736(11)61619-x'></div>

Popover below

Hover over the badge to show a popover below it.

<div class='altmetric-embed' data-badge-popover='bottom' data-doi='10.1016/S0140-6736(11)61619-x'></div>


You can choose to display details of the attention an article has received to the right of the badge by including the data-badge-details attribute.

The details display works best with the medium-donut and large-donut badge styles.

Medium donut

<div data-badge-type='medium-donut' class='altmetric-embed' data-badge-details='right' data-doi='10.1016/S0140-6736(11)61619-x'></div>

Badge types

You can specify the style of badge you'd like to embed with a data-badge-type attribute. The badge types available are:

Badge type Example

88px x 18px

<div class='altmetric-embed' data-doi='10.1016/S0140-6736(11)61619-x'></div>

64x x 64px

<div class='altmetric-embed' data-badge-type='donut' data-doi='10.1016/S0140-6736(11)61619-x'></div>

120px x 120px

<div class='altmetric-embed' data-badge-type='medium-donut' data-doi='10.1016/S0140-6736(11)61619-x'></div>

180px x 180px

<div class='altmetric-embed' data-badge-type='large-donut' data-doi='10.1016/S0140-6736(11)61619-x'></div>

110px x 20px

<div class='altmetric-embed' data-badge-type='1' data-doi='10.1016/S0140-6736(11)61619-x'></div>

85px x 15px

<div class='altmetric-embed' data-badge-type='4' data-doi='10.1016/S0140-6736(11)61619-x'></div>

100px x 15px

<div class='altmetric-embed' data-badge-type='bar' data-doi='10.1016/S0140-6736(11)61619-x'></div>

120px x 18px

<div class='altmetric-embed' data-badge-type='medium-bar' data-doi='10.1016/S0140-6736(11)61619-x'></div>

180px x 27px

<div class='altmetric-embed' data-badge-type='large-bar' data-doi='10.1016/S0140-6736(11)61619-x'></div>

Technical information

Altmetric badges are delivered by Cloudfront where possible so latency should be very low.

The embed script becomes active after the page DOM has loaded and looks for elements with the altmetric-embed class and a data-doi, data-pmid or data-arxiv-id attribute.

If you're adding Altmetric badges to the DOM after the page has loaded (via AJAX, for example) then you can ask the Altmetric embed script to search the page again for new matches by calling _altmetric_embed_init in Javascript:

<script type='text/javascript'>

If you only want to load Altmetric badges from a specific container (e.g. a new div containing several elements with the altmetric-embed class loaded via AJAX) rather than searching the whole page, you can pass an Element or a string selector as a "context" argument to _altmetric_embed_init:

<script type='text/javascript'>

Can't use data-* attributes?

Some XML based content management systems won't allow you to add data-* attributes to HTML templates.

If you run into this problem you can pass options to the donut by adding special CSS classes to the badge element.

See below for some examples. Please do let us know at [email protected] if you run into any problems.

Instead of...Use class...
e.g. altmetric-doi-10.5339/connect.2012.9
e.g. altmetric-badge-popover-left

Here's an example:

<div class='altmetric-embed altmetric-doi-10.5339/connect.2012.9 altmetric-badge-type-donut altmetric-badge-popover-left'></div>


There are two custom JavaScript events that can be fired by the badge:

  • altmetric:show is fired when a badge is shown;
  • altmetric:hide is fired when a badge is hidden (e.g. if its score is 0 and the data-no-score attribute is set).

These events are attached to the .altmetric-embed container, so it is possible to attach event listeners and act on them.

For example: using jQuery, one can show an alert whenever a badge is shown with the following code:

$(function () {
    $('div.altmetric-embed').on('altmetric:show', function () {
        alert('Altmetric badge shown!');