You can install Elevio using a React component.

See https://github.com/elevio/client-packages for the npm package and npm package for details about how to use the Javascript package without React. 

To view documentation about the importing Elevio via npm, see How to Install Elevio via npm

Installation

import Elevio from 'elevio/lib/react'

Import the Elevio component and add it into your component hierarchy, making sure you pass the required accountId.

<div>
  <Elevio accountId="MY_ACCOUNT_ID" />
</div>

Component Props

accountId: string

Your account id. To access your account Id, refer to the  Installation page

keywords?: Array<string>

Overrides keywords set in the dashboard from page settings.

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

language?: string

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.

Also see setTranslations.

See setLanguage for a list of language codes.

user?: Partial<Nullable<User>>

Identify the current user. Read more about why.

settings?: Partial<Nullable<SettingsOptions>>

Overrides settings from dashboard, and exposes some new settings.

For more info see Settings.

pageUrl?: string

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.

translations?: Object

Overrides the translations that Elevio uses for localization.

Also see the language prop.

See set translations for a description of the objects shape.

onLoad?: (apiInstance: WindowElev) => void

Called after the Elevio script has loaded, but before the Elevio app has been initialised.

You should modify initial settings here. For convenience, the callback has window._elev as i’s first argument.

onReady?: () => void

Called after the Elevio app has been initialised.

onWidgetOpened?: () => void

Called after the widget is opened.

onWidgetClosed?: () => void

Called after the widget is closed.

onModuleOpened?: (moduleId: string) => void

Called after a module is opened. The callback has the module ID as its first argument.

onPopupOpened?: (articleId: string) => void

Called after a popup is opened. The callback has the article ID as its first argument.

onPopupClosed?: (articleId: string) => void

Called after a popup is closed. The callback has the article ID as its first argument.

onSearchQuery?: (results: {
  query: string;
  results: Array<{ category_id: string; id: string; title: string }>;
}) => void

Called when results for a search query are shown to user.

The callback has an object as its first argument, with query and results properties.

onSearchArticleClicked?: (result: {
  articleId: string;
  categoryId: string;
  source: string;
}) => void

Called when results for a search query is clicked by a user.

The callback returns an object with the article id, category id and the source.

The source is what is defined in the Elevio search element or defaults to custom-element if not defined.

If the link is clicked inside the assistant then the source is 'assistant'.

onCategoryArticleClicked?: (result: {
  articleId: string;
  categoryId: string;
  source: string;
}) => void

Called when an article is clicked in the category display.

The callback returns an object with the article id, category id and the source.

The source is what is defined in the Elevio category custom element or defaults to custom-element if not defined.

If the link is clicked inside the assistant then the source is 'assistant'.

onWidgetArticleView?: (articleId: string) => void

Called after an article is viewed in the widget.

The callback has the article ID as its first argument.

Notes

You can also use the javascript package to get access to any imperative methods you would like to call. So you can do things like this:

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

function App() {
  return (
    <div><Elevio accountId="my-account-id" /></div>
  );
}

function getUser() {
   return elevioClient.getUser();
}

Typescript support

Typescript types are bundled with the package.