README

由于一个愚蠢的版权侵权，我不得不重命名这个包。

请注意，代码中没有更改（仍然使用相同的命名空间）。只有包名已更改。在未来的主要版本中，命名空间可能会更改。

Laravel 定制反馈组件

简介
- 聊天系统
演示
安装与配置
检索反馈
- Nova 工具
事件、作业、通知等
许可

简介

Laravel 反馈组件允许您轻松地在您的网站上实现客户反馈组件。它使用 VueJS 构建，但可以应用于任何类型的 Laravel 项目。您只需要在布局中添加几行代码。

您可能知道很多使用 intercom 聊天系统、crisp、chat.io 等客户聊天的网站，它们允许您从网站访客那里收集反馈。

Laravel 反馈组件是一个开源且可定制的替代方案，采用了相同的布局。安装后，您将在网站上看到该组件。

我们还有为它提供的 Nova 工具！

聊天系统

我将致力于在 Laravel 反馈组件中实现聊天系统，它可能会与 Laravel Nova 一起工作。这计划在 V2 中进行。目前，您只能收集访客的反馈。

演示

安装与配置

您可以使用 Composer 安装 Laravel 反馈组件

composer require mydnic/laravel-kustomer

安装 Laravel 反馈组件后，使用 kustomer:publish Artisan 命令发布其资源。安装包后，还应运行迁移命令

php artisan kustomer:publish

php artisan migrate

这将创建一个新的 feedbacks 表。

配置

您可以通过编辑 config/kustomer.php 来按需更新组件的配置。

我鼓励您仔细阅读此配置文件。

翻译

组件中可见的所有文本都是可翻译的。发布资源后，您将在 resources/lang/vendor/en/kustomer.php 中找到这些文本

反馈标签存储在此文件中，并且 feedbacks 数组必须与您的配置文件中的匹配。

显示组件

在您的 public/ 目录中，您将找到需要包含到 HTML 布局中的编译后的 CSS 和 JS 文件。

将这些包含在您希望组件出现的页面上

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

注意如果您运行的是 VueJS 应用程序，您必须在 #app 容器之外添加 #kustomer 容器。这是因为 kustomer 默认在它自己的 Vue 实例上运行。如果您想更改这一点，请参阅使用自己的资源包含资源

更新

在更新此包时，您应重新发布资源

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

这将重新发布编译后的 JS 和 CSS 文件，以及位于 public/vendor/kustomer/assets 的 svg 文件。如果您想使用自己的图片，请更新配置文件。

将资源与自己的资源一起包含

可选地，您可以导入 .vue 和 .sass 文件到自己的 resources/js 和 resources/sass 文件夹中，这样您可以大量自定义反馈组件和布局。

这还将使您在应用程序中只得到一个编译后的 .js 和 .css 文件。

但是，如果您正在尝试更新最新版本，请小心，因为您的更改可能会丢失。

先决条件

需要两个 npm 包

axios
html2canvas

您可以通过 npm 或 yarn 安装它们。

我们使用 axios 来发送 HTTP 请求发送反馈，所以请确保 axios 已在您的 vue 应用中安装和配置。

在 Laravel 框架的 JavaScript 中，axios 应该配置如下

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.net.cn/docs/csrf#csrf-x-csrf-token');
}

安装

发布 VueJS 组件

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

发布 SASS 样式文件

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

然后在您的 vue 应用中

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

// app.scss
@import 'kustomer';

检索反馈

反馈基本上有 4 个属性

类型：代表反馈的“类别”（错误、喜欢、建议等）
消息：访客输入的消息
用户信息：一个包含有关用户请求的各种信息的 JSON 列表
已审阅：一个布尔列，允许标记反馈为“已审阅”

一旦反馈存储在您的数据库中，您就可以使用自己的后台来显示和处理数据。

反馈模型与任何其他 Eloquent 模型一样工作，因此在您的 Laravel 应用程序中使用它非常简单。

使用 Laravel Nova？没问题！

使用 Laravel Nova

如果您使用 Laravel Nova，您肯定希望有一个工具来可视化所有收到的反馈。

您可以从这里安装官方的 Laravel Nova 工具。

事件、作业、通知等

当新反馈正确存储时，我们将触发 Laravel 事件。

您可以监听此事件并触发任何类型的监听器。接下来会发生什么取决于您！您可以给管理员发送电子邮件、记录一些数据，或者您能想到的任何事。

在您的 EventServiceProvider 中，您可以更新 $listen 属性来添加事件。

protected $listen = [
    'Mydnic\Kustomer\Events\NewFeedback' => [
        'App\Listeners\YourOwnListener', // change this
    ],

    // ...
];

许可

Laravel Kustomer 是一个开源软件，许可协议为 MIT 许可。

在这个项目中，您可以找到一些来自 FlatIcon 的 svg 图标。您可以在自己的项目中更改它们。

mydnic / laravel-kustomer

维护者

详细信息