This package is no longer maintained. Please be careful using this package, it will expose your webhook url to the client so only use it if you are sure your application is not user facing.
A Vue component to implement a feedback form for users to give feedback on your application, with integration of a Slackwebhook.
The current version of this project is 0.0.8. I intend to contribute a lot more to this package with new features and more possibilities. For now I have only tested this as a component within a Vue-loader project and a Laravel Project.
-
Make sure to have a slack workspace available and create a new channel to recieve the feedback data
-
Login to your slack account/workspace and create a new app over here
-
Create a new incoming webhook here and retrieve the webhook URL.
After these steps run the following command
# install dependencies
npm install vue-slackhook axios --save-dev<script>
import { Feedback } from 'vue-slackhook'
import axios from 'axios'
export default {
...
components: {
Feedback
}
...
};
</script>
<Template>
<Feedback webhookUrl="WEBHOOK URL HERE" />
</Template><script>
...
props: {
//Use this prop to integrate your slack channel
webhookUrl: {
type: String,
default: 'No webhook url is applied'
},
//Submit button text
submitButtonText: {
type: String,
default: 'Send'
},
//Trigger button text
buttonText: {
type: String,
default: '?'
},
//Font-awesome icon as button text (make sure to include font awesome)
buttonFa: {
type: Boolean,
default: false
},
//Font awesome icon name (for instance user == fa fa-user)
icon: {
type: String,
default: 'user'
},
//Set this prop to true to activate a pre-defined theme
theme: {
type: Boolean,
default: false
},
//Fill out the application name (Used for slack pre-message)
applicationName: {
type: String,
default: ''
},
//Label for the name field
labelName: {
type: String,
default: 'Name'
},
//Label for the subject field
labelSubject: {
type: String,
default: 'Subject'
},
//Label for the description field
labelDescription: {
type: String,
default: 'Description'
}
}
...
</script>
<template>
//This wil render a trigger button with the 'fa fa-question' icon and a submit button that says 'Send'
<Feedback submitButtonText="Send" buttonText="Feedback here" :buttonFA="true" icon="question" />
</template> In your app.js
Vue.component('feedback', require('vue-slackhook'));It is possible that your props are not working. Instead of writing your props camelCase you must write them kebab-case. You can read more here.
Example: <Feedback button-text="Feedback here" :button-fa=true icon="question" submit-button-text="Post!" />
There are props available specific for the Laravel framework.
//If true props page and user will be included for sending to slack
laravel: {
type: Boolean,
default: false
},
//Use this prop with the currentRouteName() function to send the current route
page: {
type: String,
default: 'No page found'
},
//Use this prop with the Auth::user()->username function to send the logged in user
user: {
type: String,
default: 'No user found'
}Besides the pre-defined theme this component has CSS classes on different elements to style the component. All CSS classes will be available soon.
If you have any questions, please feel free to contact me at twitter or create a new issue. Feel free to use this project yourself.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent