Feedback widget for pixelpixel api
npm install pp-feedback-widget[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Install the module to your Nuxt application with one command:
``bash`
npx nuxi module add pp-feedback-widget
Then, configure it in your nuxt.config.ts:
`typescriptapp.config.ts
export default defineNuxtConfig({
feedbackWidget: {
apiUrl: process.env.MIDDLEWARE_URL,
apiPassword: process.env.MIDDLEWARE_PASSWORD,
apiUser: process.env.MIDDLEWARE_USER,
feedbackKey: "horizon_festival", // or, define in with siteConfig.feedbackKey or siteConfig.collection`
},
version: "0.0.0", // TODO: Import version
});
Add the following to your .env file:
`bash`
MIDDLEWARE_URL="https://example.com"
MIDDLEWARE_USER="*"
MIDDLEWARE_PASSWORD="**"
That's it! You can now use feedback widget in your Nuxt app ✨
To integrate ClickUp, ask the person managing the middleware to add the value of the feedbackKey to the ClickUp Handler. Following the example above, the feedbackKey value would be "horizon_festival.
`vue`
#app
FeedbackWidget
//- other components
To overwrite the primary theme colour:
`css`
.is-feedback-widget {
--pp-fw-primary: #346A35;
}
To change the positioning of the tag:
`vue
.is-feedback-widget-wrapper
FeedbackWidget
`
Local development
`bash``
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
[npm-version-src]: https://img.shields.io/npm/v/pp-feedback-widget/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/pp-feedback-widget
[npm-downloads-src]: https://img.shields.io/npm/dm/pp-feedback-widget.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npmjs.com/package/pp-feedback-widget
[license-src]: https://img.shields.io/npm/l/pp-feedback-widget.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/pp-feedback-widget
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com