Demoway SDK

Install

pnpm

pnpm add demoway-sdk

npm

npm install demoway-sdk --save

yarn

yarn add demoway-sdk

Setup

Tailwind user

// tailwind.config.js

module.exports = {
  content: [
    '**/demoway-sdk/dist/**/*.{js,cjs}',
    // ...
  ],
};

Uno CSS user

// uno.config.js

export default defineConfig({
  content: {
    pipeline: {
      include: [
        '**/demoway-sdk/dist/**/*.{js,cjs}',
        // ...
      ],
    },
  },
});

If you are not using tailwind or unocss or something similar

import 'demoway-sdk/style.css';
// or
require('demoway-sdk/style.css');

Initialize DemoWay SDK

Initialize DemoWay SDK before application rendering

Vue Example

import { initialize, IUserInfo } from 'demoway-sdk';
import { createApp } from 'vue';

initialize({
  accessToken: '',
  appId: '',
  userInfo: {
    openId: '',
    userName: '',
    nickName: ''
    xxx: '',
    company: {
      id: ''
      name: ''
    }
  } as IUserInfo, // IUserInfo is TS interface, you can remove it if you are not using TS
})
/**
* render your app
*/
createApp(App).mount();

React Example

import { initialize, IUserInfo } from 'demoway-sdk';
import { createRoot } from 'react-dom/client';

initialize({
  accessToken: '',
  appId: '',
  userInfo: {
    openId: '',
    userName: '',
    nickName: ''
    xxx: '',
    company: {
      id: ''
      name: ''
    }
  } as IUserInfo, // IUserInfo is TS interface, you can remove it if you are not using TS
})

/**
* render your app
*/
const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<App />);

Name	Required	Description
accessToken	required	temporary access token fot test, you can get it from your DemoWay dashboard
appId	required	your DemoWay application id, you can get it from your DemoWay dashboard
userInfo	optional	strongly recommend
userInfo.openId	optional	open user id of the user in your system, you can associate each user with the users in your own system when retrieving user access records through the API. strongly recommend
userInfo.nickName	optional	the nick name of the user in your system
userInfo.xxx	optional	you can add string value with any key name to "userInfo"
userInfo.company	optional	strongly recommend
userInfo.company.id	optional	the company id of the user in your system
userInfo.company.name	required	the company or organization name of the user, required in userInfo.company

When a user accesses the demo, Demoway will create an anonymous user for them. If you provide the "userInfo" field when initializing the SDK, this information will be associated with the anonymous user. In the Demoway dashboard, when viewing the user's access records, you may also see this information. This makes it convenient to identify different users. If the "userInfo" includes the "openId" field, you can associate each user with the users in your own system when retrieving access records through the API.

Usage

Open Demo in Dialog

Open a demo in dialog, which can switch to full screen mode.

import { openDemoDialog } from 'demoway-sdk';

openDemoDialog('demo-id'); // demo-id can be got from DemoWay dashboard

Open CheckList in Dialog

Open a checklist in dialog, which can switch to full screen mode.

import { openDemoDialog } from 'demoway-sdk';

openDemoDialog('demo-id', { checklistId: 'checklist-id' }); // demo-id and checklist-id can be got from DemoWay dashboard

Record a New Demo

Enable recording feature and show recording board by calling enableRecord function.

import { enableRecord } from 'demoway-sdk';

// enable recording feature and show recording board
enableRecord();

Enable recording feature and show recording board by rage click.

import { enableRecord, rageClick } from 'demoway-sdk';

const button = document.querySelector('button');

// rage click button 5 times with 1000ms interval
rageClick(button, 5, 1000).then(() => {
  // enable recording feature and show recording board
  return enableRecord();
});