How can I add altmetrics badge to in ReactJS

altmetric badges
altmetric explorer api
altmetric example
altmetric pricing
altmetric wordpress
altmetric demo
altmetric score
altmetric explorer free

I am trying to use altmetrics in one of the my article (PDF) in my website.

I tried to add the altmetric badges (here) to in reacts js but I could not manage.

Here is my trial:

First I tried to create a component and add to the page

class DownloadPDF extends Component {

  render() {

    return (
        <script type="text/javascript" src=""></script>
        <div data-badge-details="right" data-badge-type="medium-donut" data-doi={"my-doi-number-here"} class="altmetric-embed">&#160;</div>
        <a href = "my-crosreff-doi.pdf" target = "_blank">Download PDF </a>

The second is I tried to put in the page directly:

                  <script type="text/javascript" src=""></script>
                  <div data-badge-details="right" data-badge-type="medium-donut" data-doi="my-doi-number-here" class="altmetric-embed"> my-crosreff-doi.pdf</div>
                  {<DownloadPDF />}


Can someone know how can I put altmetrics badges correctly in reactJS?

I think all you need to do as described that you put the js script in any where in html , but react is virtual dom , so all you need is put in puplic in index.html in <body> under <div id"root"></div> or like you named. just simple as that

How can I add altmetrics badge to in ReactJS - reactjs - html, I am trying to use altmetrics in one of the my article (PDF) in my website. I tried to add the altmetric badges (here) to in reacts js but I could not manage. Here is  As with other badges, you can customize the size and badge type. See our technical documentation for further details and our Altmetric for Books page for more information. If you have any questions regarding the implementation process please contact .

There are two things you are missing

  1. Adding the script to index.html file underpublicdirectory (if you have created your app usingcreate-react-app`)

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!-- Here we go with the external script -->
    <script type='text/javascript' src=''></script>
    <title>React App</title>
      You need to enable JavaScript to run this app.
    <div id="root"></div>

Embeddable badges, 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: Free and easy integration. Integrating the Altmetric badges is simple; just follow these steps and you’ll be up and running! Please note that the free badges are only available to individual researchers for personal webpages – if you’re an organisation please get in touch to discuss options.

Thank you all answers.

For seeing the Altmetrics result in your page first you should add:

  1. altmetrics external javascript file

    <script type='text/javascript'src=''></script>

2. You should add your DOI wherever you want to display

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

so this is for adding to html page but when you add in ReactJS web app we have a tiny problem.

Problem is adding external javascript file to in ReactJS page that you want to display the Altmetrics badge

So solution is we need to install an addition library that allows us to implement any external javascript file.

Check the link:

We need to add below code in your ReactJS page

render() {

    return (






then you can add your the Altmetrics badge wherever you want in the page like this

<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>

Bake Your Own Donuts – Altmetric, The Altmetric embeddable badges are a highly configurable addition for any Here is the HTML you can put in your webpage for the above result: ClojureScript and Om provide value on top of ReactJS that is hard to resist. If you need to add an altmetrics badge to your ReactJS page you need to use @shaneosullivan solution. Thanks a lot

[PDF] Getting started with Altmetric badges, Altmetric badges allow you to add attention metrics and data to your content with a minimum of fuss and technical effort – all you need to do is add two lines of  Altmetric badges can be modified to fit the look and style of your website, so you can find a design that works for you. Try some of the options using our badge generator below! Provide instant access to a world of information

Altmetric badges – Altmetric, Add insight and context for your audience. The easy-to-embed Altmetric donuts provide a colourful, distinctive and instantly recognisable visualisation to help  Badges. Altmetric allows researchers to use Altmetric badges to showcase their Altmetric Attention Scores and details pages. You can embed the badges into your individual profile, CV, or on your publication pages. As with all of our badges, they are fully customizable so that they can fit in with your existing design strategy.

How can I add altmetrics badge to in ReactJS, I am trying to use altmetrics in one of the my article PDF in my website I tried to add the altmetric badges here to in reacts js but I could not  I'm using React.js and want to change the background color of the entire page. I can't figure out how to do this. Please help, thank you. Edit (Sep 2 '18): I have a project on GitHub that I'm linking here. I don't have this project online right now, but in the /client folder is the client server. Check it out. This is how I answered the question.

  • here {<DownloadPDF />} curly braces not needed
  • Thank you for answer but unfortunately still same
  • You are welcome @Axis : actually I have tried it in my dev and I was able to see the badge. What issue you are having, is it not loading up?
  • I cannot see the donut in my page. I am missing something
  • Which console? I am using VScode and with no any error also I am using localhost. I can see everything is fine but only I cannot see the altmetrics donut
  • It's the browser console.