How to display your own SDG badge
With the SDG badges service you can generate an SDG Badge yourself for your content, and embed it on your webpages.
It’s simple: to generate a badge for a given text, enter a text fragment in any of the 104 common world languages in our classification service to what extent this text fragment relates to each SDG goal from 0% to 100%. (If you are a web developer or data engineer read more below)
You can select four different AI models to classify the text fragments with. Each of one has a slightly different outcome. Our default model is the Aurora SDG model, which has been tested rigorously.
[Learn more]
At the bottom you find an html snippet generator, allowing you to insert a specfic badge on your web-page.
You can choose the size of badge by entering the height in pixels into the input field.
Than you can use icons on the right to copy the html fragment into the clipboard and the into your page whereever you want the SDG badge to be displayed.
Advanced embedding of badges
If you plan to embed the SDG in your auto-generated publication list or your repository, you can include the following html part in the webpage by inserting the following div element:
<div class="sdg-wheel" data-wheel-height=[height] data-model=[model] data-text=[text]></div>
the placeholders need to be replaced by the appropriate values:
- [height]: the height of the badge in pixels.
- [model]: the model to be used for classification. available options are ‘aurora-sdg’, ‘aurora-sdg-multi’, ‘osdg’ and ‘elsevier-sdg-multi’. Please refer to our About the models page for further information.
- [text]: the text you want to be classified and displayed as SDG batch (e.g. the abstract of the repository entry).
And don’t forget to load our widget javascript file to generate the badges form the predefined div elements:
<script src="https://aurora-sdg.labs.vu.nl/resources/widget.js" type="text/javascript"></script>