Custom Steps

InSkill supports custom steps that allow you to build customizable workflows and behaviors. If a step has script or web tags, the body will have js that can take actions.

Editor Overview

A. Editor Views - Custom steps are edited in the "Advanced" tab and can be previewed using the "Preview" tab
B. Maximize - Maximize/minimize editing window
C. Upload Image - Upload an image and add it to the step body
D. Editors

  • Visual Editor - Edit step body using editor tools (basic formatting, tables, etc.)
  • Text Editor - Edit step body as raw html (add custom styles and scripts)

Styling Custom Steps

Html styling can be applied to individual steps using style tags in the step body or at the account/product level by uploading a css file in the settings page.

Inline Styles

Account Styles

Product Styles


Use script tags to include custom javascript in a step's body

The following Inskill variables/utilities are accessible to scripts defined in the step body via the Inskill namespace.

var Inskill = {
  Session: {
    task: {
    data: ({ key: value }) => { /* update session data */},
    message: ({}) => { /* session commands (e.g. continue, finished, end) */},
  Utils: {
    waitscreen: (start) => {/* start/stop wait screen spinner */ }


// Access data for current session

// Add/update data for current session{ "pressure": 33.8, "pump.voltage": 120 });

// Advance session to the next step (like if the user pressed the continue button)
Inskill.Session.message({ "continue": '' });

// End the session (like if the user pressed the Finished button)
Inskill.Session.message({ "finished": '' });

// Hide default session buttons (such as continue, not solved, or finished buttons)
Inskill.Session.message({ "end": '' });

// Display a waitscreen spinner to the user

// Stop the waitscreen spinner (after 5 seconds)
 setTimeout(() => Inskill.Utils.waitscreen(false), 5000);