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 Widget Script - this is a line of javascript to be added to your webpage's <\body> tag.
  • 2. The Widget Placeholder - this is an HTML anchor tag that you should place wherever you would like the widget to appear.

You may place several Widget Placeholders on the same page.

Widget Script

The best place for the script tag is at the bottom of your page, right before the closing </body> tag. This will make sure the website will be loaded in its entirety before loading the widget, prioritizing the website content over the widget. 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 element of your page.

Widget Placeholder

Insert the placeholder wherever you would like the widget to appear. After the Widget Script (above) is loaded, it will find all applicable placeholders on the page, and replace those with a widget.

Supported Identifier Types

In order to display the metrics, the widget scripts parse the artifact identifier information out of 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 (ex: 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:

  • doi
  • isbn
  • bepress_url_id
  • arxiv
  • github_repo_id
  • oclc
  • nct_id
  • pmid
  • slideshare_slideshow_id
  • sourceforge_repo_id
  • ssrn_id
  • us_patent_publication_id
  • vimeo_video_id
  • youtube_video_id
  • medwave_id
  • pitt_eprint_dscholar_id
  • smithsonian_pddr_id
  • repo_url
  • cabi_abstract_id
  • ebsco_db_an_match_id
  • elsevier_id
  • scopus_id

Supported Widget Types

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,they are Plum Print, Artifact Summary, Artifact Details, Artifact Badge. For PlumX Dashboard customers, further widget types are Group, Researcher, and Grant. You can see each widgets’ parameters and examples of how to configure them below in Section XX.

Themes

You can modify the visual appearance of our Plum Print by using Themes. Themes are implemented by modifying the widget placeholder, and replacing “example of what it usually is”, “example with an example theme”.

We provide the Bigben theme on all Artifact Widgets, and the Liberty theme on Artifact Summary Widgets. You can see the difference between these three themes for our Summary widget below, or you can experiment in our Widget Builder page with other widget types and themes.

Artifact Widgets

Artifact Plum Print Widget

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 Plrint will grow. This visual overview is well-suited to article-level detail pages. Smaller versions can also work well in search result lists.

Script

Placeholder and parameters

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

Artifact Details Widget

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

Placeholder and parameters

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

Artifact Summary Widget

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

Placeholder and parameters

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

Artifact Badge Widget

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 Plrint will grow. This visual overview is well-suited to article-level detail pages. Smaller versions can also work well in search result lists.

Script

Placeholder and parameters

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

Other Plumx Widgets

Group Widget

Group Widgets are available for PlumX Dashboards customers. It displays a summarized view of all metrics for all of the members of the group, as well as any artifacts associated with them. The Group is identified by the Plumx Identifier of the group. For example, the following code would display the group widget for the Human Engineering Research Lab at the University of Pittsburg: https://plu.mx/pitt/w/g/centers/cen-other/cen-other-herl

Script

Placeholder and parameters

attribute values default value description
data-no-name true | false false If true, hides group name
data-no-description true | false false If true, hides group description
data-no-researchers true | false false If true, hides researchers section
data-no-stats true | false false If true, hides statistics section
data-no-artifacts true | false false If true, hides "recent artifacts" section"
data-num-artifacts 5, 10 or 20 5 Number of artifacts to display
data-width any positive integer 350px If specified, the widget will conform to the specified width (any valid css width)
override-title-text string blank The provided string will overwrite the title text the widget displays. Brief strings work best, as there is limited room.
override-researchers-title-text string blank The provided string will overwrite the researchers title text the widget displays. Brief strings work best, as there is limited room.
override-artifact-summary-title-text string blank The provided string will overwrite the artifact summary text the widget displays. Brief strings work best, as there is limited room.
data-override-recent-artifacts-title-text string blank The provided string will overwrite the recent artifacts title text the widget displays. Brief strings work best, as there is limited room.

Researcher Widget

We provide an embeddable widget for each researcher in PlumX. You can look up an author by either our PlumX identifier or their ORCID.

Script

Placeholder and parameters

attribute values default value description
data-no-name true | false false If true, hides researcher name
data-no-description true | false false If true, hides researcher description
data-no-stats true | false false If true, hides statistics section
data-no-artifacts true | false false If true, hides "recent artifacts" section"
data-num-artifacts 5, 10 or 20 5 Number of artifacts to display
data-width any positive integer 350px If specified, the widget will conform to the specified width (any valid css width)
override-title-text string blank The provided string will overwrite the title text the widget displays. Brief strings work best, as there is limited room.
override-artifact-summary-title-text string blank The provided string will overwrite the artifact summary text the widget displays. Brief strings work best, as there is limited room.
data-override-recent-artifacts-title-text string blank The provided string will overwrite the recent artifacts title text the widget displays. Brief strings work best, as there is limited room.

Grant Widget

Grant Widgets are available for PlumX Dashboards + Grants customers. We provide widgets summarizing all the works associated with any grant modelled in PlumX + Grants . You can identify a Grant by its PlumX identifier.

Script

Placeholder and parameters

attribute values default value description
data-no-name true | false false If true, hides grant name
data-no-researchers true | false false If true, hides researchers section
data-no-stats true | false false If true, hides statistics section
data-no-artifacts true | false false If true, hides "recent artifacts" section"
data-num-artifacts 5, 10 or 20 5 Number of artifacts to display
override-title-text string blank The provided string will overwrite the title text the widget displays. Brief strings work best, as there is limited room.
override-researchers-title-text string blank The provided string will overwrite the researchers title text the widget displays. Brief strings work best, as there is limited room.
data-override-affiliated-researchers-title-text string blank The provided string will overwrite the affiliated researchers title text the widget displays. Brief strings work best, as there is limited room.
override-artifact-summary-title-text string blank The provided string will overwrite the artifact summary text the widget displays. Brief strings work best, as there is limited room.
data-override-recent-artifacts-title-text string blank The provided string will overwrite the recent artifacts title text the widget displays. Brief strings work best, as there is limited room.

Advanced Options

Combined widget script

If you embed multiple types of widgets on the same page, you can reduce the number of resources that need to be loaded by using our combined widget script, which contains all of the widgets, but is a little bit larger than the individual scripts:

JavaScript Functions

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-success function name Calls a javascript function on failed widget data load