README

• 在您的网站上使用WhatsApp浮动聊天窗口

安装

composer require agenciafmd/admix-whatsapp:dev-master

不要忘记使用命令在您的项目中发布资产

php artisan vendor:publish --tag=admix-whatsapp:assets

前端数据

发布资产后，添加以下调用

CSS

<link rel="stylesheet" href="/css/whatsapp-chat.css">

JavaScript

<script src="/js/whatsapp-chat.js"></script>

组件

<x-whatsapp></x-whatsapp>

自定义

如果需要，可以在 config/admix-whatsapp.php 或 views 文件中进行包的配置

为此，请使用以下命令发布文件

php artisan vendor:publish --tag="admix-whatsapp:config"

在配置文件中，可以更改窗口文本和WhatsApp号码。

    'fields' => [
      'name' => true,
      'email' => false,
      'cpf' => true,
      'phone' => true,
      'newsletter' => true,
    ],
     'pt_BR' => [
        'phonenumber' => '5599999999999',
        'text' => 'Olá, bem-vindo(a).
                Por favor, informe seus dados e atenderemos o mais rápido possível!',
        'atendent' => 'Atendente 01',
        'occupation' => 'Atendimento - F&MD',
        'generic' => false,
        'generic_name_field' => 'Campo Generico',
        'generic_placeholder_field' => 'Campo Generico',
    ],
    'es_ES' => [
        'phonenumber' => '5599999999999',
        'text' => 'Hola bienvenido.
                ¡Déjanos tus datos y te responderemos lo antes posible!',
        'atendent' => 'Asistente 01',
        'occupation' => 'Asistencia - F&MD',
        'generic' => false,
        'generic_name_field' => 'Campo Generico',
        'generic_placeholder_field' => 'Campo Generico',
    ],
    'en_US' => [
        'phonenumber' => '5599999999999',
        'text' => 'Hello, welcome.
                Please provide your details and we will respond as soon as possible!',
        'atendent' => 'Attendant 01',
        'occupation' => 'Attendance - F&MD',
        'generic' => false,
        'generic_name_field' => 'Campo Generico',
        'generic_placeholder_field' => 'Campo Generico',
    ]

在此文件中，可以启用和禁用字段，根据需要。

自定义表单填写后的WhatsApp初始消息

如果需要在特定页面上使用更个性化的消息，我们可以从 master.blade.php 中移除组件调用，并将其放在项目的每个页面上

<x-whatsapp message="Gostaria de obter mais informações sobre ..."></x-whatsapp>

它将是这样的 "你好！我叫 '名字'[自定义消息]"

默认的初始消息是 "你好！我叫 '名字'。我想了解更多信息。"

多语言项目通用字段

如果需要在WhatsApp表单中添加字段，只需在所需语言中启用 'generic' 字段，并更改以下字段的通用字段名称和占位符

'es_ES' => [
    ...
    'generic' => false,
    'generic_name_field' => 'Campo Generico',
    'generic_placeholder_field' => 'Campo Generico',
    ],

自定义CSS变量

通常可以在项目的样式文件中覆盖变量的值。

--wa-chat-dark-green: #2B6056;
--wa-chat-green: #128C7E;
--wa-chat-light-green: #25D366;
--wa-chat-light: #DCF8C7;
--wa-chat-white: #F9F9F9;
--wa-chat-red: #DC1C2A;

--wa-chat-font-family: sans-serif;
--wa-chat-width: 24rem;
--wa-chat-box-shadow: 0 0.5rem 1.5rem -0.25rem rgba(0, 0, 0, 0.15);
--wa-chat-border-radius: .5rem;
--wa-chat-z-index: 1055;
--wa-chat-backdrop-color: rgba(0, 0, 0, .75);
--wa-chat-distance-y: 1rem;
--wa-chat-distance-x: 1rem;
--wa-chat-right: var(--wa-chat-distance-x);

--wa-chat-button-size: 3.5rem;
--wa-chat-button-border-radius: 50%;
--wa-chat-button-color: var(--wa-chat-light-green);
--wa-chat-button-icon-size: 1.5rem;

--wa-chat-window-margin-bottom: calc(var(--wa-chat-button-size) + var(--wa-chat-distance-y) + 1rem);

--wa-chat-header-padding: 0.625rem 1.25rem;
--wa-chat-contact-img-size: 2.5rem;
--wa-chat-close-size: 1.75rem;

--wa-chat-body-color: #000;
--wa-chat-body-padding: 1rem 1rem 1.5rem 1rem;
--wa-chat-placeholder-color: #757575;
--wa-chat-placeholder-color-hover: #414141;
--wa-chat-form-btn-border-radius: .25rem;

--wa-chat-error-text-right: auto;
--wa-chat-error-text-left: 0;
--wa-chat-error-text-bottom: 100%;
--wa-chat-error-text-margin: 0 0 0.25rem 0;
--wa-chat-error-text-transform-origin: left;

--wa-chat-left: auto;
--wa-chat-error-text-alt-right: 100%;
--wa-chat-error-text-alt-left: auto;
--wa-chat-error-text-alt-bottom: auto;
--wa-chat-error-text-alt-margin: 0 0.5rem 0 0;
--wa-chat-error-text-alt-transform-origin: right;

要使按钮和窗口位于屏幕左侧，请覆盖以下值

--wa-chat-left: var(--wa-chat-distance-x);
--wa-chat-error-text-alt-right: var(--wa-chat-error-text-right);
--wa-chat-error-text-alt-left: var(--wa-chat-error-text-left);
--wa-chat-error-text-alt-bottom: var(--wa-chat-error-text-bottom);
--wa-chat-error-text-alt-margin: var(--wa-chat-error-text-margin);
--wa-chat-error-text-alt-transform-origin: var(--wa-chat-error-text-transform-origin);