Integrate Feedback Widget Using 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.

Project Setup

npm install @olvyhq/widget-react

Getting Started

On Main file

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

How to use

 <OlvyWidget
      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

Example:

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

Customize configuration

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)

Demo

Here's a link to the codesandbox demo so you can see a quick implementation.

That's it. That's how you can integrate Olvy in your React app. If you face any issues while integrating feel free to reach out to us on [email protected] and we will help you integrate Olvy into your application.