Embeddable Widget¶
Datagrepper provides a self expanding javascript file that you can use to embed message history in your blog, website, or application.
Usage¶
You simply include a <script>
tag with the id datagrepper-widget
that
references widget.js
. You can indicate what you would like it to display
by using HTML5 data-*
attributes. If you don’t know what those are, don’t
sweat it. An example is worth a thousand words:
<html>
<body>
<h1>My Site</h1>
<p class="lead">Welcome to my site.</p>
<p>Here is my latest Fedora activity:</p>
<script id="datagrepper-widget"
src="https://apps.fedoraproject.org/datagrepper/widget.js?css=true"
data-user="ralph"
data-rows_per_page="40">
</script>
<footer>Happy Hacking!</footer>
</body>
</html>
See that script tag in the middle? The src
attribute points at the URL
that you’ll want to copy and paste. It optionally takes a css
argument on
the end which tells it whether or not to include datagrepper’s own css. You
might, for instance, want to style the datagrepper message using your site’s
own css, not datagrepper’s theme. To do this you can omit the css=True
argument and then define your own style, like so:
<style>
#datagrepper-widget img {
height: 32px;
width: 32px;
}
#datagrepper-widget .message-card {
font-style: bold;
display: inline;
}
#datagrepper-widget .datetime {
font-style: italic;
}
</style>
Next comes two data-*
attributes that should look familiar from the
JSON api docs. The first indicates that the widget should render only
messages relating to the FAS user “ralph”. The second indicates that it
should display the latest 40 messages (or as many as it can find). You
can specify any of the normal attributes: data-user
,
data-package
, data-category
, etc.