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.
- Introduction
- Demo
- Installation & Configuration
- Retrieve Feedbacks
- Event, Job, Notification, etc
- License
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!
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.
You may use Composer to Install Laravel Feedback Component:
composer require mydnic/laravel-kustomerAfter 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 migrateThis will create a new feedbacks table.
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.
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.
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
When updating this package, you should re-publish the assets:
php artisan vendor:publish --tag=kustomer-assets --forceThis 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.
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.
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');
}Publish the VueJS component:
php artisan vendor:publish --tag=kustomer-vue-componentPublish the SASS style file:
php artisan vendor:publish --tag=kustomer-sass-componentThen in your vue app:
// app.js
Vue.component('kustomer', require('./components/Kustomer/Kustomer.vue'));// app.scss
@import 'kustomer';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 !
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.
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
],
// ...
];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.