Developer
Documentation
Resources
Get Support
Sign in
Developer
Get Support
Sign in
DOCUMENTATION
Cloud
Data Center
Resources
Sign in
Developer
Sign in
DOCUMENTATION
Cloud
Data Center
Resources
Sign in
Last updated Dec 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
"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
<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.

Rate this page: