Hipchat Cloud and Server Developer

Hipchat Cloud and Server Developer

Last updatedDec 8, 2017

Configuration page

An add-on can expose a configuration page in the HipChat administration section, so users can configure the add-on in the context of the room/team they have installed it. 

Declaring the configuration page

Technically, this is done by loading a web page exposed by your add-on inside an iframe in HipChat. Configuration pages are declared in the add-on descriptor: 

1
2
3
4
5
6
"capabilities": {
    ...,
    "configurable": {
        "url": "https://my.addon.com/configure.html"
    }
}

Building the configuration page

The configure HTML page will need to add one JavaScript and one CSS link in its head element. This allows a bridge to be created to the parent page for two-way communication, as well as provide some common styling. A very simple configure page will look something like this:

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <script src="https://www.hipchat.com/atlassian-connect/all.js"></script>
    <link rel="stylesheet" href="https://www.hipchat.com/atlassian-connect/all.css">
  </head>
  <body>
    Hello World!
  </body>
</html>

To assist in development, you can change all.js or all.css to have a "-debug" suffix, making all.js, for example, all-debug.js.

Security

Whenever HipChat loads a configuration page, it includes a JWT token.