https://github.com/mydnic/volet
Extensible customer feedback widget for Laravel
https://github.com/mydnic/volet
chat customer feedback laravel laravel-kustomer volet vuejs
Last synced: 5 months ago
JSON representation
Extensible customer feedback widget for Laravel
- Host: GitHub
- URL: https://github.com/mydnic/volet
- Owner: mydnic
- License: mit
- Created: 2018-11-07T14:26:03.000Z (over 7 years ago)
- Default Branch: 2.x
- Last Pushed: 2026-01-12T00:34:45.000Z (5 months ago)
- Last Synced: 2026-01-12T04:45:01.635Z (5 months ago)
- Topics: chat, customer, feedback, laravel, laravel-kustomer, volet, vuejs
- Language: PHP
- Homepage:
- Size: 4.03 MB
- Stars: 407
- Watchers: 5
- Forks: 36
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# An extensible customer feedback widget for Laravel
[](https://packagist.org/packages/mydnic/volet)
[](https://github.com/mydnic/volet/actions?query=workflow%3Arun-tests+branch%3A2.x)
[](https://github.com/mydnic/volet/actions?query=workflow%3A"Fix+PHP+code+style+issues"+branch%3A2.x)
[](https://packagist.org/packages/mydnic/volet)
Volet is a highly customizable customer interaction widget for Laravel applications that provides a flexible feature system. It comes with one built-in feature: feedback messages collection. But it allows you to create your own custom features.
- 🎨 Fully customizable theme using CSS variables (or by using your own css)
- 🧩 Extensible feature system
- 📝 Built-in feedback message collection
- 🎯 Simple integration with Laravel
- 🛠️ Built with VueJS
- 🔧 Easy to create custom features, or install community made features
Table of contents
=================
* [Introduction](#introduction)
* [Installation](#installation)
* [Quickstart](#quickstart)
* [Style customization](#style-customization)
* [Creating Custom Features](#creating-custom-features)
* [Features](#features)
## Introduction
Volet is an open-source widget-like component that you drop on your website to interact with your website's visitors. It's like Crisp, Zendesk, Intercom, Tawkto, etc.
First this package was named Laravel Kustomer. But due to a stupid copyright infringement, I had to rename this package to 'laravel-feedback-component'.
After several years I finally decided to take the time to rebuild it from scratch. It's now called Volet, which means "a panel that can be opened or closed" in French.
At it's core, it's simply a panel that opens up when you click the floating button. Inside that panel, you will decide what options you want to give your users. It can be a simple form, or a chatbot, or anything you want.
By default, Volet comes with one built-in feature: feedback messages collection, which is a simple way for your users to send you a single message.
What's great about Volet is that it's **extensible**. You can create custom features, or install community made features. If you want to make your own chatbot, you can integrate it to Volet! Or if someone else made one, you can install it and use it.
Volet is built using VueJS, but is meant to render any **Web Component**. So you can build your own Web Component (super easy with vuejs, btw), and implement them in Volet. [Examples below](#creating-custom-features).
This package does not come with any chat out of the box (yet ?).
## Demo
## Installation
You can install the package via composer:
```bash
composer require mydnic/volet
```
Publish the assets with:
```bash
php artisan vendor:publish --tag="volet-assets" --force
```
You can publish and run the migrations with:
```bash
php artisan vendor:publish --tag="volet-migrations"
php artisan migrate
```
You can publish the config file with:
```bash
php artisan vendor:publish --tag="volet-config"
```
Have a quick look at `config/volet.php` and update anything you want.
### Upgrade
If you're upgrading from an older version, you should run:
```bash
php artisan vendor:publish --tag="volet-config" --force
php artisan vendor:publish --tag="volet-assets" --force
```
Optionally, you can add this to your `composer.json` to automatically update the assets when you update the package:
```json
{
"scripts": {
"post-package-update": [
"@php artisan vendor:publish --tag=volet-assets --force"
]
}
}
```
## Quickstart
First, create a service provider to configure your Volet features. You can publish our pre-configured provider:
```bash
php artisan vendor:publish --tag="volet-provider"
```
This will create `app/Providers/VoletServiceProvider.php` with some example features already configured.
Register your new service provider in `bootstrap/providers.php` (if you're using Laravel 12 or above):
```php
return [
// ...
App\Providers\VoletServiceProvider::class,
];
```
In your `VoletServiceProvider`, register and configure your features:
```php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Mydnic\Volet\Features\FeedbackMessages;
use Mydnic\Volet\Features\FeatureManager;
class VoletServiceProvider extends ServiceProvider
{
public function boot(FeatureManager $volet): void
{
// Register and configure the Feedback Messages feature
$this->registerFeedbackMessagesFeature($volet);
// Example of registering a custom feature
// $volet->register(new YourCustomFeature());
}
private function registerFeedbackMessagesFeature(FeatureManager $volet): void
{
$volet->register(
(new FeedbackMessages)
// Configure feature display
->setLabel('Send us feedback')
->setIcon('https://api.iconify.design/lucide:message-square.svg?color=%23888888')
// Add feedback categories
->addCategory(
slug: 'general',
name: 'General Feedback',
icon: 'https://api.iconify.design/lucide:smile.svg?color=%23888888'
)
->addCategory(
slug: 'improvement',
name: 'Improvement',
icon: 'https://api.iconify.design/lucide:lightbulb.svg?color=%23888888'
)
->addCategory(
slug: 'bug',
name: 'Bug Report',
icon: 'https://api.iconify.design/lucide:bug.svg?color=%23888888'
)
);
}
}
```
What's great with this configuration approach is that you can easily add or remove features, based on your needs, for example enable or disable a feature for a specific type of users.
Then add the Volet component to your blade view:
In the `` section:
```blade
@voletStyles
```
Right before the closing body tag:
```blade
@volet