Due to a stupid copyright infringement I had to rename this package.
Note that nothing in the code changed (still same namespace). Only the package name has changed. Namespace might changed later in a major release.
Customizable Feedback Component for Laravel
- Introduction
- Demo
- Installation & Configuration
- Retrieve Feedbacks
- Event, Job, Notification, etc
- License
Introduction
Laravel Feedback Component allows you to easily implement a Customer Feedback component on your website. It is build with VueJS but can be implemented in any kind of Laravel Project. You just need to drop a few lines in your layout.
You probably know a lot of website that use intercom's chatting system, or crisp, chat.io and many more customer chat allowing you to get feedbacks from your website visitors.
Laravel Feedback Component is an open-source and customizable alternative that adopts the same layout. Once installed, you will see the component on your website.
We also have a Nova Tool for it!
Chatting System
I'll work on implementing a chatting system in Laravel Feedback Component, that will probably work with Laravel Nova. This is planned for V2. For now, you can only gather feedbacks from your visitors.
Demo
Installation & Configuration
You may use Composer to Install Laravel Feedback Component:
composer require mydnic/laravel-kustomer
After installing Laravel Feedback Component, publish its assets using the kustomer:publish Artisan command. After installing the package, you should also run the migrate command:
php artisan kustomer:publish
php artisan migrate
This will create a new feedbacks table.
Configuration
You can update the configuration of the component as you wish by editing config/kustomer.php.
I encourrage you to carefully read this config file.
Translations
All the texts that you can see in the components are translatable. After publishing the assets, you will find the texts in resources/lang/vendor/en/kustomer.php
The feedbacks labels are stored in this file as well, and the feedbacks array must match the one from you config file.
Display the component
In your public/ directory you'll find compiled css and js files that needs to be included into your html layout.
Include these on the pages you want the components to appear :
<head>
<script src="{{ asset('vendor/kustomer/js/kustomer.js') }}" defer>script>
head>
<body>
@include('kustomer::kustomer')
body>
Attention If you run a VueJS application, you must add the
#kustomercontainer outside your#appcontainer. This is because kustomer runs on its own vue instance by default. If you want to change that, see Include assets with your own assets
Updating
When updating this package, you should re-publish the assets:
php artisan vendor:publish --tag=kustomer-assets --force
This will re-publish the compiled JS and CSS files, but also the svg files located in public/vendor/kustomer/assets. If you want to use your own images, please update the configuration file.
Include assets with your own assets
Optionnally, you can import the .vue and .sass files into your own resources/js and resources/sass folders, allowing you to heavily customize the Feedback Component components and layout.
This will also allow you to end up with only one compiled .js and .css in your app.
However, you should be carefull if you're trying to update the a latest version, because your changes might be lost.
Pre requisite
Two npm packages are required:
- axios
- html2canvas
You can add them via npm or yarn.
We are using axios to make the HTTP request to send the feedback, so make sure axios is installed an configured in your vue app.
As in the Laravel scaffolding javascript, axios should be configured like so:
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
Install
Publish the VueJS component:
php artisan vendor:publish --tag=kustomer-vue-component
Publish the SASS style file:
php artisan vendor:publish --tag=kustomer-sass-component
Then in your vue app:
// app.js
Vue.component('kustomer', require('./components/Kustomer/Kustomer.vue'));
// app.scss
@import 'kustomer';
Retrieve Feedbacks
A Feedback essentially has 4 attributes:
- Type : Represents the "category" of the feedback (bug, like, suggestion, etc)
- Message : the typed message from your visitors
- User Infos : a JSON column containing all sorts of informations about the user's request
- Reviewed : a boolean column allowing to mark a feedback as "reviewed"
Once a Feedback is stored in your database, you can use your own backoffice to display and manipulate the datas.
The Feedback model works like any other Eloquent model so it's very easy to use in your Laravel Application.
Using Laravel Nova ? No problem !
Use With Laravel Nova
If you're using Laravel Nova you will certainly want a tool to visualize all feedbacks that you have received.
You can install the official Laravel Nova Tool here.
Event, Job, Notification, etc
When a new feedback is correctly stored, we will dispatch a Laravel Event.
You can listen to this event and trigger any kind of listeners. It's up to you to decide what happens next! You can send an email to the administrator, log some data, or whatever you can think about.
In your EventServiceProvider you can update the $listen property to add the Event.
protected $listen = [
'Mydnic\Kustomer\Events\NewFeedback' => [
'App\Listeners\YourOwnListener', // change this
],
// ...
];
License
Laravel Kustomer is an open-sourced software licensed under the MIT license.
In this project you will find some svg icons that come from FlatIcon. You're free to change them in your own project.
996 Dec 28, 2022
225 Sep 16, 2022
12 Nov 1, 2022
939 Jan 8, 2023
3 Feb 15, 2022
22 Oct 6, 2022
105 Sep 26, 2022
792 Jan 3, 2023
54 Mar 31, 2022
19 Dec 14, 2022
68 Dec 29, 2021
680 Jan 4, 2023
1.3k Jan 1, 2023
233 Jan 4, 2023
32 Sep 6, 2022
87 Oct 13, 2022