Basic Widget usage
Paste the code anywhere on your website (preferably HEAD or before closing BODY tag).
<script>
var HW_config = {
selector: ".CHANGE_THIS", // CSS selector where to inject the badge
account: "ACCOUNT_ID" // your account ID
};
</script>
<script async src="//cdn.headwayapp.co/widget.js"></script>
For example if you have a heading with a logo on your page that looks like:
<h1>
<a href="">Acme Corp.</a>
</h1>
You can set the code to inject the badge into the h1
tag:
var HW_config = {
selector: "h1",
account: "ACCOUNT_ID"
};
The end result will look like this:
<h1>
<a href="">Acme Corp.</a>
<span id="HW_badge_cont">
<span id="HW_badge">1</span>
</span>
</h1>
Options
account
(required) - Your account IDselector
(required) - CSS selector where to inject the badgeenabled
- a boolean value if the widget should automatically initialize itself. If set tofalse
it's up the the developer to initialize the widget withHeadway.init()
orHeadway.init(config)
translations
- See Translations section below.callbacks.onShowWidget
- callback fired when widget is showncallbacks.onShowDetails
- callback fired when widget item is clickedExample:
var HW_config = { selector: ".CHANGE_THIS", account: "ACCOUNT_ID", callbacks: { onShowWidget: function(){ // do something }, onShowDetails: function(changelog){ console.log(changelog.position); // position in the widget console.log(changelog.id); // unique id console.log(changelog.title); // title console.log(changelog.category); // category, lowercased } } };
Initializing widget programmatically
Some apps reload content dynamically (through Angular, React or other means), this means that you'll probably want to initialize the widget inside of your JavaScript code. To do this you need to use Headway.init()
– this will create a new widget instance.
You can pass a single argument with Headway.init(config)
which is the config object, in this case it doesn't have to be named HW_config
but anything, for example:
<script src="//cdn.headwayapp.co/widget.js"></script>
<script>
var config = {
selector: ".CHANGE_THIS",
account: "ACCOUNT_ID"
};
Headway.init(config);
</script>
Tip:
Running Headway.init()
again will destroy the previous widget and replace it with a new instance.
Translating the text inside of the widget
title
changes the title of the widget from Latest awesome changes to anything you wishlabels
will replace current labels with provided onesreadMore
changes the read more link from Read the whole scoop
var HW_config = {
selector: ".CHANGE_THIS",
account: "ACCOUNT_ID",
translations: {
title: "The Changelog",
readMore: "Read more",
labels: {
"new": "News",
"improvement": "Updates",
"fix": "Fixes"
}
}
};
Styling the badge
Since the badge is injected into your HTML, you can simply style it with CSS.
For example if you need the badge to overlay an element on your page, you can either inject it into your own element container that is positioned over an element, or alter the badge styles:
#HW_badge_cont {
position: absolute;
}
Similarly you can change the color of the badge itself:
#HW_badge {
background: #5ab987;
}