laravel feedback component
v1.10.0
Debido a una estúpida infracción de derechos de autor, tuve que cambiar el nombre de este paquete.
Tenga en cuenta que nada en el código cambió (sigue siendo el mismo espacio de nombres). Solo ha cambiado el nombre del paquete. El espacio de nombres podría cambiar más adelante en una versión importante.
laravel feedback component le permite implementar fácilmente un componente de comentarios de clientes en su sitio web. Está construido con VueJS pero se puede implementar en cualquier tipo de Proyecto Laravel. Sólo necesitas colocar algunas líneas en tu diseño.
Probablemente conozca muchos sitios web que utilizan el sistema de chat de intercomunicación, o Crisp, chat.io y muchos más chats de clientes que le permiten obtener comentarios de los visitantes de su sitio web.
laravel feedback component es una alternativa personalizable y de código abierto que adopta el mismo diseño. Una vez instalado, verá el componente en su sitio web.
¡También tenemos una herramienta Nova para ello!
Trabajaré en la implementación de un sistema de chat en laravel feedback component , que probablemente funcionará con Laravel Nova. Esto está previsto para la V2. Por ahora, sólo puedes recopilar comentarios de tus visitantes.
Componente de retroalimentación de laravel " data-animated-image="" style="max-width: 100%;">
Puede utilizar Composer para instalar laravel feedback component :
composer require mydnic/laravel-kustomer Después de instalar laravel feedback component , publique sus activos usando el comando kustomer:publish Artisan. Después de instalar el paquete, también debes ejecutar el comando de migración:
php artisan kustomer:publish
php artisan migrateEsto creará una nueva tabla de comentarios .
Puede actualizar la configuración del componente como desee editando config/kustomer.php .
Le animo a que lea atentamente este archivo de configuración.
Todos los textos que puedes ver en los componentes son traducibles. Después de publicar los activos, encontrará los textos en resources/lang/vendor/en/kustomer.php
Las etiquetas de retroalimentación también se almacenan en este archivo y la matriz feedbacks debe coincidir con la de su archivo de configuración.
En su directorio public/ encontrará archivos css y js compilados que deben incluirse en su diseño html.
Inclúyalos en las páginas en las que desea que aparezcan los componentes:
< head >
< script src = " {{ asset ( ' vendor/kustomer/js/kustomer.js ' ) } } " defer ></ script >
</ head >
< body >
@include ( ' kustomer::kustomer ' )
</ body >Atención Si ejecuta una aplicación VueJS, debe agregar el contenedor
#kustomerfuera de su contenedor#app. Esto se debe a que kustomer se ejecuta en su propia instancia de vue de forma predeterminada. Si desea cambiar eso, consulte Incluir activos con sus propios activos.
Al actualizar este paquete, debe volver a publicar los activos:
php artisan vendor:publish --tag=kustomer-assets --force Esto volverá a publicar los archivos JS y CSS compilados, pero también los archivos svg ubicados en public/vendor/kustomer/assets . Si desea utilizar sus propias imágenes, actualice el archivo de configuración.
Opcionalmente, puede importar los archivos .vue y .sass a sus propias carpetas resources/js y resources/sass , lo que le permite personalizar en gran medida los componentes y el diseño del componente de comentarios.
Esto también le permitirá terminar con solo un .js y .css compilados en su aplicación.
Sin embargo, debe tener cuidado si intenta actualizar la última versión, porque los cambios podrían perderse.
Se requieren dos paquetes npm:
Puedes agregarlos mediante npm o hilo.
Estamos utilizando axios para realizar la solicitud HTTP para enviar los comentarios, así que asegúrese de que axios esté instalado y configurado en su aplicación vue.
Al igual que en el javascript de andamio de Laravel, axios debe configurarse así:
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 el componente VueJS:
php artisan vendor:publish --tag=kustomer-vue-componentPublique el archivo de estilo SASS:
php artisan vendor:publish --tag=kustomer-sass-componentLuego en tu aplicación vue:
// app.js
Vue . component ( 'kustomer' , require ( './components/Kustomer/Kustomer.vue' ) ) ; // app.scss
@import ' kustomer ' ;Un comentario tiene esencialmente 4 atributos:
Una vez que los comentarios se almacenan en su base de datos, puede utilizar su propio backoffice para mostrar y manipular los datos.
El modelo Feedback funciona como cualquier otro modelo de Eloquent, por lo que es muy fácil de usar en su aplicación Laravel.
¿Usando Laravel Nova? Ningún problema !
Si estás utilizando Laravel Nova, seguramente querrás una herramienta para visualizar todos los comentarios que has recibido.
Puede instalar la herramienta oficial Laravel Nova aquí.
Cuando un nuevo comentario se almacene correctamente, enviaremos un evento de Laravel.
Puede escuchar este evento y activar cualquier tipo de oyentes. ¡Depende de usted decidir qué sucederá después! Puedes enviar un correo electrónico al administrador, registrar algunos datos o lo que se te ocurra.
En su EventServiceProvider puede actualizar la propiedad $listen para agregar el evento.
protected $ listen = [
' MydnicKustomerEventsNewFeedback ' => [
' AppListenersYourOwnListener ' , // change this
],
// ...
];Laravel Kustomer es un software de código abierto con licencia MIT.
En este proyecto encontrarás algunos íconos svg que provienen de FlatIcon. Eres libre de cambiarlos en tu propio proyecto.
