Installation

Prerequisites

You need to install Vuetify (opens new window) and Vue-apollo (opens new window) to use theses compoents

npm install vuetify vue-apollo

Then configure vue-apollo to connect your project to Whispr (opens new window)

Vue install

Install the component in your project.

npm install @sanofi-iadc/glisten

import Vue from 'vue';
import { apolloProvider } from '@sanofi-iadc/glisten/graphql/apollo';
import VueApollo from 'vue-apollo';
import Glisten, { GlistenClient, GlistenDashboard } from '@sanofi-iadc/glisten';

Vue.component('GlistenClient', GlistenClient); // this is not mandatory if you need to use only one component
Vue.component('GlistenDashboard', GlistenDashboard);

Vue.use(Glisten);
Vue.use(VueApollo);
Vue.use(Vuetify);

new Vue({
  vuetify,
  apolloProvider: apolloProvider(
    process.env.VUE_APP_WHISPR_API_HTTP_URL,
    process.env.VUE_APP_WHISPR_API_WS_URL,
  ),
  render: (h) => h(App),
}).$mount('#app');

You can then use these components anywhere in your project (See usage below)

Nuxt install

Right now SSR doesn't not work with Glisten !

Add a plugin in plugins/glisten.client.js :

// glisten.client.js
import Vue from 'vue';
import Glisten, { GlistenClient, GlistenDashboard } from '@sanofi-iadc/glisten';

Vue.component('GlistenClient', GlistenClient);
Vue.component('GlistenDashboard', GlistenDashboard);
Vue.use(Glisten);

Then, in nuxt.config.js add :

  ssr: false, // TODO: does not work in SSR yet
  // ...

  buildModules: [
    // ...
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],


  modules: [
    // ...
    '@nuxtjs/apollo',
  ],

  plugins: [{ src: '@/plugins/glisten.client.js', mode: 'client' }],

  apollo: {
    clientConfigs: {
      whispr: {
        httpEndpoint:
          process.env.WHISPR_HTTP_BASE_URL, // e.g http://localhost:3000/graphql
        wsEndpoint:
          process.env.WHISPR_WS_BASE_URL, // e.g ws://localhost:3000/graphql
      },
    },
  },

Usage

Client Component

You can either use the client to add a modal on a page like this

<template>
  <glisten-client
    :sheet="sheet"
    application-id="you-application-Name"
    user-name="your username"
    :custom-tracker="customTracker"
    @close="toggleFeedback"
  />
</template>

Props

• sheet (boolean) : modal is showed whenever true
• application-id (string) : identify the feedback's application
• user-name (string) : default username
• custom-tracker (object) : tracks context of the feedback (like current page URL)

// for instance
{
  "contextPortal": window.location.href,
  "contextPage": ""
}

Events

• close (void) : emitted whenever close button is pressed

Dashboard component

Insert on page the following comonent

<template>
  <glisten-dashboard />
</template>