Chaperone support

Welcome to Chaperone! This page will show you how to get started, from installing Chaperone to creating your first guide.

Understanding guides

Chaperone offers you various options for in-app guidance and walkthrough to onboard and train your users or employees. Guides help you interact with end-users within your website or web app. They make users more productive and satisfied. With Chaperone you can create interactive step-by-step guides to train your users within your website or web app. You can also create contextual tooltips or modals.

Chaperone extension

Chaperone has a Chrome extension. Install the extension to create your guides. When you embed your guides in your application, they will work for anyone on any browser.

Chaperone installation and registration

1 Visit www.getchaperone.com and click the Getting started for free button

installation 1 2 Fill in the form and click the Register button

installation 2
3 Download the extension, invite your colleagues and create your first guide!

installation 3
4 Don’t forget to activate your account.

Logging out of the extension

1 Click your username at the top of the extension frame

2 Click Logout

logout

Logging in to extension

1 Click the Chaperone icon at the bottom right of your browser

login

2 Fill in your username or email address and your password

3 Click the Log in button to authenticate yourself

         Once finished, you will be logged into your account

logout

Create your first guide

1 Open the page on which you want to create the guide

2 Click the Chaperone icon at the bottom right of your browser

3 Click the “Create the first guide” button

first-guide

4 Set your guide title and description

PS: Title is compulsory but description is optional. The first 100 characters of your title will appear in guides lists to help you identify your guides. This is helpful for guide management, the search feature and quickly glancing at the guide content. In case you want a specific language for your guide:

  • Use the language options and select your language before you save your guide.

In case your website is a single page application

  • Check Single page app before you save your guide.

5 Click the Create guide button to save

create-guide

6 Click the Add an item button and select an item. An item is attached to an element. I can be a step of your         walkthrough, a tooltip or a modal.

add-item

7 Click the element you want to add the item to

click-item

8 Fill the item widget with title and/or content.

         Without content, you cannot save your item.

9 Click the Finish button to save the item and go back to the editor or click the Next button to add another item.

first-guide

Chaperone features

  • Walkthroughs are step-by-step guidance you use to train your users through a process. Walkthroughs are interactive. They make people learn by doing. They reduce waste of time and lead to optimal use of your application. Read more
  • Tooltips are messages that can be attached to any element. Small animated markers are used to draw the attention of your users to an element on the page. Read more
  • Modals are dialog boxes that are displayed on the middle of your page. You can use them to share information, images, videos, tips and more with your users. Read more
  • Custom branding offers you total control on Chaperone appearance. Read more
  • Segments allow you to target specific users of your guides or select specific guides for a URL. You can segment your users by role, location… or using any custom attributes about your users. Read more
  • Analytics lets you collect, measure and analyze how your guides are used. Read more
  • User tracking records for you the different actions that users perform on your website, especially their interaction with your guides. Read more
  • Marketing automation includes customer data integration and helps you define under which conditions a guide should start Read more
  • Team account gives you and colleagues the opportunity to work together on account, define each team member’s role and grant specialized levels of access to the account. Read more

Chaperone features

This section allows you to update your username, email, phone, password and more.

How to modify your profile

1 Click your username at the top of the extension frame

2 Click dashboard

dashboard

3 Click your username at the top right of the dashboard

4 Click Profile

profile

5 Update your profile and click the Update profile button

Walkthroughs

Walkthroughs are step-by-step guidance you use to train your users through a process. Walkthroughs are interactive. They make people learn by doing. They reduce waste of time and lead to optimal use of your application.

walkthroughs

How to add a step

To add walkthrough steps to your website,

1 Click the Add an item button and select Add a step

add-step

2 Click the element you want to add the step to

3 Fill the step widget with title and content

4 Click the Finish button to save the step and go back to the editor or

          Click the Next button to add another step

next-click

You can customize your content with the WYSIWYG editor

  • Click the editor icons to format your text.
editor-icons

You also have the possibility to attach media (links, images, audio and video) to your step.

  • Click either the image / link/ media icon of the editor while adding your step content
  • Add your media file URL and click Insert to save the step
add-media-image save-media-image

5 Set which action a user should take before moving to the next step:

  • Clicking the Next button
  • Clicking the element the step points to
  • Hovering the element the step points to
  • Writing text in the form field the step points to
insert-text-media

Tooltips

tooltip

Tooltips are messages that can be attached to any element. Small animated markers are used to draw the attention of your users to an element on the page. Your tooltips are displayed when users hover over or click on markers. Generally, tooltips show information about a specific element.

To add tooltips to your website,

1 Activate the Chaperone browser. Launch the Chaperone editor by clicking on the launcher button at the bottom          right of your page.

2 Log into your account if you are not

3 Click the Create a guide button and describe your guide

PS: Content is compulsory. The first 100 characters of your title or description (in case you provide only description) will appear to help you identify your guide. This is helpful for guide management, the search feature and quick glancing at the guide content.

4 Save your new guide by clicking the Create guide button

5 Click the drop down button to select the guide item types and select Add a tooltip

add-tooltip

6 Use the blue selector to attach your tooltip to an element.

7 Fill in the content of your tooltip.

         Without content, you cannot save your item.

8 Choose the action which triggers the tooltip appearance

9 Click the Next button to save and add another tooltip

         the Finish button to save and, stop adding tooltips

         the Cancel button to cancel the tooltip addition and select another element save-tooltip

That’s all! Preview your tooltips, edit and embed!

Modals

tooltip

A Modal is dialog box that is displayed on the middle of your page. You can use it to share information, images, videos, tips and more with your users. To add modals to your website,

1 Activate the Chaperone browser .

2 Launch the Chaperone editor by clicking on the launcher button at the bottom right of your page.

3 Log into your account if you are not

4 Click the Create a guide button and describe your guide

PS: Content is compulsory. The first 100 characters of your title or description (in case you provide only description) will appear to help you identify your guide. This is helpful for guide management, the search feature and quick glancing at the guide content.

5 Save your new guide by clicking the Create guide button

6 Click the drop down button to select the guide item types and select Add a modal

add-modal

7 Fill in the content of your tooltip

8 Click the Finish button to save your modal

save-modal

If you want to add several modals on the same page, just click the drop down button and select Add a modal again. Add as many modals as you want, users will click next to go through them.

9 Embed in your website or web app

Expert mode

Expert mode is a set of advanced features you can use to improve your guides especially when your website is dynamic. When you activate the Expert mode you can:

  • add a specific selector to your step and set its path by providing a regular expression.
  • change your widget placement.

How to use expert mode

1 Click your username at the top of the extension frame.

2 Click My guides

my-guides

3 Click the guide title

4 Click Items

items

You can also simply hover your guide title and click the edit icon

edit-guides

5 Hover the item you want to edit and click the Edit icon on the right

edit-item

6 Check the Expert mode box

7 Set the step path and selector for a specific element.

8 Specify the widget position relative to the element (top, bottom, right, left)

9 Click the Save button. expert-mode expert-mode-2

Backdrop

The backdrop helps you highlight the element the steps and tooltips point to, or the modals. You just need to make sure the “Backdrop” feature is activated when you edit your item. You can also customize the “Backdrop” color. Read the style section to get more information about how to customize the backdrop color.

The backdrop is activated by default on the modal widget. To remove the backdrop from a modal, click your widget title and uncheck backdrop.

How to add Backdrop

If you want to add a backdrop to a step,

1 Click your guide title.

2 Click Items and hover the step you want to edit.

3 Click the Edit icon at the right side of step’s title.

4 Check the Expert mode box.

5 Check the Backdrop box.

backdrops

Items

You can click the Edit button to change an item content or title. You can also change the action that triggers the next item. Once you finish, click the Save button to save your changes.

How to edit a step/ tooltip/ modal

1 Click your username at the top of the extension frame

2 Click My guides and hover the step you want to edit.

3 Click a guide title.

4 Click Items

or

1 Hover an item and click the Edit icon at the right

2 Update your step/tooltip/modal and save it

Use Expert mode for advanced settings in case you want to specify an element for your step or tooltip.

  • Set the step path and its selector for a specific element.
  • Specify the step or tooltip widget position relative to the element (top, bottom, right, left)
  • Check Backdrop to highlight the widget and the element it point to

Reordering steps

You can reorder your walkthrough steps. You just need to click and hold the step you want to move and drop it at the position you want it to be. The new order is automatically saved and will be used when playing the guide.

Deleting steps

Click the Trash icon to delete your item. You have the possibility to undo your action if it is a mistake. Just click the Undo button at the bottom of the items page.

Previewing

You can preview your guides without having embedded them.

How to preview a guide?

1 Click your username at the top of the extension frame

2 Click My guides

3 Hover the guide title and click the Play icon

preview

There is also a Preview option in the guide menu. Just click it and your guide will play.

play-guide

Under the list of your items, there is also a “Preview” button.

play-guide

When you are previewing a guide, you can pause it using the Reduce icon.

reduce-button

To resume the preview, click the Editor launcher button at the bottom right of your screen.

reduce-button

Styling

Every guide you create has the same default style. You can customize them by selecting one of the themes we offer or create a new theme. It is also possible to customize with CSS.

In the editor, you can change the colors of bubbles, tooltips, markers, player question marks and backdrops.

How to custom a guide style

1 Go to your guides list

2 Click a guide title

3 Click Style

style 1

4 Choose a theme or create your own

When you create a new theme, set the color for the widget you want to modify, name your new theme and save. The new theme you created is now in your themes list. Select it and click Save to apply it to widget.

5 Click the Save button

style 2 style 3 style 4

You can also edit or delete a theme.

style 5

Sharing

You can easily share your guides via social networks or email. You will be provided a unique link to your guide.

How to share a guide

There are many ways to share a guide

You can:

1 Click your username at the top of the extension frame

2 Click My guides

3 Click the guide title

4 Click Share

Share 1

5 Choose where to share your guide, either on social networks or via Email

Share 3

Or:

1 Click your username at the top of the extension frame

2 Click My guides

3 Click the guide title

4 Click “Items”

5 Click “Share this guide”

6 Copy the guide link or select a social network

7 Share your guide.

Share 2

Cloning

Cloning allows you to duplicate your guides. When you have several similar pages or pages sharing the same components, you can reuse any of the steps from one page to another. You just have to clone your guide; then edit to modify or delete steps you will not need for the new guide.

1 Click your username at the top of the extension frame

2 Click My guides

3 Click the guide title or hover the guide title and click the Duplicate/Copy icon

Clone 1

4 Click Clone

Clone 2

5 Set your guide title, website URL and description

In case your website is a single page application:

         - Check Single page app before you save your guide.

         - Click the Create guide button to save

Clone 3 Clone 4

Deleting

There is no going back when you delete a guide you don’t want to use anymore.

How to delete a guide

1 Click your username at the top of the extension frame

2 Click My guides

3 Click the guide title.

4 Click Delete

Delete 1

5 Click Delete guide to confirm

Delete 2

Settings

Use “Settings” to modify key elements of your guide such as title, description, language, and restrict to a specific website URL if needed. You can also specify if your web app is a Single Page Application.

How to change your guide settings

If you want to change your guide settings,

1 Click your username at the top of the extension frame

2 Click My guides

Setting 1

3 Click a guide title

Setting 2

4 Click Settings

Setting 3

5 Modify title, description, and language, indicate a website URL which the guide is restricted to if needed and             specify if it is a guide for a single page application.

6 Click the Update guide button

Setting 4

Embedding your guides

Embedding allows your users to view your guides without installing the Chaperone extension. Using embed helps you define:

  • who can view your guides,
  • when your guide is played and
  • get analytics…

You only need to insert a line of code in your website to make it work. Any update you make from your editor or dashboard is directly applied to guides in your website.

How to embed

Guides

You can embed one or all of them.

1 Click the guide title

2 Click Embed

3 Choose to embed a specific guide or more

           Target a page

  • Check the Target a page box and specify the page URL to enable the guide for that particular page.

Trigger options (available when you embed only one guide)

  • Set the condition to show your guide

Example: Your guide could start playing when a visitor comes for the first time on your website

           Style
  • Set a theme for your guides before you embed.

Localization (available when you want to embed several guides)

  • It helps you embed only guides a specific language or in all languages.

4 Copy the generated code in your website or app pages <head> tag

embed

When you embed one guide, it will be triggered depending on the options you chose. However, when you have many guides embedded, a player will be shown on the pages you embedded them for users to choose which one they want to play.

embed 2

Advanced embed

  • Embed all guides
          
            <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>
<script> Chaperone.init({ "api_key":"Your Chaperone api keys" }); </script>
  • Embed only the guides I create
        
          <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>
            
              <script>
                Chaperone.init({
                "api_key":"Your Chaperone api keys",
                "group": "Your group ID"
              });
              </script>
            
        
      
  • Embed all the guides I create using my segmentation criteria
        
          <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>
            
              <script>
                Chaperone.init({
                "api_key":"Your Chaperone api keys",
                "group":"Your group ID",
                "segment": true
              });
              </script>
            
        
      

Target a page

Where a page URL
  • Is
        
          <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>
            
              <script>
                Chaperone.init({
                "api_key":"Your Chaperone api keys",
                "group":"Your group ID",
                "segment": true,
                "target_url": {
                  "rule": "is",
                  "path": "Your url"
                }
              });
              </script>
            
       
      
  • Contains
        
          <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>>
            
            <script>
              Chaperone.init({
              "api_key":"Your Chaperone api keys",
              "group": "Your group ID",
              "segment": true,
              "target_url": {
                "rule": "contains",
                "path": "Your url"
              }
            });
            </script>
          
      
    
  • matches
        
          <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>
            
              <script>
                Chaperone.init({
                "api_key": "Your Chaperone api keys",
                "target_url": {
                  "rule": "regex",
                  "path": "Your url",
                  "flags": "Enter your url variable parameters"
                }
              });
              </script>
            
       
      

Localisation

  • Select a language
        
          <script src="https://localhost.ssl:5000/embed/chaperone.js"></script>
            
              <script>
                Chaperone.init({
                "api_key":"Your Chaperone api keys",
                "locale":"Your localization ISO code"
              });
              </script>
            
       
     

Exporting guides

Export is an option for offline use. It makes you independent from a Chaperone server. When you export your guides, they come in a Zip file with a read-me that helps you add them to your application.

How to export guides

1 Click the guide title

2 Click Export

3 Select an export option

4 Click the Download file button Once your download is completed:

5 Copy and paste the “Zip file” in your website folder

6 Unzip the downloaded file

7 Include the main chaperone.js script file into your HTML file

export 1

8 Change the ‘app_url’ property according to the path of the folder you extracted the zip file into

export 2

Setting Account

How to change your account settings

To change your account settings,

1 Click your username at the top of the extension frame

2 Click Dashboard

Dashboard

3 Click your username at the top of the dasboard

4 Click Settings

Dashboard Settings

With account settings, you can:

  • Upgrade your account
  • Enable/disable email report, favorites and feedback
  • Add your custom branding
  • Integrate support pages
  • Add a new language

Localization

Localization allows you to adapt your guides for a specific language by translating guides components into the selected language. Using this option, you can provide guides in multiple languages to your users.

How to set localization:

1 Go to Account settings (See how to go to account settings)

2 Click Localization

3 Click a language to edit or click New language

localization

4 Provide the transition strings for your new language and click the Create language button to save.

Localization 2

5 Choose your guide language when you create a new guide. You can also modify the language for an existing guide.

1 Click your guide title to edit

2 Click Settings and select your language

3 Click Update guide

Localization 3

Support Integration

Support integration allows you to insert in the Chaperone player, a direct link to your support page. The Chaperone player appears to your users when you embed several guides. It shows your users the list of your guides. With the link added to the Chaperone player, your users can go for more information or a complete documentation including by using the link.

support-integration1

How to integrate support pages

1 Go to Account settings (See how to go to account settings)

2 Click Support integration

3 Label the support link and add the URL of the support page

4 Click Save settings button to save.

support-integration2

Resetting password

1 Click the I forgot my password link

reset password

Or

Use this link to reset your password https://app.getchaperone.com/password/new

2 Enter your email and click the Send password reset instructions button

reset password 2

3 Check your email and click the Reset my password button

reset-password-3

4 Set a new password and click the Change my password button

rest-password-4

5 Fill in your username or email address and your password, and click the Log in button to recover your account

reset-password-5

Customization

Use this feature to control the branding of your business and alter the guides to fit that branding.

Custom branding

  • Set the company name that will be displayed in the Chaperone Player.
  • Chose your company color that will be used to color the Chaperone Player.
  • Replace the Chaperone logo by your Company logo in the Player button.
  • Use your signature in the Player, change the “Powered by Chaperone” message.

How to add your custom branding

1 Go to account settings (See how to go to account settings)

2 Click Branding

3 Fill your Company name and set your brand color

4 Indicate your Company logo URL

5 Customize the Powered by link

6 Click the Save settings button to save your branding

customization

Custom Style

You can also customize your widget, marker, player and backdrop color. Read your Styling section to learn more.

Logging out

1 Click your username at the top of the extension frame

2 Click Logout

logout

Dashboard

In your dashboard, you can:

  • View analytics
  • View the guides list
  • View analytics data on your users
  • Manage segments
  • Manage feedbacks
  • Manage team members
  • Modify your profile
  • Upgrade your account
  • Enable/disable email report, favorites and feedback
  • Add your custom branding
  • Integrate support pages
  • Add a new language

How to go to your dashboard

1Click your username at the top of the extension frame

2Click Dasboard

Dashbord1

Analytics

Analytics allows you to have an overview of your guides usage. You can get information such as:

  • Total number of times the player was opened
  • Total number of times guides were played
  • Total number of times guides were abandoned
  • Total number of times guides were completed
  • Total number of positive feedbacks
  • Total number of negative feedbacks
  • Average percentage of completion per guide
Analytics1

You can also get statistics on a specific guide analytics:

  • View analytics per day, week or month
  • Total number of times the guide was played
  • Total number of times the guide was abandoned
  • Total number of times the guide was completed
  • Total number of time each step was viewed

How to view analytics

There are many ways to view analytics

You can:

1 Click your username at the top of the extension frame

2 Click My guides

3 Click the guide title

4 Click Analytics to view analytics related to the guide

Analytics2

Or

5 Go to your Dashboard (see how to go to your dashboard)

6 Click the Analytics icon

People

1Click your Dasboard (see how to go to your dashboard)

2Click People

people1

You can export the people list in CSV format

  • Click the CSV button to export your people list in CSV format

Custom user attributes

Chaperone allows you to set custom attributes about your users when they use the guides. This is very useful if you want to create segments of users with specific criteria and assign them specific guides. Your custom attribute can be by example:
  • Pricing plan
  • Total money spent
  • Location
  • Job title
  • Gender
  • Language
  • Date of signup…

How to add custom user attributes for Chaperone Analytics

You can send a custom attribute through your embedded guide code by adding a people property as key/value pairs.

Here is an example:

        
          
          chaperone.init({
             api_key: ‘xxxxxx’,
             player_icon_url: ‘https://example.com/icon.png',
             default_theme: ‘default’,
             show_launcher: true,
             locale: ‘en’,
             target_url: ‘example.com’,
             app_url: ‘https://app.getchaperone.com',
             debug: false,
             people: {
               user_id: 12345,
               email: ‘johndoe@example.com’,
               name: ‘John Doe’,
             }
           })
         
        
      

Filters are used to create a segment of users for the appropriate guides. Filters are applied to users when to play guides. If a user of your application has properties that match the segment you have defined, then your guide will be played, otherwise, it will not be played.

Filter custom attributes

You can apply a filter base on custom attributes. For example if you are creating a segment of specific users (based on gender and job title).

people2

Segments

Segments allow you to target specific users of your guides or select specific guides for a URL. You can segment your users by role, location… or using any custom attributes about your users. Read the Custom user attributes section to get more information.

How to use segmentation

1 Go to your Dashboard (see how to go to your dashboard)

2 Click Segments on the dashboard menu

3 Click the New segment button to create a new segmentation

4 Set your segment name

5 Select guides you want to use for segmentation

6 Define your segment rules (Rules are based on website URL and users properties)

7 Click the Save button to save your segmentation

You can see the list of segmentations you created in your dashboard

people2

Team

You can invite people to join your Chaperone account to create and manage guides together.

How to invite your team

1 Go to your Dashboard (see how to go to your dashboard)

2 Click your username at the top right of the dashboard

3 Click Members to invite a teammate to your account. Use commas if you want to insert many emails at once.

Team1

4 Click the Send invite button

Team2

Favorite

Favorites-list

Favorite walkthroughs are important or interesting walkthroughs. Using favorites helps users organize walkthroughs and easily access the ones they judged important. Adding the favorite icon to your walkthroughs can help people mark those relevant for them.

How to favorite a walkthrough

While you are playing a walkthrough, you can click the Star icon beside the step title to mark a walkthrough as a Favorite.

Your Favorites list

1 Click your username at the top of the extension frame

2 Click My favorites

Favorites

You can preview, clone and delete.

How to remove the Favorite icon

Walkthroughs and modal have the favorite icon by default.

To remove the favorite icon from all guides created by you or your teammates,

1 Go to Account settings (See how to go to account settings)

2 Click Features

3 Uncheck the Favorites box

4 Click the Save settings button.

Favorite2

Feedbacks

Feedback1

Walkthroughs end with a satisfaction survey. Your customers can give a feedback about your guide, tip or help.

How it works

A widget appears at the end of the walkthrough and ask your users for feedback. They can select from two answers: leaving a positive feedback (thumbs up) or leaving a negative feedback (thumbs down). After that, they can summit a comment that you receive in your dashboard for analysis. We also offer you the ability to follow up with customer since we collect their email when they send their comment.

How to add or remove feedback

Walkthroughs and modals end with a feedback widget.

To remove the feedback widget from all guides created by you or your teammates,

1 Go to Account settings (See how to go to account settings)

2 Click Features

3 Uncheck the Feedback box

4 Click the Save settings button.

Feedback2

How to modify the feedback message

1 Go to Account settings (See how to go to account settings)

Feedback3

2 Click Localization

Localization1

3 Click to edit the language or click the New language Button to add a new language.

4 Replace the title and description for the feedback widget and the labels for the feedback buttons and click            Update language.

Feedback4

How to manage feedback

When users rate your guide, they can leave a comment. A form is opened to collect their comment right after their rating.

You can see the list of feedbacks from users who played your guides in your dashboard.

1 Go to your Dashboard (see how to go to your dashboard)

2 Click Feedback on the dashboard menu

Feedback5

Reading a feedback

  • Click the Eye icon on the feedback line to read it.
Deleting a feedback
  • Click the Delete icon in the feedback list to remove a feedback.

Multiple-subdomains web application

A multiple-subdomains web application is an application that generates a personal subdomain for each user. For example, a user “user1” uses your application through the domain user1.domain.com, and another user “user2” through user2.domain.com.

How to create a walkthrough on multiple-subdomains web applications

Chaperone offers an easy way to manage your guides on multiple-subdomains. To make a guide work for all your users, you just have to change your guide host URL.

1 First in your guide options, click Settings

2 Change the website URL rule.

3 Now select the matches rule.

You have 3 different options:

  • is: this option means that your guide should work if the website root URL matches the exact input
  • contains: this option means that your guide should work if the website root URL contains the input
  • matches: this option means that your guide should work if the website root URL matches the regular expressions you specify.

The matches option allows you to enter a regular expressions rule. Regular expressions allow you to match complex URLs. We suggest the tool at https://regex101.com/ to create and test your regular expressions.

For our case just enter: http://*.domain.com. It means the guide should work for any subdomain or domain.com

4 Click the Update guide button to save the settings. Then preview your guide.

Subd-Web

Single-page Applications

Single-Page Applications (SPAs) are Web apps or websites that load all of the resources required to navigate throughout the site on the first page load. As the user clicks links and interacts with the page, subsequent content is loaded dynamically. The application or website will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made.

How to create a guide on single-page applications

To create a guide on single-page Applications, just follow these instructions:

1 Click Settings

2 Check Single page app box and that’s all.

Keep in mind that the single page application will not redirect automatically your guide to the steps URL. Therefore, make sure your next step is on the current page or add a user interaction (for example, force the user to click on a link or a button) on the current step element to make sure your application redirect to the appropriate content.

SAP

How to modify profile?

This section allows you to update your username, email, phone, password and more.

How to modify your profile

1 Click your username at the top of the extension frame

2 Click Dashboard

modify profile

3 Click your username at the top right of the dashboard

4 Click Profile

modify profile 2

5 Update your profile and click the Update profile button

How to measure active time?

Viewing guides analytics for a specific period of time

1 Click your username at the top in the extension frame

2 Click Analytics to view all your guides analytics

3 Click Date to get daily analytics for a period of time

4 Click the Apply button to view corresponding analytics

Is it possible to use Chaperone offline?

Yes, it is possible to use Chaperone offline. This feature is included in our Enterprise plan. Contact us and we will help you implement it.

Does Chaperone work with AngularJS?

Yes, Chaperone works with AngularJS. You just have to check Single page application when you create your guide. Then add steps on your different pages.

Please keep in mind that the single page application setting will not automatically redirect your guide between pages. Therefore, make sure your next step is on the current page or add a user interaction (for example, force the user to click on a link or a button) on the current step element to make sure your application redirects to the appropriate content.

How to embed many guides on multiple pages of a web application?

When you create guides, you get an embed script. You could embed one or all the guides in your website or web application. Just select the option allowing you to embed one or all of them. Then, copy and paste the embed script in the head of your website.

It is possible to embed the Chaperone embed script only once. Select the “embed all of them” option and you are set. Any guide you create will be automatically added to your website or web application. Guides are displayed in a list when a user clicks on launcher and they can select one from the list to play.

What is possible with customization?

Currently, it is possible to customize popup color and location but size and shape customization, and animation are not yet possible.

Do end-users need to install player?

Our embed feature helps your end-users play your tutorials without installing Chaperone plugin. Once you embed Chaperone code in your website, your tutorials will be displayed to your end-users (regardless of the browser they are using) through a launcher or will be automatically triggered. All these depend on how you set your tutorials.

How to make Chaperone guide responsive?

There is a way to make Chaperone work with mobile devices.

First, you have to separate guide on desktop from guide on mobile device. To create the guide for mobile device, you can select element in the responsive mode of your browser. Here is a quick video that shows you how to do it http://take.ms/P1eC4.

Secondly, you have to show separate tours to users based on whether they are using a desktop or a mobile. Here is how to use segments.

Currently, we are working to implement a better solution as soon as possible.

Why is my guide not working?

It may be due to:

1 Your website type

You build your guide on a single page application and you didn’t check off the SPA box.

2 Next trigger action

The next trigger action you selected doesn’t match with the next step.

3 Dynamic website

There is a change in your page you will need to update your guide and reselect the element.

4 Conflict with your application

Please contact us and provide us the following information to help us solve your problem:

  • The url of your application
  • If you have an authentication on you application, please provide us credentials to sign up for a demo account.
  • A screenshot of your browser JavaScript console.

Chaperone JavaScript API Reference

Reference

Embedding the Chaperone JavaScript API provides a JavaScript object with some methods that allows you to interact with the Chaperone player and your guides.

How to embed

Include the Chaperone JavaScript into your application HTML code as follow.

         
           <script src=“https://app.getchaperone.com/embed/chaperone.js” ></script>
         
        

Public methods

Chaperone.init

This method initialises the Chaperone JavaScript object.

         
           
             Chaperone.init({
                api_key: ‘xxxxxx’,
                player_icon_url: ‘http://example.com/icon.png’https://example.com/icon.png’
                default_theme: ‘default’,
                show_launcher: true,
                locale: ‘en’,
                target_url: ‘example.com’,
                app_url: ‘https://app.getchaperone.com’
                debug: false,
                people: {
                user_id: 12345,
                email:‘johndoe@example.com ’,
                name: ‘John Doe’,
                }
              })
           
         
        

It accepts a settings parameter with the following attributes:

  • the API key used to identify the account that sends the requests.
  • player_icon_url (string, business or enterprise accounts only):the URL of an icon you want to use instead of the default icon shown in the Chaperone player launcher.
  • default_theme (string, default ‘default’, business or enterprise accounts only): the id of the default theme used for the guides, from the list of the themes predefined in your account
  • show_launcher (boolean, default true):whether or not to show the Chaperone player launcher by default.
  • locale (string, default ‘en’): the code of the language to show the player in, from the list of languages predefined in your account.
  • target_url (string): the URL to activate the player on. It can be a regular expression.
  • app_url (string, default ‘https://app.getchaperone.com’, single tenant or self-hosted enterprise accounts only):the root URL to the Chaperone installation.
  • debug (boolean, default false): whether or not to show debug messages in the browser console when an error happens.
  • people (object, business or enterprise accounts only):an object describing the current user of the player, used for analytics or segmentation purposes. The user_id and email attributes of the object are required. You can set additional properties like name, role or other custom properties to use for segmentation.

Chaperone.guides.get

This method returns the list of guides for the account. You can send filters as an optional first parameter of the call to the method. Currently Chaperone only support the URL filter. Other filters will be added in the future.Other filters will be added in the future.

            
              
                Chaperone.guides.get({
                  url:‘https://example.com’
                })
              
            
         

Chaperone.guides.get_by_id

This method returns an object with the properties of the guide specified by id.

Chaperone.guides.get_by_id(guide_id)

Return value
           
             
               {
                id: 12345, // The unique guide ID
                title: ‘Some awesome guide’, // The guide title
                link: ‘https://example.com/somewhere’, // The URL where
                the guide starts
                description: ‘Lorem ipsum dolor sit amet,
                consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis
                nostrud exercitation ullamco laboris nisi ut aliquip ex
                ea commodo consequat.’, // The guide description
                created_at: ‘2015-04-12 11:04:44 UTC’,
                updated_at: ‘2015-04-12 11:04:44 UTC’,
                share_url: ‘http://app.getchaperone.com/share/xxxxx'”>
                http://app.getchaperone.com/share/xxxxx’, // The unique URL to
                share the guide
                theme: ‘default’, // The ID of
                the theme used to show the guide
                items: [{
                id: 12345, // The unique item ID
                title: ‘Item title’, // The item title
                content: ‘Lorem ipsum dolor sit amet,
                consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua.Ut enim ad minim
                veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat.’, // The item content
                element: ‘#some-selector’, // The CSS selector for the item
                target element
                type: ‘item’, // The item type. Can be ‘item’, ‘tooltip’
                or ‘modal’
                },…]
                }
             
           
          

Chaperone.player.open

This method opens the player when called.
Chaperone.player.open()

Chaperone.player.close

This method closes the player when called.

Chaperone.player.close()

Chaperone.player.toggle

This method opens the player if it was closed or closes it otherwise.

Chaperone.player.toggle()

Chaperone.player.destroy

This method completely removes the player from the Document Object Model. It stops any current active guide. It removes any DOM element and even listener added to the document.

Chaperone.player.destroy()

Chaperone.player.play

This method launches the guide which ID is specified as first parameter. It can also jumps to the optional item ID specified as second parameter.

Chaperone.player.play(guide_id, item_id)

Chaperone.player.stop

This method stops the current playing guide.

Chaperone.player.stop()

Chaperone.player.play_item

This method makes the current playing guide jump to the item which ID is specified as parameter. It also accept the strings ‘previous’ and ‘next’ to respectively jump to the previous and next item in the guide

Chaperone.player.play_item(item_id)

Chaperone.player.current

This method returns and object with the current playing guide ID and item ID.

Chaperone.player.current()
Return value
            
              
                {
                  guide_id: 12345,
                  item_id: 6789
                }
              
            
           

Chaperone.player.callback

This method sets callbacks that will be run on specific events in the player. If the callback returns a promise, execution flow will be interrupted until the promise is resolved.

Chaperone.player.callback(‘onStepShow’, function (player, guide_id, item_id) {
// do something
})

Available callbacks are the following:

  • onInit (arguments: player): called right before the player is initialised.
  • onDestroy (arguments: player): called right before the player is destroyed.
  • onGuidePlay (arguments: player, guide_id):called right before a guide is played.
  • onGuideStop (arguments: player, guide_id):called right before a guide is stopped.
  • onItemShow (arguments: player, guide_id, item_id):called right before an item is shown.
  • onItemShown (arguments: player, guide_id, item_id):called right after an item is shown.
  • onItemHide (arguments: player, guide_id, item_id):called right before an item is hidden.
  • onItemHidden (arguments: player, guide_id, item_id): called right after an item is hidden.
  • onItemNext (arguments: player, guide_id, item_id):called right before the next item is shown.
  • onItemPrevious (arguments: player, guide_id, item_id): called right before the previous item is shown.
  • onRedirect (arguments: player, guide_id, item_id, path):called before the player attempts to redirect. It can be used to set your custom redirect function instead of the default document.location.href
  • onRedirect (arguments: player, guide_id, item_id, path):called when the player cannot redirect to the item path. E.g. when the item is on a resource requiring authentication.

Chaperone.people.set

This methods updates the people parameters that are sent with analytics data. It can be called e.g. if the user attributes changes in your app.

              
                
                  Chaperone.people.set({
                    email: ‘johndoe@example.com’,
                    name: ‘John Doe’,
                  })
                
              
             

Chaperone.people.get

This methods returns the current parameters set for people analytics.

Chaperone.people.get()
Return value
              
                
                  {
                  user_id: 12345,
                  email: ‘johndoe@example.com’,
                  name: ‘John Doe’,
                  }