Using the feedback button

This module also contains styling to show a Codey styled feedback button in the application.

Configuration when using Vue

The feedback button can be imported from the same package:

import { XerHcFeedbackButton } from "@xerius/codey-hello-customer";

When imported, the component can be used. It is recommended to do this on the root page (ex. App.vue):

<XerHcFeedbackButton />

Add content

By default the feedback button will display Geef je mening. Due the use of a slot it can be overwritten with any other text or i18n function.

For example:

<XerHcFeedbackButton>
  {{ $t('hc.feedback' }}
</XerHcFeedbackButton>

Configuration when using no framework

Add following code to the body element of your application:

<button class="hello-customer-feedback-button">
  <img
    class="hello-customer-feedback-button__icon"
    src="https://cdn.xerius.be/style/x.x.x/assets/images/icons/thumbs-up-down-color.svg"
    alt="thumbs-up-down"
  />
  <a class="hello-customer-feedback-button__text"> Geef je mening | Donnez votre avis </a>
</button>

The next step would be to add a click event listener to the button and invoke the showSurveyModal function.