laravel feedback component

Aufgrund einer dummen Urheberrechtsverletzung musste ich dieses Paket umbenennen.

Beachten Sie, dass sich am Code nichts geändert hat (immer noch derselbe Namespace). Lediglich der Paketname hat sich geändert. Der Namespace kann später in einer Hauptversion geändert werden.

Anpassbare Feedback-Komponente für Laravel

• Einführung
  • Chat-System
• Demo
• Installation und Konfiguration
  • Konfiguration
  • Übersetzungen
  • Zeigen Sie die Komponente an
  • Aktualisierung
  • Fügen Sie Vermögenswerte zu Ihren eigenen Vermögenswerten hinzu
    • Voraussetzung
    • Installieren
• Feedbacks abrufen
  • Nova-Tool
• Ereignis, Job, Benachrichtigung usw
• Lizenz

Einführung

laravel feedback component können Sie ganz einfach eine Kundenfeedback-Komponente auf Ihrer Website implementieren. Es wurde mit VueJS erstellt, kann aber in jeder Art von Laravel-Projekt implementiert werden. Sie müssen nur ein paar Zeilen in Ihr Layout einfügen.

Sie kennen wahrscheinlich viele Websites, die das Chat-System von Intercom oder Crisp, Chat.io und viele weitere Kunden-Chats verwenden, mit denen Sie Feedback von Ihren Website-Besuchern erhalten können.

laravel feedback component ist eine Open-Source- und anpassbare Alternative, die das gleiche Layout übernimmt. Nach der Installation wird die Komponente auf Ihrer Website angezeigt.

Wir haben auch ein Nova Tool dafür!

Chat-System

Ich werde an der Implementierung eines Chat-Systems in laravel feedback component arbeiten, das wahrscheinlich mit Laravel Nova funktionieren wird. Dies ist für V2 geplant. Derzeit können Sie nur Feedback von Ihren Besuchern einholen.

Demo

Laravel-Feedback-Komponente „ data-animated-image="" style="max-width: 100%;">

Installation und Konfiguration

Sie können Composer verwenden, um laravel feedback component zu installieren:

composer require mydnic/laravel-kustomer

Veröffentlichen Sie nach der Installation laravel feedback component ihre Assets mit dem Artisan-Befehl kustomer:publish . Nach der Installation des Pakets sollten Sie auch den Migrationsbefehl ausführen:

php artisan kustomer:publish

php artisan migrate

Dadurch wird eine neue Feedbacktabelle erstellt.

Konfiguration

Sie können die Konfiguration der Komponente nach Ihren Wünschen aktualisieren, indem Sie config/kustomer.php bearbeiten.

Ich empfehle Ihnen, diese Konfigurationsdatei sorgfältig zu lesen.

Übersetzungen

Alle Texte, die Sie in den Komponenten sehen können, sind übersetzbar. Nach der Veröffentlichung der Assets finden Sie die Texte in resources/lang/vendor/en/kustomer.php

Die Feedback-Bezeichnungen werden ebenfalls in dieser Datei gespeichert und das feedbacks Array muss mit dem aus Ihrer Konfigurationsdatei übereinstimmen.

Zeigen Sie die Komponente an

In Ihrem public/ -Verzeichnis finden Sie kompilierte CSS- und JS-Dateien, die in Ihr HTML-Layout eingebunden werden müssen.

Fügen Sie diese auf den Seiten ein, auf denen die Komponenten angezeigt werden sollen:

< head >
    < script src = " {{ asset ( ' vendor/kustomer/js/kustomer.js ' ) } } " defer ></ script >
</ head >
< body >
    @include ( ' kustomer::kustomer ' )
</ body >

Achtung Wenn Sie eine VueJS-Anwendung ausführen, müssen Sie den #kustomer Container außerhalb Ihres #app -Containers hinzufügen. Dies liegt daran, dass Kustomer standardmäßig auf einer eigenen Vue-Instanz ausgeführt wird. Wenn Sie dies ändern möchten, lesen Sie Assets in Ihre eigenen Assets einbeziehen

Aktualisierung

Wenn Sie dieses Paket aktualisieren, sollten Sie die Assets erneut veröffentlichen:

php artisan vendor:publish --tag=kustomer-assets --force

Dadurch werden die kompilierten JS- und CSS-Dateien, aber auch die SVG-Dateien, die sich in public/vendor/kustomer/assets befinden, erneut veröffentlicht. Wenn Sie Ihre eigenen Bilder verwenden möchten, aktualisieren Sie bitte die Konfigurationsdatei.

Fügen Sie Vermögenswerte zu Ihren eigenen Vermögenswerten hinzu

Optional können Sie die .vue und .sass Dateien in Ihre eigenen resources/js und resources/sass -Ordner importieren, sodass Sie die Komponenten und das Layout der Feedback-Komponente stark anpassen können.

Dadurch haben Sie auch die Möglichkeit, am Ende nur eine kompilierte .js und .css in Ihrer App zu haben.

Sie sollten jedoch vorsichtig sein, wenn Sie versuchen, die neueste Version zu aktualisieren, da Ihre Änderungen möglicherweise verloren gehen.

Voraussetzung

Es sind zwei npm-Pakete erforderlich:

• Axios
• html2canvas

Sie können sie über npm oder Garn hinzufügen.

Wir verwenden Axios, um die HTTP-Anfrage zum Senden des Feedbacks zu stellen. Stellen Sie daher sicher, dass Axios in Ihrer Vue-App installiert und konfiguriert ist.

Wie im Laravel-Gerüst-Javascript sollten Axios wie folgt konfiguriert werden:

 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' ) ;
} 

Installieren

Veröffentlichen Sie die VueJS-Komponente:

php artisan vendor:publish --tag=kustomer-vue-component

Veröffentlichen Sie die SASS-Stildatei:

php artisan vendor:publish --tag=kustomer-sass-component

Dann in Ihrer Vue-App:

 // app.js
Vue . component ( 'kustomer' , require ( './components/Kustomer/Kustomer.vue' ) ) ; 

 // app.scss
@import ' kustomer ' ;

Feedbacks abrufen

Ein Feedback hat im Wesentlichen 4 Attribute:

• Typ: Stellt die „Kategorie“ des Feedbacks dar (Fehler, „Gefällt mir“, Vorschlag usw.)
• Nachricht: die eingegebene Nachricht Ihrer Besucher
• Benutzerinfos: eine JSON-Spalte, die alle möglichen Informationen über die Anfrage des Benutzers enthält
• Bewertet: eine boolesche Spalte, die es ermöglicht, ein Feedback als „bewertet“ zu markieren.

Sobald ein Feedback in Ihrer Datenbank gespeichert ist, können Sie Ihr eigenes Backoffice verwenden, um die Daten anzuzeigen und zu bearbeiten.

Das Feedback-Modell funktioniert wie jedes andere Eloquent-Modell und ist daher sehr einfach in Ihrer Laravel-Anwendung zu verwenden.

Verwenden Sie Laravel Nova? Kein Problem !

Zur Verwendung mit Laravel Nova

Wenn Sie Laravel Nova verwenden, benötigen Sie sicherlich ein Tool zur Visualisierung aller Rückmeldungen, die Sie erhalten haben.

Sie können das offizielle Laravel Nova Tool hier installieren.

Ereignis, Job, Benachrichtigung usw

Wenn ein neues Feedback korrekt gespeichert wird, werden wir ein Laravel-Event auslösen.

Sie können diesem Ereignis zuhören und jede Art von Zuhörern auslösen. Es liegt an Ihnen, zu entscheiden, was als nächstes passiert! Sie können eine E-Mail an den Administrator senden, einige Daten protokollieren oder was auch immer Ihnen einfällt.

In Ihrem EventServiceProvider können Sie die Eigenschaft $listen aktualisieren, um das Ereignis hinzuzufügen.

 protected $ listen = [
    ' MydnicKustomerEventsNewFeedback ' => [
        ' AppListenersYourOwnListener ' , // change this
    ],

    // ...
];

Lizenz

Laravel Kustomer ist eine Open-Source-Software, die unter der MIT-Lizenz lizenziert ist.

In diesem Projekt finden Sie einige SVG-Symbole, die von FlatIcon stammen. Es steht Ihnen frei, sie in Ihrem eigenen Projekt zu ändern.