PlumX Widgets

Embeddable PlumX widgets make it easy to display PlumX Metrics on your own website, just by adding a few lines of code. For metrics for a particular research output (an article, book, or book chapter for example), the Artifact Widgets provide several customization options. PlumX Dashboard customers can also use other widgets to display summaries of a group of research, such as the research associated with a Group, Researcher or Grant.

Technical Overview

To embed the PlumX widgets on your page, you'll need to add two lines of code to your webpage:

  1. The – this is a script tag to be added just before your webpage's closing
    </body>
    tag.
  2. The – this is an HTML anchor tag that should be placed wherever you would like the widget to appear.
You may embed several Widget Placeholders on the same page.
A note about styling:
Please be careful not to override widget styles when implementing our widgets.
Avoid using overly specific selectors and the catch-all (*) selector.
The best place for the script tag is at the bottom of your page, right before the closing
</body>
tag. This will ensure that the DOM will be fully loaded before the widgets script is downloaded.
Some CMS systems do not allow you to add scripts to the bottom of your page. In that case, you can add the script tag to the
<head>
element of your page.

Insert the placeholder wherever you would like the widget to appear. After the widget script is loaded, it will find all placeholders on the page and replace them with a widget.

If you want to add placeholders after the page has already loaded, you can initialize them using .

In order to display the metrics, the widget script will parse the artifact identifier information from the href attribute of the placeholder. This attribute is composed of the following elements:

  • The PlumX endpoint for your site's artifacts (https://plu.mx/plum/a/?)
  • The artifact identifier (E.g.: doi=10.1371/journal.pone.0056506)

The artifact identifiers comprised of two parts:

  • The identifier type
  • The identifier value
In short, the templated url looks something like this: https://plu.mx/plum/a/?{id_type}={id_value}, where the {id_type} and {id_value} need to be replaced with the identifier type and value respectively.

Currently, we support the following identifier types:

  • bepress_url_id
  • airiti_book_id
  • airiti_doc_id
  • arxiv
  • cabi_abstract_id
  • cscd_id
  • datasearch_id
  • doi
  • ebsco_db_an_match_id
  • elsevier_id
  • github_repo_id
  • isbn
  • medwave_id
  • mendeley_data_id
  • nct_id
  • oclc
  • pitt_eprint_dscholar_id
  • pmid
  • repo_url
  • scopus_id
  • slideshare_slideshow_id
  • smithsonian_pddr_id
  • sourceforge_repo_id
  • ssrn_id
  • url_id
  • us_patent_publication_id
  • vimeo_video_id
  • youtube_video_id
We have several types of widgets that you can choose from depending upon how you would like to integrate them into your site. For artifacts: For PlumX Dashboard customers, further widget types are:

You can modify the visual appearance of our Plum Print by using Themes. Themes are implemented by adding a theme class to the widget placeholder.

We provide the Liberty theme on all Artifact widgets and, additionally, the Big Ben theme on Artifact Plum Print, Badge and Summary widgets. You can see the difference between these themes below, or you can experiment with other widget types and themes using our Widget Builder .

Artifact Widgets

The Plum Print Widget is a variably sized (120px, 64px, 32px, 18px) widget with an optional pop-up on roll-over that shows more metric details. It shows a visual overview of the ways an artifact has been used in the 5 categories of metrics. As the amount interaction in one category grows, the corresponding lobe in the Plum Print will grow. This visual overview is well-suited to article-level detail pages. Smaller versions can also work well in search result lists.

Default theme
Big Ben theme
Liberty theme

Script

Copy and paste this code on your web page before the
</body>
tag.
<script type="text/javascript" src="//cdn.plu.mx/widget-popup.js"></script>

Placeholder and parameters

Copy and paste this code wherever you want the widget to appear.
<a href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" class="plumx-plum-print-popup"></a>
Attribute Values Default Value Description
data-popup top | bottom | left | right | hidden left The direction of the pop-up relative to the widget.
data-hide-when-empty true | false true If true, hide the widget when no data is available.
data-hide-usage true | false false filters out usage metrics from the widget.
data-hide-captures true | false false filters out capture metrics from the widget.
data-hide-mentions true | false false filters out mention metrics from the widget.
data-hide-socialmedia true | false false filters out social media metrics from the widget.
data-hide-citations true | false false filters out citation metrics from the widget.
data-size tiny | small | medium | large large Controls the size of the plumprint. Tiny is 18px, small is 32px, medium is 64px, and large is 120px.
data-badge true | false false If true, sets data-size to 'small', and appends a link to the artifact page. If true this parameter overrides the data-size parameter.
data-pass-hidden-categories true | false false Any filtering present on the widget will be present on click-through to the Plumx Artifact Page
data-detail-same-page true | false false If true clicking on the plumprint will load the PlumX Artifact Page in the current tab

The details widget is our largest widget. It provides the same level of detail as the artifact page.

It is best suited for areas on your site where you have a lot of screen real estate to include it, like on a tab dedicated to metrics, or on a detailed page about the artifact.

Script

Copy and paste this code on your web page before the
</body>
tag.
<script type="text/javascript" src="//cdn.plu.mx/widget-details.js"></script>

Placeholder and parameters

Copy and paste this code wherever you want the widget to appear.
<a href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" class="plumx-details"></a>
Attribute Values Default Value Description
data-width any positive integer n/a If specified, the widget will conform to the specified width (any valid css width)
data-border true | false false If true, adds a border around the widget.
data-hide-print true | false false If true, don't show the PlumPrint
data-hide-when-empty true | false true If true, hide the widget when no data is available
data-hide-usage true | false false filters out usage metrics from the widget.
data-hide-captures true | false false filters out capture metrics from the widget.
data-hide-mentions true | false false filters out mention metrics from the widget.
data-hide-socialmedia true | false false filters out social media metrics from the widget.
data-hide-citations true | false false filters out citation metrics from the widget.
data-pass-hidden-categories true | false false Any filtering present on the widget will be present on click-through to the PlumX Artifact Page

The summary widget is somewhat bigger than the popup widget, but provides the same level of detail without forcing the user to hover.

This widget is well-suited to article detail pages where an extended summary is more appropriate than the smaller Plum Print treatment.

Script

Copy and paste this code on your web page before the
</body>
tag.
<script type="text/javascript" src="//cdn.plu.mx/widget-summary.js"></script>

Placeholder and parameters

Copy and paste this code wherever you want the widget to appear.
<a href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" class="plumx-summary"></a>
Attribute Values Default Value Description
data-orientation vertical | horizontal vertical The orientation of the widget.
data-hide-print true | false false If true, don't show the PlumPrint
data-hide-when-empty true | false true If true, hide the widget when no data is available
data-hide-usage true | false false filters out usage metrics from the widget.
data-hide-captures true | false false filters out capture metrics from the widget.
data-hide-mentions true | false false filters out mention metrics from the widget.
data-hide-socialmedia true | false false filters out social media metrics from the widget.
data-hide-citations true | false false filters out citation metrics from the widget.
data-pass-hidden-categories true | false false Any filtering present on the widget will be present on click-through to the PlumX Artifact Page

The Plum Print Widget is a variably sized (120px, 64px, 32px, 18px) widget with an optional pop-up on roll-over that shows more metric details. It shows a visual overview of the ways an artifact has been used in the 5 categories of metrics. As the amount of interaction in one category grows, the corresponding lobe in the Plum Print will grow. This visual overview is well-suited to article-level detail pages. Smaller versions can also work well in search result lists.

Default theme
Big Ben theme
Liberty theme

Script

Copy and paste this code on your web page before the
</body>
tag.
<script type="text/javascript" src="//cdn.plu.mx/widget-popup.js"></script>

Placeholder and parameters

Copy and paste this code wherever you want the widget to appear.
<a href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" class="plumx-plum-print-popup"></a>
Attribute Values Default Value Description
data-popup top | bottom | left | right | hidden left The direction of the pop-up relative to the widget.
data-hide-when-empty true | false true If true, hide the widget when no data is available.
data-hide-usage true | false false filters out usage metrics from the widget.
data-hide-captures true | false false filters out capture metrics from the widget.
data-hide-mentions true | false false filters out mention metrics from the widget.
data-hide-socialmedia true | false false filters out social media metrics from the widget.
data-hide-citations true | false false filters out citation metrics from the widget.
data-pass-hidden-categories true | false false Any filtering present on the widget will be present on click-through to the PlumX Artifact Page
data-detail-same-page true | false false If true clicking on the plumprint will load the PlumX Artifact Page in the current tab

Advanced Options

If you embed multiple types of widgets on the same page, or you don't want to manage including multiple scripts, you can reduce the number of resources that need to be loaded by using our combined widget script. This script contains all of the widgets, but is a little larger than the individual scripts.

Script

Copy and paste this code on your web page before the
</body>
tag.
<script type="text/javascript" src="//cdn.plu.mx/widget-all.js"></script>

In the event that you would like to add widgets to the page after the initial page load, you can use the following method to find and render all placeholders that haven't already been initialized.

Script

Call this method after you have injected widget placeholder(s) into the page.
window.__plumX.widgets.init();

Our widgets allow you to call JavaScript functions when an event happens. They work just like other parameters, except that the parameter value needs to be set to the JavaScript function's name that you want to call on that event.

Attribute Values Description
data-on-success function name Calls a javascript function on successful widget data load
data-on-empty function name Calls a javascript function if the widget has no data to display
data-on-fail function name Calls a javascript function on failed widget data load

will fire custom Javascript events to indicate that something has happened. You can add event listeners to catch these events and execute your own code.

Event Description
plum:widget-load Fired when a widget is rendered successfully. This is equivalent to the data-on-success attribute
plum:widget-empty Fired when a widget has rendered successfully, but has no data to display. This is equivalent to the data-on-empty attribute
plum:widget-error Fired when a widget fails to render. This is equivalent to the data-on-fail attribute