{"id":28792984,"url":"https://github.com/mydnic/volet","last_synced_at":"2026-01-21T14:03:28.366Z","repository":{"id":43103345,"uuid":"156558366","full_name":"mydnic/volet","owner":"mydnic","description":"Extensible customer feedback widget for Laravel","archived":false,"fork":false,"pushed_at":"2026-01-12T00:34:45.000Z","size":4227,"stargazers_count":407,"open_issues_count":0,"forks_count":36,"subscribers_count":5,"default_branch":"2.x","last_synced_at":"2026-01-12T04:45:01.635Z","etag":null,"topics":["chat","customer","feedback","laravel","laravel-kustomer","volet","vuejs"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mydnic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"Mydnic"}},"created_at":"2018-11-07T14:26:03.000Z","updated_at":"2026-01-12T00:34:41.000Z","dependencies_parsed_at":"2024-01-18T03:46:40.057Z","dependency_job_id":"ff801652-165c-4ddd-87db-360731885cf8","html_url":"https://github.com/mydnic/volet","commit_stats":{"total_commits":174,"total_committers":7,"mean_commits":"24.857142857142858","dds":"0.44252873563218387","last_synced_commit":"9455fb6a2ef73fa3a208d9e15bd65314a6f5da00"},"previous_names":["mydnic/volet","mydnic/laravel-feedback-component"],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/mydnic/volet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mydnic%2Fvolet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mydnic%2Fvolet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mydnic%2Fvolet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mydnic%2Fvolet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mydnic","download_url":"https://codeload.github.com/mydnic/volet/tar.gz/refs/heads/2.x","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mydnic%2Fvolet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28634786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-21T04:47:28.174Z","status":"ssl_error","status_checked_at":"2026-01-21T04:47:22.943Z","response_time":86,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","customer","feedback","laravel","laravel-kustomer","volet","vuejs"],"created_at":"2025-06-18T01:03:10.314Z","updated_at":"2026-01-21T14:03:28.361Z","avatar_url":"https://github.com/mydnic.png","language":"PHP","funding_links":["https://github.com/sponsors/Mydnic"],"categories":["PHP"],"sub_categories":[],"readme":"# An extensible customer feedback widget for Laravel\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/mydnic/volet.svg?style=flat-square)](https://packagist.org/packages/mydnic/volet)\n[![GitHub Tests Action Status](https://img.shields.io/github/actions/workflow/status/mydnic/volet/run-tests.yml?branch=2.x\u0026label=tests\u0026style=flat-square)](https://github.com/mydnic/volet/actions?query=workflow%3Arun-tests+branch%3A2.x)\n[![GitHub Code Style Action Status](https://img.shields.io/github/actions/workflow/status/mydnic/volet/php-cs-fixer.yml?branch=2.x\u0026label=code%20style\u0026style=flat-square)](https://github.com/mydnic/volet/actions?query=workflow%3A\"Fix+PHP+code+style+issues\"+branch%3A2.x)\n[![Total Downloads](https://img.shields.io/packagist/dt/mydnic/volet.svg?style=flat-square)](https://packagist.org/packages/mydnic/volet)\n\nVolet 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.\n\n- 🎨 Fully customizable theme using CSS variables (or by using your own css)\n- 🧩 Extensible feature system\n- 📝 Built-in feedback message collection\n- 🎯 Simple integration with Laravel\n- 🛠️ Built with VueJS\n- 🔧 Easy to create custom features, or install community made features\n\nTable of contents\n=================\n\n\u003c!--ts--\u003e\n* [Introduction](#introduction)\n* [Installation](#installation)\n* [Quickstart](#quickstart)\n    * [Style customization](#style-customization)\n* [Creating Custom Features](#creating-custom-features)\n* [Features](#features)\n\u003c!--te--\u003e\n\n## Introduction\n\nVolet 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.\n\nFirst this package was named Laravel Kustomer. But due to a stupid copyright infringement, I had to rename this package to 'laravel-feedback-component'.\n\nAfter 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.\n\nAt 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.\n\nBy 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.\n\nWhat'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.\n\nVolet 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).\n\nThis package does not come with any chat out of the box (yet ?).\n\n## Demo\n\n![Demo of Volet Panel](demo.gif)\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require mydnic/volet\n```\n\nPublish the assets with:\n\n```bash\nphp artisan vendor:publish --tag=\"volet-assets\" --force\n```\n\nYou can publish and run the migrations with:\n\n```bash\nphp artisan vendor:publish --tag=\"volet-migrations\"\nphp artisan migrate\n```\n\nYou can publish the config file with:\n\n```bash\nphp artisan vendor:publish --tag=\"volet-config\"\n```\n\nHave a quick look at `config/volet.php` and update anything you want.\n\n### Upgrade\n\nIf you're upgrading from an older version, you should run:\n\n```bash\nphp artisan vendor:publish --tag=\"volet-config\" --force\nphp artisan vendor:publish --tag=\"volet-assets\" --force\n```\n\nOptionally, you can add this to your `composer.json` to automatically update the assets when you update the package:\n\n```json\n{\n    \"scripts\": {\n        \"post-package-update\": [\n            \"@php artisan vendor:publish --tag=volet-assets --force\"\n        ]\n    }\n}\n```\n\n## Quickstart\n\nFirst, create a service provider to configure your Volet features. You can publish our pre-configured provider:\n\n```bash\nphp artisan vendor:publish --tag=\"volet-provider\"\n```\n\nThis will create `app/Providers/VoletServiceProvider.php` with some example features already configured.\n\nRegister your new service provider in `bootstrap/providers.php` (if you're using Laravel 12 or above):\n\n```php\nreturn [\n    // ...\n    App\\Providers\\VoletServiceProvider::class,\n];\n```\n\nIn your `VoletServiceProvider`, register and configure your features:\n\n```php\nnamespace App\\Providers;\n\nuse Illuminate\\Support\\ServiceProvider;\nuse Mydnic\\Volet\\Features\\FeedbackMessages;\nuse Mydnic\\Volet\\Features\\FeatureManager;\n\nclass VoletServiceProvider extends ServiceProvider\n{\n    public function boot(FeatureManager $volet): void\n    {\n        // Register and configure the Feedback Messages feature\n        $this-\u003eregisterFeedbackMessagesFeature($volet);\n\n        // Example of registering a custom feature\n        // $volet-\u003eregister(new YourCustomFeature());\n    }\n\n    private function registerFeedbackMessagesFeature(FeatureManager $volet): void\n    {\n        $volet-\u003eregister(\n            (new FeedbackMessages)\n                // Configure feature display\n                -\u003esetLabel('Send us feedback')\n                -\u003esetIcon('https://api.iconify.design/lucide:message-square.svg?color=%23888888')\n\n                // Add feedback categories\n                -\u003eaddCategory(\n                    slug: 'general',\n                    name: 'General Feedback',\n                    icon: 'https://api.iconify.design/lucide:smile.svg?color=%23888888'\n                )\n                -\u003eaddCategory(\n                    slug: 'improvement',\n                    name: 'Improvement',\n                    icon: 'https://api.iconify.design/lucide:lightbulb.svg?color=%23888888'\n                )\n                -\u003eaddCategory(\n                    slug: 'bug',\n                    name: 'Bug Report',\n                    icon: 'https://api.iconify.design/lucide:bug.svg?color=%23888888'\n                )\n        );\n    }\n}\n```\n\nWhat'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.\n\nThen add the Volet component to your blade view:\n\nIn the `\u003chead\u003e` section:\n```blade\n    @voletStyles \u003c!-- skip this if you are using your own CSS theme --\u003e\n\u003c/head\u003e\n```\n\nRight before the closing body tag:\n```blade\n    @volet\n\u003c/body\u003e\n```\n\nIf you are planning to use your own CSS theme, you can skip adding the `@voletStyles` directive and add your own CSS file to your `\u003chead\u003e` section.\n\n### Style customization\n\nVolet's default style uses CSS variables for styling. So you can already set your own variables to customize the look and feel of your Volet app.\n\nAdd this **after** the `@voletStyles` directive:\n\n```blade\n    @voletStyles\n    \u003cstyle\u003e\n        :root {\n            --volet-background: #FF2D20;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n```\n\nAll variables are listed here : https://github.com/mydnic/volet/blob/2.x/resources/css/volet.css#L4\n\n## Creating Custom Features\n\nYou can create your own features by extending the `BaseFeature` class:\n\n```php\nnamespace App\\Volet\\Features;\n\nuse Mydnic\\Volet\\Features\\BaseFeature;\n\nclass CustomFeature extends BaseFeature\n{\n    public function getId(): string\n    {\n        return 'custom-chatbot';\n    }\n    \n    public function getLabel(): string\n    {\n        return 'Talk with our chatbot';\n    }\n    \n    public function getIcon(): string\n    {\n        return 'https://api.iconify.design/lucide:star.svg?color=%23888888';\n    }\n    \n    public function getComponentName(): ?string\n    {\n        return 'custom-feature'; // Name of your Web Component\n    }\n    \n    public function getScripts(): ?string\n    {\n        $scriptUrl = asset('volet-custom-feature.js');\n        return \"\u003cscript src=\\\"{$scriptUrl}\\\"\u003e\u003c/script\u003e\";\n    }\n    \n    public function getConfig(): array\n    {\n        return [\n            'routes' =\u003e [\n                'store' =\u003e route('custom-feature.store'),\n            ],\n            'labels' =\u003e [\n                'placeholder' =\u003e 'Enter your message...',\n                'button' =\u003e 'Submit',\n                'success' =\u003e 'Thank you!',\n            ],\n            // Add any other configuration your component needs\n        ];\n    }\n}\n```\n\nCreate a Web Component for your feature's UI, then compile it to a ready to use JS file.\n\nHere's a simple example made with VueJS:\n```html\n\u003c!-- resources/js/components/CustomFeatureComponent.ce.vue --\u003e\n\u003ctemplate\u003e\n    \u003cdiv class=\"volet-custom-feature\"\u003e\n        \u003cbutton class=\"volet-custom-button\"\u003e\n            Click me\n        \u003c/button\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\ndefineProps({\n    config: {\n        type: Object,\n        required: true,\n    },\n})\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/**\n * Add your custom CSS here\n */\n\u003c/style\u003e\n```\n\n```js\n// resources/js/volet-custom-feature.js\nimport { defineCustomElement } from 'vue'\nimport CustomFeatureComponent from './components/CustomFeatureComponent.ce.vue'\n\nconst Element = defineCustomElement(CustomFeatureComponent)\n\ncustomElements.define('custom-feature', Element)\n```\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport { resolve } from 'path';\n\nexport default defineConfig({\n    plugins: [\n        vue({\n            template: {\n                compilerOptions: {\n                    isCustomElement: (tag) =\u003e tag.includes('custom-feature'),\n                }\n            }\n        })\n    ],\n    define: {\n        'process.env.NODE_ENV': JSON.stringify('production'),\n    },\n    build: {\n        lib: {\n            entry: resolve(__dirname, 'resources/js/volet-custom-feature.js'),\n            name: 'CustomFeature',\n            fileName: () =\u003e `volet-custom-feature.js`,\n            formats: ['iife'],\n        },\n        outDir: 'public/',\n    }\n});\n```\n\nAs we are working with Web Components, you can use any framework to build your component, with any CSS framework.\n\nThat's it ! Volet will automatically load your feature and display it in the panel, as long as the feature is registered and enabled.\n\nWant to create a package ? Check out the skeleton here: https://github.com/mydnic/volet-feature-package-skeleton\n\n## Features\n\nYou can install multiple features in your Volet instance. Here's a list of available features:\n\n- [FeedbackMessages (out of the box)](https://github.com/mydnic/volet/tree/2.x/docs/FeedbackMessages.md): Allows users to submit simple text messages\n  - Filament Plugin : [mydnic/volet-feedback-messages-filament-plugin](https://github.com/mydnic/volet-feedback-messages-filament-plugin)\n- [FeatureBoard (mydnic/volet-feature-board)](https://github.com/mydnic/volet-feature-board): Feature Request/Feature Board \n\nWant to create a feature for Volet ? Check out the skeleton here: https://github.com/mydnic/volet-feature-package-skeleton\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n- [Clément Rigo](https://github.com/mydnic)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmydnic%2Fvolet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmydnic%2Fvolet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmydnic%2Fvolet/lists"}