Embedding the Chaperone JavaScript API provides a JavaScript object with set of methods that allows you to create a powerful experience for you and your users. You can define how user with the Chaperone (player and guides) as well as display and update user information in your dashboard.

How to embed

Place the chaperone JavaScript into your application html code as follow:

<script src=“” async></script>


window.chaperone=window.chaperone||[],chaperone.init||(chaperone.init=function(n){for(var e=["destroy"],o=function(n){return function(){chaperone.push([n,,0)])}},r=0;r<e.length;r++)chaperone[e[r]]=o(e[r]);chaperone.push(["init",[n]])});




Public methods

chaperone.init accepts the following settings:

-- api_key(string): helps us identify the account that sends the requests.

-- player_icon_url (string, business or enterprise accounts only): replacesthe default icon shown in the Chaperone player launcher by another icon using URL.

-- show_launcher (boolean, default ‘true’): specifies whether or not you want to show the Chaperone player launcher by default.

    *launcher (object, business or enterprise accounts only):an object describing user     launcher settings. 

  • Ølabel (string): defines the label to be displayed on the launcher otherwise only the question mark icon will be displayed.
  • Øradius (integer): sets the launcher’s border radius property
  • Øplacement (string): sets the launcher placement on the page. The different placements are: top, bottom, left and right.

                 When the placement is ‘top’: the launcher and the player are automatically aligned on the top of the page.

                 When the placement is ‘left’: the launcher and the player are automatically aligned on the left of the page.

                 When the placement is ‘right’: the launcher and the player are automatically aligned on the right of the page.

                 When the placement is ‘bottom’: the launcher and the player are automatically aligned on the bottom of the page.

        NB: It’s very important to know that it’s not possible to set the ‘top’ or ‘bottom’ value without specifying either the ‘left’ or the ‘right’ value.

  • Øoffset (object, property: string, value: integer): regardless of the placement of the launcher, use the offset property to define launcher offset options. Options are: top, right, left and bottom.
  • Øanimation (object): applies animation effect to the launcher. The animation effects are: 

                   for launcher with label: tada, hinge

                   for launcher that is aligned to left: slideInLeft

                   for launcher that is aligned to right: slideInRight

                   for any launcher:bounce, bounceIn, bounceInUp, bounceInDown, flash, rubberBand, shake, swing, wobble, flipInX, zoomIn

                   IterationCount: It’s used to set the launcher iteration count. It has only two properties: default and infinite.

                             When it’s set to default: the launcher is animated once

                             When it’s set to infinite:the launcher stays animated.

                    duration (integer):sets the animation time interval.

    *player (object): it contains the list of the guides that should be displayed on the page. It has two properties: type and backdrop

          Øtype (string): player type can be: default, bubble and center.

                    When type is default:launcher is hidden when player is displayed and launcher is displayed when player is hidden.

                    When type is bubble:the launcher and the player (with an arrow pointing to the launcher) are displayed and when the player is hidden, only the launcher is displayed.

                    When type is center:acts like default type(launcher is hidden when player is displayed and player is hidden when launcher is displayed) but with this value, the player is displayed in the middle of the screen. 

          Ø backdrop (boolean): when value is true the player is displayed with a darken background and when value is false the player is displayed without a background.

-- locale (string, default ‘en’): helps define the code of the language to show the player in. Must be selected from the list of languages predefined in your account.

-- app_url (string, default ‘’, single tenant or self-hosted enterprise accounts only): the root URL to the Chaperone installation.

-- debug (boolean, default ‘false’): shows or not debug messages in the browser console when an error happens.

-- people (object, business or enterprise accounts only): describes people using the player. It is used for analytics or segmentation. 

Ps: Contact us at support@getchaperone.comif you have a problem with a method call (for example, the method is not returning the correct value or not performing the intended action).

Did this answer your question?