Configuring the Client

This page documents the configuration settings that you can use to configure the Hypothesis client once it’s embedded in your website.

Configuring the Client Using JSON

The Hypothesis client can be configured by providing a JSON config object in the body of the hosting page:

<script type="application/json" class="js-hypothesis-config">
    "openSidebar": true
<script async src=""></script>

Not all configuration settings can be set in this way, some must be set using JavaScript (see below).


The body of the .js-hypothesis-config tag must be valid JSON, invalid JSON will cause the entire config object to be ignored.

Configuring the Client Using JavaScript


Alternatively, the Hypothesis client can be configured from the hosting page by providing a JavaScript function named window.hypothesisConfig() that returns a configuration object. Some configuration settings (for example settings that register callback or event handler functions) can only be set from JavaScript:

window.hypothesisConfig = function () {
  return {
    "openSidebar": true

Config Settings

Client Behavior

These settings configure the behavior and initial state of the client when it loads.


Boolean. Controls whether the login panel is automatically opened on startup, as if the user had clicked “Log in” themselves. (Default: false.)


Boolean. Controls whether the sidebar opens automatically on startup. (Default: false.)


Boolean. Controls whether the in-document highlights are shown by default. (Default: true.)


Array. A list of alternative annotation services which the client should connect to instead of connecting to the public Hypothesis service at May optionally include information (in the form of grant tokens) about user accounts that the client is logged in to on those services.

For example:

window.hypothesisConfig = function () {
  return {
    services: [{
      authority: '',
      grantToken: '***',
      icon: ''

By default, if no services setting is given, the client connects to the public Hypothesis service at


The services setting is currently still experimental and may change in the future.


Currently only one additional annotation service is supported - only the first item in this services array is used, and any further items in the array are ignored.

Each item in the services array should be an object describing an annotation service, with the following keys:


String. The domain name which the annotation service is associated with.


String|null. An OAuth 2 grant token which the client can send to the service in order to get an access token for making authenticated requests to the service. If null, the user will not be logged in and will only be able to read rather than create or modify annotations. (Default: null)

See also

Generating authorization grant tokens for how to generate grant tokens for the service.


String|null. The URL to an image for the annotation service. This image will appear to the left of the name of the currently selected group. The image should be suitable for display at 16x16px and the recommended format is SVG.


function. A JavaScript function that the Hypothesis client will call in order to login (for example, when the user clicks a login button in the Hypothesis client’s sidebar).

This setting can only be set using window.hypothesisConfig().

If the hosting page provides an onLoginRequest function then the Hypothesis client will call this function instead of doing its usual procedure for logging in to the public service at

No arguments are passed to the onLoginRequest function.

The onLoginRequest function should cause a login procedure for the hosting page to be performed - for example by redirecting to a login page, or by opening a popup login window. After a successful login the hosting page should reload the original page with a non-null grantToken for the logged-in user in the services configuration setting.


Branding lets you adjust certain aspects of the sidebar’s look and feel to better fit your site’s own look.

Object. The key-value pairings used to identify how the brandable elements in the sidebar should be presented. The allowed keys will be described below. The values will be directly mapped to the css styles for the elements which it affects. That means any valid css property for the specified type will work. For example, if the value type is a Color, you can specify any browser supported color value (hex, rgb, rgba, etc.).

For example:

window.hypothesisConfig = function () {
  return {
    branding: {
      appBackgroundColor: 'white',
      ctaBackgroundColor: 'rgba(3, 11, 16, 1)',
      ctaTextColor: '#eee',
      selectionFontFamily: 'helvetica, arial, sans serif'

The following keys are supported in the branding object. You will also see what value type we are expecting.


The branding setting is currently still experimental and may change in the future.


Color. We have several areas in our client that have pops of color that are secondary to the primary call to action elements. Things such as the “more” and “less” links to expand and collapse large annotation bodies.


Color. This will update the main background color of our app.


Color. This will update the main call-to-action button backgrounds. A call-to-action button example would be our “Post to {Group Name}” button when making an annotation.


Color. This will update the text color inside of the call-to-action buttons.


Font Family. The selection text is the part of the annotation card that reflects what the user highlighted when they made the annotation. This value will update the font-family of that text.


Font Family. The annotation text is the actual annotation value that the user writes about the page or selection. This value will set the font-family of that text when it is being viewed as well as the font-family of the editor as the annotation is being written.

Asset and Sidebar App Location

These settings configure where the client’s assets are loaded from.


These settings are currently still experimental and may change in the future.


String. The root URL from which assets are loaded. This should be set to the URL where the contents of the hypothesis package are hosted, including the trailing slash. (Default: for production builds: "", for development builds: "http://localhost:3001/hypothesis/X.Y.Z/""`. ``X.Y.Z is the package version from package.json).


String. The URL for the sidebar application which displays annotations (Default: "").