Os principais objetivos do site de uma empresa são aumentar as vendas e proporcionar um melhor serviço aos seus clientes e é geralmente o primeiro ponto de contato entre a empresa e o potencial cliente. Por este motivo, é fundamental ter um sistema para gerenciar os contatos provenientes do site.

O Ploomes permite que as mensagens e dados cadastrais de seus clientes sejam capturadas do plugin Contact Form 7 e sejam enviados automaticamente para sua ferramenta de gestão comercial para que a equipe responsável faça a abordagem apropriada.

Como configurar a integração

OBS: Este artigo é destinado a programadores. Não assumimos qualquer responsabilidade caso seu site fique momentaneamente indisponível durante o desenvolvimento da integração ou durante os testes e assumimos que a pessoa responsável pela integração tenha conhecimento tanto de programação quanto do funcionamento do WordPress. É altamente recomendável o backup do arquivo 'functions.php' do seu tema antes das edições, pois pode ser necessário revertê-lo em caso de erros.

Observação importante extraída da página do Contact Form 7:
The “on_sent_ok” and its sibling setting “on_submit” are deprecated and scheduled to be abolished by the end of 2017.

A informação completa pode ser vista no seguinte link:
https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/

O procedimento é bastante simples. Para integrar seu formulário com o Ploomes, é necessário apenas adicionar um listener no evento wpcf7mailsent. Por padrão, quando um formulário é preenchido pelo visitante e o botão de "Enviar" é clicado, o CF7 envia um e-mail informativo para o responsável. O evento wpcf7mailsent acontece logo após a confirmação de envio deste e-mail.

Dentro de cada site do Wordpress, existe um arquivo chamado "functions.php" que é o canal que liga o seu tema a todas as coisas legais que o WP tem a oferecer! Códigos personalizados, estrutura de arquivos e todo tipo de manipulação que você imaginar no seu site WordPress. Trecho extraído do seguinte link (não oficial):
https://blog.da2k.com.br/2015/01/14/wordpress-o-arquivo-functions-php/

É possível editar o arquivo functions.php e fazer as alterações necessárias diretamente pelo painel administrativo, mas este procedimento é altamente desaconselhável, uma vez que qualquer erro de sintaxe deixará não apenas seu site, mas também o painel administrativo fora do ar, impedindo que sua alteração seja revertida. A única opção neste caso seria acessar o site via FTP e reverter o arquivo para seu estado original, mas você perderia minutos valiosos com seu site inacessível para o público geral, ou seja, não vale a pena.

O procedimento mais seguro é acessar seu site via FTP, assim caso um erro ocorra, basta fazer upload do arquivo original (sim, faça uma cópia dele antes de iniciar o desenvolvimento).

Para saber como acessar seu site via FTP, utilize o link abaixo:
https://www.canalwp.com/guia-do-iniciante/ftp-transferir-arquivos-wordpress/

O arquivo functions.php que você precisa localizar deve estar sob o diretório "includes" do CF7. Exemplo de caminho:
ftp://ftp.seusite.com.br/public_html/wp-content/plugins/contact-form-7/includes/

O trecho abaixo mostra um exemplo simples de como capturar o evento de submissão de um formulário de contato. Ele deve ser colado abaixo de todo o conteúdo do arquivo "functions.php":

_______________________________________________________

add_action( 'wp_footer', 'sync_ploomes' );

function sync_ploomes() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
 /**
 SEU CÓDIGO AQUI
 **/
}, false );

</script>
<?php
}
_______________________________________________________

Com o exemplo acima, já possível capturar o evento, porém ele não faz muita coisa ainda.

Em seguida, é necessário editar o corpo da mensagem para que realize os procedimentos desejados. Por exemplo, vamos imaginar que tudo que este formulário precise fazer é criar um contato no Ploomes. Primeiramente, precisamos capturar o nome da pessoa digitada, e para isso vamos supor que o Id do campo em seu formulário seja 'your-name'. O exemplo abaixo mostra como pegar o valor deste campo:

_______________________________________________________

var contato = new Object();

for(i = 0; i < event.detail.inputs.length; i++)
{
 if(event.detail.inputs[i]['name'] == 'your-name')
 {
 contato.Cliente = event.detail.inputs[i]['value'];
 contato.ID_Tipo = 2;
 }
}
_______________________________________________________

Em seguida, você pode enviar o objeto 'contato' criado para o serviço de POST de clientes no Ploomes, como no exemplo abaixo:

_______________________________________________________

$.ajax({
 type: 'post',
 url: 'https://api.ploomes.com/1/Clientes?apvk=SUACHAVEDEINTEGRACAOAQUI',
 data: JSON.stringify(contato),
 contentType: "application/json; charset=utf-8",
 traditional: true,
 success: function (data) {
/**
 Alguma tratativa aqui
**/
 }
 });
_______________________________________________________

Para descobrir sua chave de cliente (necessária para a integração) e para mais exemplos de Endpoints e possibilidades (criar Empresa, Tarefas, Registros de contato, Negociações, etc), mande um e-mail para suporte@ploomes.com solicitando os dados de acesso de sua API.

Você também pode querer integrar apenas alguns formulários, ou ainda ter tratativas diferentes para cada um deles, ou para cada página integrada. Para tanto, você pode inspecionar o objeto 'event' e criar as devidas lógicas. Alguns exemplos de verificações possíveis:

1) Fazer integração com um formulário específico apenas:
Exemplo: Fazer a integração somente se meu formulário for o '6521'. **Para saber qual o ID do seu formulário, basta olhar na seção administrativa as informações detalhadas de cada formulário criado com o plugin Contact Form 7. Você verá para cada formulário, um código como no exemplo "[contact-form-7 id="1234" title="Contact form 1"]". Neste caso o código é "1234". Para realizar a integração somente se o formulário for o "1234", você pode fazer algo como:

if ( '1234' == event.detail.contactFormId ) {
 /**
 SEU CÓDIGO AQUI
 **/
}


2) Caso o formulário esteja em mais de uma página, quero saber de qual página está vindo o contato.
Para isso, você pode checar a propriedade baseURI, dentro do elemento 'target' do evento. Exemplo:
event.target.baseURI

Isso retornará a página atual e você pode tratar diferentes páginas de maneiras distintas, como por exemplo adicionar uma observação diferente para cada uma ou até ignorar a integração para algumas delas.


Encontrou sua resposta?