Vue-slackhook NPM

Vue-Slackhook

A Vue component to implement a feedback form for users to give feedback on your application, with integration of a Slackwebhook.

About the project

The current version of this project is 0.0.1. 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.

Installation

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

Usage

<script>
import { Feedback } from 'vue-slackhook'
import axios from 'axios'

export default {
    
    ...

    components: {
        Feedback
    }

    ...

};
</script>
<Template>

    <Feedback webhookUrl="WEBHOOK URL HERE" />

</Template>

Options/Props

<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>

Using Laravel

In your app.js

Vue.component('feedback', require('vue-slackhook'));

camelCase vs kebab-case

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!" />

Props for Laravel

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'
        }