https://github.com/datacite/citation-widget
Widget to generate and display a citation based on a DOI in any web page, using the Crosscite Citation Formatter (unsupported).
https://github.com/datacite/citation-widget
Last synced: 5 months ago
JSON representation
Widget to generate and display a citation based on a DOI in any web page, using the Crosscite Citation Formatter (unsupported).
- Host: GitHub
- URL: https://github.com/datacite/citation-widget
- Owner: datacite
- License: mit
- Created: 2021-11-04T23:46:25.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-16T13:56:09.000Z (over 1 year ago)
- Last Synced: 2025-09-05T10:50:15.235Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Citation: citation-widget.html
Awesome Lists containing this project
README
# citation-widget
Widget to generate and display a citation based on a DOI in any web page, using the [Crosscite Citation Formatter](https://citation.crosscite.org/). Optionally adds schema.org JSON-LD metadata to the head element of the same page using [Content negotiation](https://support.datacite.org/docs/datacite-content-resolver).
**NOTE: The code is for example purposes and is not among DataCite's officially supported tools and services. This code is available "as is", without guarantee that it will be maintained in the future.**
## Widget setup
### Pre-requisites
- You have a live website, and have access to add/edit HTML code including `````` tags on the page that you would like to embed the widget into
- You are able host the citation-widget.js on your server, or copy the source code into your page.
Note: you cannot link to the .js file on github, as github will prevent it being loaded.
### Basic setup
Copy and paste the code below into a page on your website that you'd like the widget to appear on. Edit the code to include your ORCID API client ID and the URL of the page that you've pasted the code into.
<script src="http://[YOUR SERVER LOCATION FOR THE SCRIPT]/citation-widget.js">
If you cannot host the .js file, then you can copy and paste the contents of citation-widget.js in between the script tags.
### Configuration options
The following configuration options are available and can be added to the div tag as ```data-``` tag attributes.
| Tag attribute | Allowed values | Default | Description |
| ------------- | -------------- | ------- | --------------------------------------|
| data-doi | | | **Required** Full DOI URL or prefix/suffix only |
| data-generate-schema | true, false | | Set to true if you would like to insert schema.org metadata into the head of your web page. This should be used in DOI landing pages only. For more information, see [https://support.datacite.org/docs/how-do-i-expose-my-datasets-to-google-dataset-search](https://support.datacite.org/docs/how-do-i-expose-my-datasets-to-google-dataset-search) |
### Example
An example is in [citation-widget.html](https://github.com/datacite/citation-widget/blob/main/citation-widget.html). To view it, clone this repository locally and open citation-widget.html in a browser.