Customizado

Webhooks customizados são uma opção poderosa para importar contatos ou mesmo direcionar contatos existentes para dentro de um fluxo expecífico na Suri, acelerando conversão de leads, impulsionando vendas ou deixando seu atendimento mais eficiente. Este tipo de webhook é o ideal para conectar qualquer sistema (ERP, CRM, etc.) que possa chamar webhooks utilizando POST para indicar alguma ação que ocorre internamente. Alguns exemplos:

• "Uso um CRM que ainda não tem integração nativa na Suri, mas gostaria que todo novo contato que caia lá, automaticamente seja criado no chatbot"

• "Tenho uma landing page com um formulário onde meus leads preenchem todas as informações que preciso. Gostaria que assim que ele clique em 'Enviar', todas essas informações cheguem para a Suri, criando o contato e transferindo para um atendente humano"

• "Tenho um e-commerce e gostaria de enviar notificações via WhatsApp para meus contatos a cada alteração de status de entrega de um pedido, informando o Número do pedido, o status e uma breve descrição"

Com webhooks customizados, todas essas situações podem ser resolvidas com a Suri de forma totalmente No-Code 🚀

O processo de criação de webhook é o mesmo, escolhendo o tipo de webhook "Customizado", bem como o canal WhatsApp desejado. Existem também dois novos campos: "Identificador da integração" e "Caminho do telefone no JSON"

• Identificador da integração: um nome único dado à integração. Serve unicamente para vincular os dados recebidos ao webhook e acessar os dados recebidos pelo webhook utilizando macros, como veremos mais adiante

• Caminho do telefone no JSON: como para o WhatsApp a informação de telefone é fundamental, pois sem ele não conseguimos identificar o contato, tal informação também se torna essencial nos dados enviados no BODY do webhook para a Suri. Com isso, faz-se necessário avisar à Suri qual o caminho, o path, para o atributo que possui o dado de telefone do contato. Por exemplo:

  • suponha que o payload enviado no webhook tenha o formato de JSON abaixo. Nesse caso o caminho para o telefone será data.customer.phone.

{
    "data": {
        "customer": {
            "phone": "5585900000000",
            "name": "Victor de Almeida"
            // ... outros dados ...
        }
    }
    // ... outros dados ...
}

Utilizando dados do payload

A única informação obrigatória no payload do webhook recebido pela Suri é o telefone do contato, mas de forma alguma deve ser a única, use o payload para enriquecer o máximo possível sua integração. A Suri captura o payload inteiro e possibilita o uso de tais dados dentro de mensagens, chamadas HTTP, condicionais, etc. Com isso, fique a vontade para enviar todos os dados necessários para a integração e a Suri conseguirá capturar e trabalhar com tais dados utilizando os macros de contato:

@Integrations.identificadorDaIntegracao.XXXXX

Onde "identificadorDaIntegracao" é o nome dado àquela integração de webhook, como vimos anteriormente, e XXXXX é o path ao atributo do payload desejado. Por exemplo: suponha que o nome da integração é "minhalp" e o payload do webhook tem o seguinte formato:

{
    "telefone": "5585900000000",
    "nome": "Victor de Almeida",
    "cliente": false
}

Para pegar o boolean que indica se o contato é cliente ou não, usamos @Integrations.minhalp.cliente

Exemplos práticos

Pegando alguns dos exemplos mencionados no início desta página (CRM e Landing Page), seguem abaixo simulações de envio de webhook (que seriam feitas por esses sistemas à Suri) utilizando Postman e como eles poderiam se comportar no fluxo.

• CRM: novo contato chega no CRM, ele então chama webhook passando os dados do contato. Suri recebe esses dados, importa contato e realiza alguma ação

• Landing Page: contato finaliza o envio de um formulário no site e este form chama o webhook Suri, importando o contato já enviando os dados coletados

<!-- Exemplo de formulário em uma landing page -->
<form id="leadForm">
    <label for="telefone">Telefone:</label>
    <input type="tel" id="telefone" name="telefone" required>

    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome" required>

    <label for="qtdFuncionarios">Quantidade de Funcionários:</label>
    <select id="qtdFuncionarios" name="qtdFuncionarios" required>
        <option value="De 1 a 10">De 1 a 10</option>
        <option value="De 11 a 25">De 11 a 25</option>
        <option value="De 25 a 50">De 25 a 50</option>
        <option value="Mais de 50">Mais de 50</option>
    </select>

    <label for="cliente">Já é cliente Suri?</label>
    <select id="cliente" name="cliente" required>
        <option value="Sim">Sim</option>
        <option value="Não">Não</option>
    </select>

    <button type="submit">Enviar</button>
</form>

<!-- Exemplo de script que pega os dados capturados e envia webhook para a Suri -->
<script>
        document.getElementById('leadForm').addEventListener('submit', function(event) {
            event.preventDefault();
            
            const telefone = document.getElementById('telefone').value;
            const nome = document.getElementById('nome').value;
            const qtdFuncionarios = document.getElementById('qtdFuncionarios').value;
            const cliente = document.getElementById('cliente').value;
            
            const data = {
                telefone,
                nome,
                qtdFuncionarios,
                cliente
            };
            
            fetch('https://XXXXXX.azurewebsites.net/flow/hook?type=1000&channelId=wpXXXXX&flowId=cbXXXXX', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(result => {
                alert('Dados enviados com sucesso!');
                console.log('Resposta do servidor:', result);
            })
            .catch(error => {
                alert('Erro ao enviar os dados!');
                console.error('Erro:', error);
            });
        });
    </script>