Integrate Feedback Widget Using Vue

To integrate an Olvy widget in your application you will need to do the following:

Project setup

Install @olvyhq/widget-vue

npm install @olvyhq/widget-vue

Getting Started

On main.js

import { createApp } from 'vue'
import App from './App.vue'
import olvyWidget from '@olvyhq/widget-vue'
const app =createApp(App)
app.use(olvyWidget)
app.mount('#app')

How to use

<olvy-widget :config="<Configuration>" >
    <div id="Target-Element-Id"> </div>
</olvy-widget>

Replace Target-Element-Id with your target element id and with your configuration.

Example:

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

Customize Configuration

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

Configuration

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

Integrate with Nuxt 3

If you're looking to integrate the widget with Nuxt 3, we have a codesandbox demo that you can check out.

As the widget is for vue, you can refer the vue-plugin section of the docs for more information.

Methods

To show widget

showWidget(workspaceAlias,widgetAliasOrID)

To hide widget

hideWidget(workspaceAlias,widgetAliasOrID)

To set user

setUser(workspaceAlias, userObject)

To set feedback meta info

setFeedbackMetaInfo (workspaceAlias, metaInfo)

To refresh unread count

refreshUnreadCount(workspaceAlias,widgetAliasOrID)

To show unread releases count

getUnreadReleasesCount(workspaceAlias,widgetAliasOrID)

To remove unread indicator element

removeUnreadIndicatorElement(workspaceAlias,widgetAliasOrID)

To add unread indicator element

addUnreadIndicatorElement(workspaceAlias,widgetAliasOrID, count)

To get last opened timestamp

getLastOpenedTimestamp(workspaceAlias,widgetAliasOrID)

To refresh the widget

refresh(workspaceAlias,widgetAliasOrID)

To teardown the widget

teardown(workspaceAlias,widgetAliasOrID)

To create feedback

createFeedback(workspaceAlias,params)

Note: In case you have to unmount & mount the widget component for some reason, you will have to call the refresh method of the widget to re-initialize it.

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 Vue 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.