@olvyhq/widget-react

This react component allows you to easily include Olvy widgets in your React applications. The component takes care of all the necessary set up and configuration, allowing you to simply specify which Olvy widget you want to use and any relevant options.

Demo

https://codesandbox.io/s/olvy-widget-react-icif8y
Updated (v0.1.9) https://stackblitz-starters-cbnfty.stackblitz.io

Installation

Install @olvyhq/widget-react with npm

  npm install @olvyhq/widget-react

Usage/Examples

In main.js

import {OlvyWidget} from  "@olvyhq/widget-react"

How to use

 <OlvyWidget
      onReady={onOlvyReady}
      config={<Configuration> }
      targetElement={<div>
      <div id="<Target-Element-Id>"></div>
      </div>  
    }
    ></OlvyWidget>

//Replace <Target-Element-Id> with your target element id and <Configuration> with your configuration

// You can use onReady prop to provide a callback function to perform some actions when the widget is ready

Example

 <OlvyWidget
      onReady={onOlvyReady}
      config={{workspaceAlias: "olvysdktest"}}
      targetElement={<div>
      <div id="olvy-whats-new">Announcement Widget</div>
      </div>  
    }>
    </OlvyWidget>

  // Callback function to use OlvyUtils when it's loaded
  const onOlvyReady = (olvyUtils) => {
    // use the olvyUtils functions here
    setTimeout(() => {
      olvyUtils.showWidget(workspaceAlias,widgetAliasOrID);
    }, 1000);
  };

Configuration

{
    widgetId:"",   // (optional)
    workspaceAlias:""  //(required)
}

Methods

To show widget

OlvyUtils.showWidget(workspaceAlias,widgetAliasOrID)

To hide widget

OlvyUtils.hideWidget(workspaceAlias,widgetAliasOrID)

To set user

OlvyUtils.setUser(workspaceAlias, userObject) 

To set feedback meta info

OlvyUtils.setFeedbackMetaInfo (workspaceAlias, metaInfo)

To refresh unread count

OlvyUtils.refreshUnreadCount(workspaceAlias,widgetAliasOrID) 

To show unread releases count

OlvyUtils.getUnreadReleasesCount(workspaceAlias,widgetAliasOrID)

To remove unread indicator element

OlvyUtils.removeUnreadIndicatorElement(workspaceAlias,widgetAliasOrID)

To add unread indicator element

OlvyUtils.addUnreadIndicatorElement(workspaceAlias,widgetAliasOrID, count) 

To get last opened timestamp

OlvyUtils.getLastOpenedTimestamp(workspaceAlias,widgetAliasOrID)

To refresh the widget

OlvyUtils.refresh(workspaceAlias,widgetAliasOrID)

To teardown the widget

OlvyUtils.teardown(workspaceAlias,widgetAliasOrID)

To create feedback

OlvyUtils.createFeedback(workspaceAlias,params)

Tests

  npm run test:unit