# Headway Documentation
1. [Widget](/widget)
* Basic widget setup
* Options
* Initializing widget programmatically
* Translation
* Badge styling and positioning
2. [Custom Domain](/custom-domain)
3. [Markdown](/markdown)
# Basic Widget usage
Paste the code anywhere on your website (preferably **HEAD** or **before closing BODY** tag).
```markup
```
For example if you have a heading with a logo on your page that looks like:
```markup
```
You can set the code to inject the badge into the `h1` tag:
```javascript
var HW_config = {
selector: "h1",
account: "ACCOUNT_ID"
};
```
The end result will look like this:
```markup
```
### Options
* `account` (required) - Your account ID
* `selector` (required) - CSS selector where to inject the badge
* `enabled` - a boolean value if the widget should automatically initialize itself. If set to `false` it's up the the developer to initialize the widget with `Headway.init()` or `Headway.init(config)`
* `translations` - See Translations section below.
* `position.x` (experimental) - force horizontal position of the widget ("left" or "right")
* `position.y` (experimental) - force vertical position of the widget ("top" or "bottom")
* `trigger` - Selector for externally triggering the widget popover. The popover will still be anchored to the badge, not the external trigger.
* `callbacks.onWidgetReady` - callback fired when widget has loaded.
* `callbacks.onShowWidget` - callback fired when widget is shown.
* `callbacks.onShowDetails` - callback fired when an item in the widget is clicked.
* `callbacks.onReadMore` - callback fired when user clicks on readMore link.
* `callbacks.onHideWidget` - callback fired when user closes the widget.
```javascript
var HW_config = {
selector: ".CHANGE_THIS",
account: "ACCOUNT_ID",
callbacks: {
onWidgetReady: function(widget) {
console.log("Widget is here!");
console.log("unseen entries count: " + widget.getUnseenCount());
},
onShowWidget: function(){
console.log("Someone opened the widget!");
},
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
},
onReadMore: function(changelog){
console.log(changelog); // same changelog object as in onShowDetails callback
},
onHideWidget: function(){
console.log("Who turned off the light?");
}
}
};
```
### Initializing widget programmatically (SPA)
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:
```markup
```
**Tip:**
* Running `Headway.init()` again will destroy the previous widget and replace it with a new instance.
* In **Angular/React** you should initialize the widget every time the badge element container is re-rendered.
### Translating the text inside of the widget
* `title` changes the title of the widget from **Latest awesome changes** to anything you wish
* `labels` will replace current labels with provided ones
* `readMore` changes the read more link from **Read the whole scoop**
* `footer` link at the bottom of the widget
```javascript
var HW_config = {
selector: ".CHANGE_THIS",
account: "ACCOUNT_ID",
translations: {
title: "The Changelog",
readMore: "Read more",
labels: {
"new": "News",
"improvement": "Updates",
"fix": "Fixes"
},
footer: "Read more 👉"
}
};
```
### 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:
```css
#HW_badge_cont {
position: absolute !important;
}
```
Similarly you can change the color of the badge itself:
```css
#HW_badge {
background: #5ab987 !important;
}
```
# Custom Domain
Custom domain feature allows you to use your existing domain's subdomain as your changelog url, for example `changelog.mydomain.com`.
### Pointing your subdomain to Headway
To set a custom domain for your account you first need to add a`CNAME`record to your domain's DNS configuration and point it to Headway domain. For detailed instructions you may have to contact your domain's DNS provider. Here is an example how it can be done in`DigitalOcean`:
`Name`is the`subdomain`you want to use, and`value`should contain Headway's domain.
### Setting custom domain in Headway
Now it's time to set your domain in Headway. Go to your account's settings `public page` tab and find the `custom domain` setting. Assuming that your domain is `mydomain.com` and you want to use `changelog` as a subdomain, the setting should look like this:
### What happens next
After finishing two above steps our application will start the process of installing your domain. Once it finishes **you will receive an email**. Note that you might have to wait for your DNS changes to propagate throughout the Internet up to 48 hours.
### SSL
We are happy to announce that all of our custom domains have SSL certificates installed automatically. All traffic from *http* protocol is redirected to the secure *https*.
### Cloudflare
Some of our users were using services like Cloudflare in order to have ssl on their domains. This is no longer needed since we started generating ssl certificates automatically for all custom domains. Although if someone wishes to use such service for any other reason, Headway now fully supports these configurations.
### Links in widget
After your custom domain starts working, all widget links will start pointing to your new address.
### RSS
RSS feeds are supported on custom domains and are accessible via `/rss`path, for example [changelog.jsfiddle.net/rss](https://changelog.jsfiddle.net/rss).
# Markdown
Headway uses Markdown for formatting.
## Headers
```
# This is an tag
## This is an tag
### This is an tag
#### This is an tag
##### This is an tag
###### This is an tag
```
## Emphasis
```
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
_You **can** combine them_
```
## Lists
### Unordered
```
* Item 1
* Item 2
* Item 2a
* Item 2b
```
### Ordered
```
1. Item 1
2. Item 2
3. Item 3
* Item 3a
* Item 3b
```
## Media
### Images
```
Format: 
```
### Video
Loom, YouTube, Vimeo, and Wistia videos are embedded automatically when entered in a new line, or at the end of one. For example:
```
Video at the end of line: https://www.youtube.com/watch?v=Xe53-xzKU0U
Video in a new line:
https://www.loom.com/share/d90264426d4848be9c8112fd51841336
```
To prevent a video link from being automatically embedded, wrap it as a link like this:
```
[https://www.youtube.com/watch?v=Xe53-xzKU0U](https://www.youtube.com/watch?v=Xe53-xzKU0U)
```
Videos can also be embedded using the same syntax as images:
```
Format: 
Examples:
```
### Sizing images and video
Media sizing can be done with the additional `=` option:
```
 simple, assumes units are in px
 sets the height to "auto"
 Image with width of 80% and height of 5em
```
## Links
```
http://headwayapp.co - automatic!
[Headway](http://headwayapp.co)
```
## Blockquotes
```
> We're living the future so
> the present is our past.
```
## Inline code
```
I think you should use an `window.HW_config` instead.
```
## Code blocks
### Simple code block
````
```
function someFunction(arg){
if (arg){
// do something
}
}
```
````
### Syntax Highlighting
````javascript
```javascript
function someFunction(arg){
if (arg){
// do something
}
}
```
````