Studio1.js installation

In order to use Walkthroughs in your web app, you need to install Studio1.js.

Studio1.js is a tiny piece of JavaScript code (10 kB), which is loaded asynchronously in your web app, so it won't affect your page load speed.

It only takes 3 simple steps:

Step 1: Choose installation method

Studio1.js can be installed in one of two ways.

If you use a JavaScript module bundler (such as Webpack or Rollup), go to Step 2A.

Otherwise, go to Step 2B.

Step 2A: Npm installation

We recommend installing Studio1.js using the studio1.js npm package.

First, run this in your Terminal:

npm install studio1.js

Next, you need to run loadStudio1 in your app somewhere after you have access to the user's details (id, name etc.). loadStudio1 returns a promise, which resolves with the studio1 object.

Using CommonJS and Promises:

const {loadStudio1} = require('studio1.js')

loadStudio1().then(studio1 => {
  studio1.init('YOUR_COMPANY_ID')
  studio1.identify('USER_ID', {
    name: 'USER_NAME',
    email: 'USER_EMAIL',
    signedUpAt: 'USER_SIGNED_UP_AT'
  })
})

Using ES6 modules and async/await:

import {loadStudio1} from 'studio1.js'

const studio1 = await loadStudio1()
studio1.init('YOUR_COMPANY_ID')
studio1.identify('USER_ID', {
  name: 'USER_NAME',
  email: 'USER_EMAIL',
  signedUpAt: 'USER_SIGNED_UP_AT'
})

Then to go Step 3.

Step 2B: HTML installation

Only do this if you did not complete Step 2A.

Copy-paste the following snippet into your HTML document before the ending </body> tag:

<script type="text/javascript">
  (function(){var s=document.createElement('script');s.src='https://js.studio1.io/studio1.js';s.async=true;document.head.appendChild(s);s.onload=function(){
  studio1.init('YOUR_COMPANY_ID');
  studio1.identify('USER_ID', {
    name: 'USER_NAME',
    email: 'USER_EMAIL',
    signedUpAt: 'USER_SIGNED_UP_AT'
  });
  }})()
</script>

Step 3: Replace placeholders

In the code you copy-pasted above, replace YOUR_COMPANY_ID with your company's Studio1 ID (which you can find under Settings).

Next, replace USER_ID with the currently signed in user's ID in your database.

The properties in studio1.identify's second argument are all optional. They're useful for looking up users in Studio1 to e.g. see their walkthrough progress, or to use in the walkthrough content or conditions. If you don't want to share this with Studio1, feel free to leave out the argument completely.

That's it! You're ready use Walkthroughs.

Got questions? We're here for you!

The best way to get help is to
We usually reply within 5 minutes
You can also send an email to docs@studio1.io
We usually reply within a few hours