F&MD - Whatsapp Chat

• Use o chat flutuante do Whatsapp no seu site

Instalação

composer require agenciafmd/admix-whatsapp:dev-master

Não esqueça de publicar os assets no seu projeto com o comando

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

Dados no frontend

Após publicar os assets, acrescente as chamadas de:

CSS

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

Javascript

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

Componente

<x-whatsapp></x-whatsapp>

Customização

Caso seja necessário, é possivel a configuração do pacote no arquivo config/admix-whatsapp.php ou das views

Para isso, publique o arquivo com o comando abaixo:

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

No arquivo de config é possivel alterar os textos da janela e o número de 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',
    ]

Neste arquivo é possivel habilitar e desabilitar os campos conforme for necessário

Customização de mensagem inicial do whatsapp após o preenchimento do formulário

Caso seja necessário utilizar uma mensagem mais personalizada em determinadas páginas podemos tirar a chamada do componente da master.blade.php e colocar a chamada em cada página do projeto

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

E ficará assim "Olá! Meu nome é 'Nome'. [Mensagem Customizada]"

A mensagem inicial padrão que vai no whatsapp é "Olá! Meu nome é 'Nome'. Gostaria de obter mais informações."

Campo genérico para projetos multilingua

Caso tenha a necessidade de acrescentar um campo no formulário de whatsapp basta habilitar o campo 'generic' na lingua requerida e trocar o nome e placeholder do campo generico nos seguintes campos

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

Customizar variáveis de CSS

Os valores das variáveis podem ser sobrescritos normalmente nos arquivos de estilo do projeto.

--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;

Para fazer o botão e a janela ficarem do lado esquerdo da tela, sobrescreva as variáveis com os seguintes valores:

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