This is the API documentation for the Elevio npm module. 

You can see the code and view the readme here elevio-client.

To view documentation about the React.js integration, see How to Integrate Elevio into React.

Installation

You can install Elevio using npm.

npm i elevio

Usage

Import Elevio directly from 'elevio/lib/client' or via destructuring.

import Elevio from 'elevio/lib/client';
import { client as Elevio } from 'elevio';

Set your accountId to start loading Elevio.

Elevio.load('my-account-id').then(() => {
  console.log('Elevio has loaded, ready to use!')
})

Angular usage

If you are using Angular it is required to use an NgZone so that Elev.io doesn't interfere with Angular's change tracking.

import { Component, NgZone } from '@angular/core';
@Component({
  selector: 'app-elevio',
  templateUrl: './elevio.component.html',
  styleUrls: []
})
export class ElevioAndGridComponent {
  article: number;

  constructor(private _ngZone: NgZone) { }

  onClick() {
    this._ngZone.runOutsideAngular(() => {
      (window as any)._elev.openArticle(this.article);
    });
  }
}

You can read more about using Angular's ngZone feature here.

API

NOTE: WindowElev refers to the object that is set on the window object. This object is documented here: https://api-docs.elevio.help/en/categories/4-javascript-api

load

load(accountId: string) => Promise<WindowElev>

Handle the initial setup of Elevio, set the account id and download the Elevio script.

If autoInitialize is set as true via the setSettings API, then Elevio will initialize. 

disable

disable() => void

Disable Elevio, if it was enabled.

enable

enable() => void

Enable Elevio, if it was disabled.

addModule   

addModule(moduleDetails: ModuleDetails) => void

Add a custom module that can open a webpage in the Assistant, link-out to a website or trigger an event.

Parameters:

  • moduleDetails is an object with details about the module to add.

See addModule for more details.

buttonComponent

buttonComponent(target: Element, options:  ElevioButtonOptions) => ElevioElement

Returns an instance of a button component that can attach itself to a target and trigger an action on click.

Parameters:

  •  target is the DOM node that the button will attach itself to
  •  options are the options to setup the button.

See buttonComponent for more details.

close

close() => void

Close the widget, if open.

closeAllPopups

closeAllPopups() => void

Close any open popup on the page.

closePopup

closePopup(articleId: string) => void

Close the popup for given article ID.

Parameters:

  • articleId is the article ID for the popup that should be closed.

component

component(options: ComponentOptions) => Element

Returns a custom element DOM node for the given type; you can embed this anywhere on your site.

Parameters:

  •  options is an object containing details about the component to create

See component for more details.

disableModules

disableModules(moduleIds: string[]) => void

Disable the given modules so that they cannot be accessed by the user, even if enabled in the dashboard.

Parameters:

  • moduleIds is an array of the module ids to be disabled.

enableModules

enableModules(moduleIds: string)[]) => void

Enables the given modules so that they can be accessed by the user.

N.B.:  This only reverses disableModules. Modules disabled in the dashboard cannot be enabled by this API.

Parameters:

  •  moduleIds is an array of the module ids to be disabled.

hideModules

hideModules(moduleIds: string[]) => void

Hide the given modules so that they cannot be seen in the menu by the user, even if enabled.

Parameters:

  •  moduleIds is an array of the module ids to be disabled.

initialize

initialize() => void

By default, Elevio auto-initializes itself on page load. In rare cases you may want to initialize Elevio yourself.

See initialize for more details.

isSupportedBrowser

isSupportedBrowser() => boolean

Returns whether or not Elevio is supported in this browser. If it is not, Elevio will not load.

logoutUser

logoutUser() => void

Logs out the current user, reversing any calls to setUser().

on

on(elevioEvent: string, cb: Function) => void

Listen to events emitted by Elevio.

N.B. This is the only method that can be called before the load event is emitted.

Parameters:

  • elevioEvent string that matches the name of the event you want to intercept.
  •  cb is a function that will run when the event is fired.

See on for details about all the different events.

open

open() => void

Open the widget to the last page the user was on.

openArticle

openArticle(articleId: string) => void

Open the widget to the article with given ID.

openCategory

openCategory(categoryId: string) => void

Open the widget to the category with given ID.

Parameters:

  •  categoryId The id of the category to open NOTE the ID of the index category is index.

openHome

openHome() => void

Open the widget to the home page.

openModule

openModule(moduleId: string) => void

Open the widget to the module with given ID.

openPopup

openPopup(articleId: string) => void

Open the popup for given article ID.

popupComponent

popupComponent: (target: Element, options: {
    articleId: string
}) => ElevioElement

Returns an instance of a popup component that displays an article next to a target DOM node.

Parameters:

  • target the DOM node that the popup will appear next to.
  • options the ID of the article that should be displayed.

See Popup component for more info.

removeModule

removeModule(uniqueModuleId: string) => void

Remove a custom module.

setKeywords

setKeywords(keywords?: string[] | undefined) => void

Overrides keywords set in the dashboard from page settings.

Can be used to determine which articles are displayed in suggestions.

Parameters:

  •  keywords an array of keyword strings

See setKeywords for more info.

setLanguage

setLanguage(languageCode?: string | undefined) => void

Overrides the language that Elevio uses for localization.

The language must be both supported and enabled in your dashboard.

By default, Elevio uses the user’s system language.

Parameters:

  •  languageCode string to set the language code or undefined to unset.

See setLanguage for a list of language codes. Also see setTranslations.

setPage

setPage(url?: string | undefined) => void

Overrides the page URL, which by default is the browser’s current URL.

The URL is used to determine page settings.

You should only use this in rare cases, since Elevio automatically detects browser URL changes.

setSettings

setSettings(setting: SettingsOptions) => void

Overrides settings from dashboard, and exposes some new settings.

Parameters:

  •  settings see Settings for details about options available.

setTranslations

setTranslations(translations?: Object | undefined) => void

Overrides the translations that Elevio uses for localization.

Also see setLanguage.

See set translations for a description of the objects shape.

setUser

setUser(user: User|undefined) => void

Identify the current user. Read more about why.

Parameters:

  •  user the user object.

See setUser for more details.

showModules

showModules(moduleIds: string[]) => void

Shows the given modules so they can be seen in the menu by the user.

Reverses calls to hideModules.

Parameters:

  • moduleIds array of module ids to show.

togglePopup

togglePopup(aritcleId: string) => void

Toggle the popup for given article ID. Opens the popup if closed, and vice versa.

disableHelpers

disableHelpers(helperIds: number[] | undefined) => void

Disables helpers so they cannot be seen or used by the user.

If helperIds are not provided, all helpers will be disabled.

Parameters:

  • helperIds either an array of helper ids or undefined.

See disableHelpers for more info.

enableHelpers

enableHelpers(helperIds: number[] | undefined) => void

Enables helpers so that they can be seen and used by the user.

If helperIds are not provided, all helpers will be enabled.

Parameters:

  • helperIds array of helper ids or undefined

See enableHelpers for more info.

getUser

getUser() => User

Identify the user that has been set. See Set user

setAccountId

setAccountId(accountId: string) => void

This will re-initialize Elevio with the specified accountId