# Checklist introduction

Get your users to their aha! moment faster.

Let your users onboard themselves with a **checklist**, so they don't miss anything.

## Progress

Items can be a video or a URL, and they get marked off the list as they are completed so that the user can see their progress.

![](/files/-Mb2bRorXxT39DWDvCZr)

## Videos

We integrate with major video host websites, such as Youtube, Vimeo, Wistia, and Loom.

![](/files/-Mb2bRoqsPEf3LAbIyzt)

## Intercom Integration

View customer checklist progress in Intercom Inbox.

![](/files/-Mb2bRopVFitWMsboFbK)

#### Analytics

Data analytics for checklist item progress by users as well as each item.

#### Customization

Customize theme color, launcher position, fonts, call-to-action titles, etc.

#### Intercom events

Checklist items get marked off based on Intercom events.

#### Page Targeting

Show checklist only for a group of specific URL paths.

#### User Targeting

Show checklist only for a specific group of users based on Intercom user and company attributes.

#### Tag Intercom Users

Add a tag in Intercom to the user who completes the checklist.


# HubSpot Installation

Click Connect with HubSpot on the home page: <https://checklist.getalvis.com> to start.

Once you are logged in, following the steps to [install the checklist widget](/widget/installation-widget).


# Widget installation

Add widget in your website to enable Checklist

&#x20;

1. **Install the script.** Add the code below to every page on which you want to enable Checklist. Copy and paste it before the **`</body>`** tag on each page.

   ```javascript
   <script>
   (function(a,l,v,i,s){
     a._Alviss=[];
     a.Alvis=function() {a._Alviss.push(Array.prototype.slice.call(arguments));}
     a.alvis_config={alvis_id:"{{YOUR_ALVIS_ID}}"};
     i=l.getElementsByTagName('head')[0];
     s=l.createElement('script');s.async=1;
     s.src=v;
     i.appendChild(s);
   })(window,document,'//assets.getalvis.com/alvis-onboard-1.0.19.js');
   </script>
   ```
2. **Optional.** After adding the code, go to your website or web app and load any of the pages you just updated. Call `window.Alvis("boot")` to make sure Alvis is installed.
3. **Show checklist to your user.** Once you have a logged in user on your site (after they have authenticated and you have their user IDs available) you call the following to identify the user. **For Intercom,** **Make sure to use the user\_id that you use to identify users, so we can match them. For Hubspot, make sure to use the email of the current logged in user.**

   ```javascript
   window.Alvis("identify", "{{YOUR_UNIQUE_USER_ID}}");
   ```

   After a user is identified, the launcher will be shown at the bottom right corner.
4. Whenever the URL or route changes, you need to call **`window.Alvis("page")`** for Alvis to check if or which checklist should be shown.&#x20;

   ```javascript
   window.Alvis("page");
   ```


# Show or hide checklist on URL changes

If your checklist is shown (or hidden) based on which URL the user is on, and your app is a Single Web Application (most of the SaaS websites are), you need to call `window.Alvis("page")` whenever the URL or route changes.

```javascript
window.Alvis("page");
```


# Show checklist manually

To manually show the checklist, add the following code. Keep in mind that if no user is identified, the checklist will not be shown.

```javascript
window.Alvis("show_checklist");
```

If you'd like to show a button that triggers the checklist popup, you can add the onclick attribute to the button.

```html
<button onclick='window.Alvis("show_checklist");'>
  Onboard Me
</button>
```

You can also manually show a different checklist, but you have to make sure the targeting conditions are met if there is any.

```javascript
window.Alvis("show_checklist", "{{CHECKLIST_ID}}");
```

Here is how to hide the current checklist.

```javascript
window.Alvis("hide_checklist");
```

To dismiss the current checklist, this will also hide the launcher all together.

```javascript
window.Alvis("dismiss_checklist");
```


# Embed checklist on a page

<figure><img src="/files/Gcumv32anR8A9dxWHEZb" alt=""><figcaption><p>Embed checklist on a age</p></figcaption></figure>

To embed a checklist on a page, first make sure you have installed [the latest script(1.0.19 or above) and identified the user](/widget/installation-widget). Then, simply add&#x20;

<pre class="language-html"><code class="lang-html"><strong>&#x3C;div 
</strong>    data-alvis-app="checklist" 
    data-checklist-id="{{checklist_id}}" 
    data-fit-size="true"
>&#x3C;/div>
</code></pre>

If you still do not see the checklist, call

```javascript
window.Alvis("show_checklist_embed");
```

Also, most likely, you do not want this checklist to show as a popup. You can hide the checklist by choosing "Do not show on any page" in "Which page should we show this on?" setting on the checklist page.

<figure><img src="/files/KLsTEwAgwl6ZkMPBUa96" alt=""><figcaption></figcaption></figure>


# Hide checklist launcher

This will allow you to hide the checklist launcher in the beginning.

To hide the checklist launcher for a checklist, you have two options.&#x20;

1\. Add `hide_launcher: true` when identifying user:&#x20;

```javascript
window.Alvis("identify", "{{YOUR_UNIQUE_USER_ID}}", {
  hide_launcher: true
});
```

Then, you can manually show the checklist as a popup:

```html
<button onclick='window.Alvis("show_checklist");'>
  Onboard Me
</button>
```

2\. Go to a checklist page, for the targeting setting "Which page should we show this on?", choose "Do not show on any page".&#x20;

<figure><img src="/files/KLsTEwAgwl6ZkMPBUa96" alt=""><figcaption><p>Do not show on any page</p></figcaption></figure>

This way, you **cannot** manually show the checklist as a popup; however, you can [embed the checklist inside you app](/widget/embed-checklist-on-a-page).


# API Callback Methods

When Alvis script is loaded and ready, you can hook into the event. This requires a function argument.

```javascript
window.Alvis("on", "ready", function() { }); 
```

When we dismiss the checklist and the launcher, you can hook into the event. This requires a function argument.

```javascript
window.Alvis("on", "dismiss", function(e) { }); 
```

When all the checklist items are completed by a user, you can hook into the event. This requires a function argument.

```javascript
window.Alvis("on", "checklist-complete", function(e) { }); 
```


# Why my checklist isn't acting correctly?

Frequently asked questions about why a checklist isn't acting correctly.

#### **I have installed the widget, why isn't my checklist showing?**

After the widget is added to your website, you still have to identify the logged in user for the checklist to show. Call `window.Alvis("identify", "{{YOUR_UNIQUE_USER_ID}}")` when a user is authenticated. Make sure to use the user ID when you [identify your Intercom users](https://developers.intercom.com/installing-intercom/docs/intercom-javascript), this helps us link Intercom users to your Checklist users.

#### **I have set up so that a checklist only appears on one page, but why the checklist still appears when I click a link to another page where checklist should not appear?**&#x20;

For single-page app, whenever the URL or route changes, you need to call `window.Alvis("page")` for Alvis to check if or which checklist should be shown.


# Checklist item actions

Describes different actions a user can perform in a checklist item

Currently, there are 4 actions for an end-user to perform in a checklist item: click to watch a video, click to view an URL, click to start an Intercom Product Tour, and click to execute javascript code.

#### **Video action**

The Video action takes an URL of a video from four of the largest video streaming websites we support: Youtube, Vimeo, Wistia, and Loom. The checklist item will be marked as completed right after the end-user clicks to watch the video.&#x20;

#### **URL action**

{% content-ref url="/pages/VEcQ3SUo5grRhhvd9Oph" %}
[URL action](/checklist-item-actions/url-action)
{% endcontent-ref %}

#### **Intercom Product Tour action**

If you are using Intercom Product Tour, choose this action so that your users can start a product tour by clicking the "Start" button of an item. Make sure the product tour is published and the [“Use tour everywhere”](https://www.intercom.com/help/en/articles/2901144-share-your-product-tours) section must be turned on.

#### **Script action**

The Script action allows you to execute a piece of javascript code when the call-to-action button of a checklist item is clicked.


# URL action

The URL action takes an URL of a website. Keep in mind that if the URL has a different domain of the URL of the current page, it will open a new window/tab; otherwise, it will just replace the current page.

#### Custom Variables

You can use custom variables inside the URL. For example, you can add `company_id` into the URL like this: `https://{{company_id}}.mydomain.com/dash` .&#x20;

However, for this to work, you need to set the variable first. For example, to use `{{company_id}}` in the URL, you need to call&#x20;

```javascript
window.Alvis("update", {
  company_id: "ACMEINC"
}
```

in your code. The URL will become `https://ACMEINC.mydomain.com/dash` when the end-user clicks it.

You can add the code right after the company information is present.

#### Intercom Product Tour Link

You can also use an [Intercom Product Tour link here](https://www.intercom.com/help/en/articles/2901144-share-your-product-tours#h_993fa3d9b0). Make sure it is published and the “Use tour everywhere” section must be turned on.

#### Calendly URL

We integrate with Calendly, so if you put a Calendly booking URL here, when a user clicks "Start", the user will see a popup showing the Calendly booking page.\
![](/files/b5CTDsDlrGQVAX7jEsw4)

#### Image URL

If you put an image URL here (ends with `jpeg|jpg|gif|png`), the image will be shown right away under description.


# Complete checklist items

There are two ways to mark a checklist item completed: 1. Click the item. 2. An event tracked using Intercom occurs.&#x20;

To configure this, select a checklist item to view the detail of it. At the bottom of the page, you can select the method in which you want the checklist item to be marked as completed.

![](/files/BupYNl1FEIvKZfoQiu05)

If you choose 'An event occurs', this means that the checklist item for a user will be marked as completed when the user does an action/event that is tracked via Intercom. *Click* [*here*](https://www.intercom.com/help/en/articles/175-set-up-event-tracking-in-intercom) *to see how to set up event tracking in Intercom.*

![](/files/H3uFHG22IiXzsi1fYzOS)


# Add images in item detail

To add an image into the detail section of a Checklist item, use markdown image format:

`![sample.png](https://www.easygifanimator.net/images/samples/video-to-gif-sample.gif)`

For now, only images are supported in the detail section.


# Customize checklist location

If you want the checklist launcher to show at different locations other than the preset locations we have, you can add CSS style to do it.

For example, here's the CSS style code to show the launcher at the top right position:

```css
#alvis-nbcl-launcher { 
  top: 60px !important; 
  bottom: auto !important; 
  right: 10px !important; 
}
```

```css
#alvis-nbcl-container.alvis-nbcl-container--open #alvis-nbcl-wdt { 
  right: 10px !important; 
  z-index: 2147483600; 
}
```

You can tweak this code to suit your need.


# Customize embedded checklist UI

Checklist UI is mostly based on Bootstrap 4 using SASS, and here's the default checklist SCSS file:

{% content-ref url="/pages/NpDz4rpjuyEpFUoKTTh8" %}
[Default Checklist Scss File](/customize-embedded-checklist-ui/default-checklist-scss-file)
{% endcontent-ref %}

Below is the HTML code map of the embedded checklist UI

<figure><img src="/files/TslrDjCYNkPiP9d5NseR" alt=""><figcaption></figcaption></figure>

To customize the UI, go to the checklist page, and add customized CSS code into the Custom style input.

<figure><img src="/files/ndLdYpxJtO3hkMUHUU4Y" alt=""><figcaption><p>Custom Style Input</p></figcaption></figure>

Be sure to add `.cl-container--embed` to change only the embedded checklist UI. Below is a sample custom style:

```sass
.cl-container--embed {
  .cl-inner {
    .cl-top {
      .cl-top__title {
        font-weight: bold;
      }
      .cl-top__progress {}
    }
    .cl-body {
      .cl-item {
        &.cl-item--active {}
        .cl-item__line {}
        .cl-item__title {}
        .cl-item__video {}
      }
    }
  }
}
```


# Default Checklist Scss File

```scss
$cl-border-radius: 16px;

.cl-container {
  position: relative;
  height: 100vh;
  background-color: white;
  border-radius: $border-radius;
}

.cl-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cl-top {
  padding: 0.75rem 1rem 0.5rem 1rem;
  border-bottom: 1px solid $lightGray;
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2147483600;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

.cl-message {
  border-bottom: 1px solid $lightGray;
}

.cl-body {
  flex-grow: 1 !important;
  overflow-y: scroll;
}

.cl-btm {
  position: sticky;
  bottom: 0;
  background-color: white;
  text-align: center;
  width: 100%;
  padding: 0.25rem 1rem;
  border-top: 1px solid $lightGray;
  z-index: 2147483600;
  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
}

.cl-item {
  padding: 0.5rem 1.25rem;
  display: flex;
  flex-direction: row;
  font-size: 0.95rem;
  &.cl-item--active {
    background-color: lighten($primary, 45%);
    .cl-item__icon {
      g {
        fill: $primary;
      }
    }
    .cl-item__title {
      font-weight: 500;
    }
  }
  &.cl-item--completed {
    background-color:lighten($success, 45%);
    .cl-item__icon {
      g {
        fill: $success;
      }
    }
    .cl-item__title {
      font-weight: 400;
      color: $gray;
      text-decoration: line-through;
    }
  }
  button {
    min-width: 80px;
  }
}

.cl-item__icon {
  cursor: pointer;
}

.cl-item__title {
  cursor: pointer;
  margin-bottom: 0.25rem;
}

.cl-item__detail {
  font-size: 0.9rem;
  font-weight: 300;
  color: $text-muted;
  margin-bottom: 0.25rem;
}

.cl-item__video {
  padding: 0.25rem 0rem;
  margin-bottom: 0.25rem;
  opacity: 0.5;
  &:hover {
    opacity: 0.7;
    cursor: pointer;
  }
  iframe {
    pointer-events: none;
    border-radius: $border-radius;
  }
}

.cl-item__image {
  padding: 0.25rem 0rem;
  margin-bottom: 0.25rem;
  &:hover {
    cursor: pointer;
  }
}

.video-player {
  iframe {
    border-radius: $border-radius;
    max-width: 100%;
  }
}

.video-image {
  width: 300px; 
  height: 160px; 
  background-size: cover;
  background-position: center;
  border-radius: 0.45rem;
  text-align: center;
  padding-top: 50px;
  svg {
    box-shadow: $box-shadow;
    border-radius: 50rem;
  }
}

.loop-video-image {
  width: 300px; 
  height: 160px; 
  position: relative;
  video {
    width: 300px; 
    height: 160px; 
  }
  svg {
    position: absolute;
    box-shadow: $box-shadow;
    border-radius: 50rem;
    left: 120px;
    top: 45px;
  }
}

.cl-container--new-intercom-style {
  border-radius: $cl-border-radius;
  .cl-top {
    border-top-left-radius: $cl-border-radius;
    border-top-right-radius: $cl-border-radius;
  }
  .cl-btm {
    border-bottom-left-radius: $cl-border-radius;
    border-bottom-right-radius: $cl-border-radius;
  }
}

.cl-container--fit-size {
  height: auto;
  .cl-inner {
    height: auto;
  }
  .cl-btm {
    position: inherit;
    bottom: auto;
  }
}
```


# Content Security Policy

**Content Security Policy** ([CSP](https://developer.mozilla.org/en-US/docs/Glossary/CSP)) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting ([XSS](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)) and data injection attacks. (Source: [Mozilla](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP))

If you are using source allowlisting, use the following for Content Security Policy:

```
style-src:
  'unsafe-inline'
  https://fonts.googleapis.com
font-src:
  https://fonts.gstatic.com
connect-src:
  https://checklist.api.getalvis.com
child-src:
  https://onboarding-widget.getalvis.com
script-src:
  https://assets.getalvis.com
```

And, if you need to inject the script separately instead of including it in one of your scripts, you'll need to use `nonce`. (i.e. `script-src 'nonce-rAnd0m'` and `<script nonce="rAnd0m">`...)

If you cannot use the `nonce` method, you can only use the `hash` method.\
\
1. Go to Dashboard, click the top right corner and click Install, then copy the installation script.\
2. Paste into the place where you want to put the script. Then copy exactly what is between `<script>` and `</script>`, and put it into <https://report-uri.com/home/hash> to generate the hash.\
3. Add the generated `hash` to `script-src`.\
\
Also checkout how to [use Intercom with Content Security Policy](https://www.intercom.com/help/en/articles/3894-using-intercom-with-content-security-policy).


# How to set up multiple checklists in sequential order

Sometimes, you'd like to have users learn a set of features before showing them advanced lessons. For example, there are two checklists, say A and B, and your users will only see B if the person completes A first.

To accomplish this, you can set up "Trigger" (which is run on a user after completing a checklist) in Checklist A to tag a user as “checklist-A-completed”.

![Tag a user as “checklist-A-completed”](/files/SOrcdc0BU76AC1h1d9sL)

Then, in Checklist B, set up a filter that includes "User tag equals checklist-A-completed". This way a user will only see Checklist B after the person completes Checklist A.


# What happens when trial ends?

When your trial ends and you have not yet purchased a paid plan, the checklist widget will show a 404 page.&#x20;

![](/files/-Mblcbx14OWkx07Alg6b)


# How to uninstall

To uninstall Checklist by Alvis, go to [our Intercom app page](https://app.intercom.com/a/apps/_/appstore?app_package_code=checklist-by-alvis), and click the **Uninstall** button on the page.

<figure><img src="/files/9IezHGfGCR7X513EFJO4" alt=""><figcaption></figcaption></figure>