Vue 3 feedback widget - Powered by Happy React

Happy React is a feedback widget for your documentation sites. Work with all documentation generators and frameworks!

This package is one of Happy React integrations. If you want to know more please visit our documentation page.

Features

• Headless styling (with or without basic constraints)
• Easy integration with many frameworks
• Dashboard with statistics and extensive settings

Installation

Using npm

npm install @happyreact/vue

Using yarn

yarn add @happyreact/vue

Using pnpm

pnpm add @happyreact/vue

Usage

First, you need to create a Happy React project. You will get a token to connect the widget with Happy React. There you can change project settings, add domains to the whitelist, or see statistics.

Displaying widget with basic styling

This code lets you add the widget to your website with the basic styling that comes with the package.

<script setup>
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";
</script>

<template>
  <Widget token="[token]" resource="users-happiness" />
</template>

• [token] - project token, find it in dashboard project settings
• users-happiness - unique identifier of resource

Custom styles using Global CSS

Use this if your application allows importing global styles. You can use default classes to style widget elements.

<script setup>
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";
</script>

<template>
  <Widget token="[token]" resource="users-happiness" />
</template>

<style>
.hr-container {
}

.hr-reaction {
}
</style>

If you want to know more about styling you can find it in Happy React styling guide.

💡 Remember to replace token and resource with your project's token and proper resource

Custom styles using classes

Use this with Module CSS. Import styles as a variable and assign them using classes property. This can let you add class to different elements of the widget.

<script setup>
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";
</script>

<template>
  <Widget
    token="[token]"
    resource="users-happiness"
    :classes="{
      container: $style.container,
      reaction: $style.reaction,
    }"
  />
</template>

<style module>
.container {
}

.reaction {
}
</style>

If you want to know more about styling you can find it in Happy React styling guide.

💡 Remember to replace token and resource with your project's token and proper resource

Reacting to user events (pun intended)

Right now you can use two events:

• onReaction - fire after user reaction
• onReactionsLimitReached - fire after user reach limit of reactions

<script setup>
// FeedbackWidget.vue
import { Widget } from "@happyreact/vue";
import "@happyreact/vue/theme.css";

export default {
  methods: {
    handleReaction(data) {
      console.log("Reaction clicked with data", data);
    },
    handleReactionsLimitReached(data) {
      console.log("Reactions limit reached");
    },
  },
};
</script>

<template>
  <Widget
    token="[token]"
    resource="users-happiness"
    :onReaction="handleReaction"
    :onReactionsLimitReached="handleReactionsLimitReached"
  />
</template>

Widget Component

The Widget component lets you display a feedback widget with reactions and settings. Control these settings on Happy React dashboard.

Required props

| Prop | Type | Description | | :--------- | :------- | :----------------------------------- | | token | string | Token of your project | | resource | string | Unique identifier of resource |

Optional props

| Prop | Default | Type | Description | | :------------------------ | :--------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | | classes | | string \| { root?: string; container?: string; grid?: string; cell?: string; reaction?: string; reactionActive?: string; reactionIcon?: string; reactionText?: string; } | Classes applied to widget elements. You can find them on Happy React styling guide | | url | https://app.happyreact.com | string | Url where should widget get data. Used when you have own Happy React instance | | onReaction | | (data: { id: string; icon: string; }) => void | Event fired when user click reaction | | onReactionsLimitReached | | () => void | Event fired when user reach reactions limit |

Learn more

You can find more integrations on Happy React documentation.

License

This package is licensed under MIT License