laravel feedback component
v1.10.0
Devido a uma estúpida violação de direitos autorais, tive que renomear este pacote.
Observe que nada mudou no código (ainda o mesmo namespace). Apenas o nome do pacote foi alterado. O namespace pode ser alterado posteriormente em uma versão principal.
laravel feedback component permite que você implemente facilmente um componente de feedback do cliente em seu site. É construído com VueJS, mas pode ser implementado em qualquer tipo de projeto Laravel. Você só precisa inserir algumas linhas em seu layout.
Você provavelmente conhece muitos sites que usam o sistema de bate-papo do intercom, ou crisp, chat.io e muitos outros bate-papos com clientes, permitindo que você obtenha feedback dos visitantes do seu site.
laravel feedback component é uma alternativa de código aberto e personalizável que adota o mesmo layout. Depois de instalado, você verá o componente em seu site.
Também temos uma Nova Tool para isso!
Trabalharei na implementação de um sistema de bate-papo no laravel feedback component , que provavelmente funcionará com o Laravel Nova. Isso está planejado para V2. Por enquanto, você só pode coletar feedbacks de seus visitantes.
componente de feedback laravel "data-animated-image="" style="max-width: 100%;">
Você pode usar o Composer para instalar laravel feedback component :
composer require mydnic/laravel-kustomer Depois de instalar laravel feedback component , publique seus ativos usando o comando kustomer:publish Artisan. Depois de instalar o pacote, você também deve executar o comando de migração:
php artisan kustomer:publish
php artisan migrateIsso criará uma nova tabela de feedbacks .
Você pode atualizar a configuração do componente como desejar editando config/kustomer.php .
Eu encorajo você a ler atentamente este arquivo de configuração.
Todos os textos que você pode ver nos componentes são traduzíveis. Após publicar os assets, você encontrará os textos em resources/lang/vendor/en/kustomer.php
Os rótulos de feedbacks também são armazenados neste arquivo, e a matriz feedbacks deve corresponder ao seu arquivo de configuração.
Em seu diretório public/ você encontrará arquivos css e js compilados que precisam ser incluídos em seu layout html.
Inclua-os nas páginas em que deseja que os componentes apareçam:
< head >
< script src = " {{ asset ( ' vendor/kustomer/js/kustomer.js ' ) } } " defer ></ script >
</ head >
< body >
@include ( ' kustomer::kustomer ' )
</ body >Atenção Se você executar uma aplicação VueJS, deverá adicionar o contêiner
#kustomerfora do contêiner#app. Isso ocorre porque o kustomer é executado em sua própria instância vue por padrão. Se você quiser mudar isso, consulte Incluir ativos com seus próprios ativos
Ao atualizar este pacote, você deve publicar novamente os ativos:
php artisan vendor:publish --tag=kustomer-assets --force Isso publicará novamente os arquivos JS e CSS compilados, mas também os arquivos SVG localizados em public/vendor/kustomer/assets . Se você quiser usar suas próprias imagens, atualize o arquivo de configuração.
Opcionalmente, você pode importar os arquivos .vue e .sass para suas próprias pastas resources/js e resources/sass , permitindo personalizar fortemente os componentes e o layout do Componente de Feedback.
Isso também permitirá que você tenha apenas um .js e .css compilados em seu aplicativo.
No entanto, você deve ter cuidado se estiver tentando atualizar para a versão mais recente, pois suas alterações podem ser perdidas.
Dois pacotes npm são necessários:
Você pode adicioná-los via npm ou fio.
Estamos usando o axios para fazer a solicitação HTTP para enviar o feedback, portanto, certifique-se de que o axios esteja instalado e configurado em seu aplicativo vue.
Assim como no javascript do andaime Laravel, os axios devem ser configurados assim:
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' ) ;
} Publique o componente VueJS:
php artisan vendor:publish --tag=kustomer-vue-componentPublique o arquivo de estilo SASS:
php artisan vendor:publish --tag=kustomer-sass-componentEntão, em seu aplicativo vue:
// app.js
Vue . component ( 'kustomer' , require ( './components/Kustomer/Kustomer.vue' ) ) ; // app.scss
@import ' kustomer ' ;Um Feedback tem essencialmente 4 atributos:
Depois que um Feedback é armazenado em seu banco de dados, você pode usar seu próprio backoffice para exibir e manipular os dados.
O modelo Feedback funciona como qualquer outro modelo do Eloquent, por isso é muito fácil de usar em sua aplicação Laravel.
Usando LaravelNova? Sem problemas !
Se você estiver usando o Laravel Nova certamente irá querer uma ferramenta para visualizar todos os feedbacks que você recebeu.
Você pode instalar a ferramenta oficial do Laravel Nova aqui.
Quando um novo feedback for armazenado corretamente, enviaremos um Evento Laravel.
Você pode ouvir este evento e acionar qualquer tipo de ouvinte. Cabe a você decidir o que acontece a seguir! Você pode enviar um e-mail para o administrador, registrar alguns dados ou o que quiser.
No seu EventServiceProvider você pode atualizar a propriedade $listen para adicionar o Evento.
protected $ listen = [
' MydnicKustomerEventsNewFeedback ' => [
' AppListenersYourOwnListener ' , // change this
],
// ...
];Laravel Kustomer é um software de código aberto licenciado sob a licença MIT.
Neste projeto você encontrará alguns ícones SVG que vêm do FlatIcon. Você está livre para alterá-los em seu próprio projeto.
