Addon Webhooks

Você gostaria de enviar dados dos seus formulários WordPress para um aplicativo ou plugin de terceiros? Com o addon WPForms Webhooks, você pode conectar seus formulários a um serviço secundário.

Este tutorial mostrará como instalar e usar o addon Webhooks com o WPForms.

---

O Que São Webhooks?

Um webhook permite que você envie automaticamente informações do seu formulário para algum outro serviço ou ferramenta fora do seu site WordPress. Isso é especialmente útil se você precisar de uma integração, mas ainda não houver um addon disponível para ela.

A maneira mais fácil para iniciantes de configurar um webhook é através do nosso addon Zapier. O Zapier é ótimo para todos os níveis de usuário porque usa uma configuração estilo assistente, que o guia por todas as etapas necessárias para conectar seus formulários a um serviço separado.

Outra opção é a nossa integração Uncanny Automator. Este recurso permite que você faça conexões entre aplicativos e serviços compatíveis.

Para usuários mais avançados, o addon Webhooks oferece funcionalidades semelhantes sem nenhum serviço conector. No entanto, como contrapartida, o processo de configuração é mais técnico.

Instalando o Addon de Webhooks

Antes de começar, você precisará primeiro garantir que o WPForms esteja instalado e ativado em seu site WordPress.

Assim que o WPForms for instalado e sua licença for verificada, você poderá instalar e ativar rapidamente o addon Webhooks.

Configurando um Webhook

Após a conclusão do processo de instalação, você estará pronto para configurar seu webhook. Para começar, você precisará criar um novo formulário ou editar um existente.

Após abrir o construtor de formulários, você pode habilitar webhooks em Configurações » Webhooks. A partir daqui, ative a opção Habilitar Webhooks.

Isso abrirá mais configurações que você pode configurar, incluindo a nomeação do seu webhook.

Por padrão, novos webhooks não terão nome. Se você quiser editar ou adicionar um nome ao seu webhook, clique no ícone de lápis.

Além disso, se você quiser adicionar mais webhooks, pode clicar no botão rotulado Adicionar Novo Webhook e preencher as configurações para cada conexão adicional.

Abaixo do nome do seu webhook, você verá todas as configurações disponíveis para esta conexão. Detalhamos o que cada uma delas faz abaixo.

URL da Requisição

A URL da Requisição será usada para conectar o WPForms a um aplicativo secundário. Geralmente, você pode obter essa URL da API do serviço ou ferramenta após configurar uma conexão básica.

Método da Requisição

O Método da Requisição permite que você selecione o método HTTP que deseja usar quando sua requisição de webhook for executada.

Existem vários métodos diferentes para escolher, com base no tipo de conexão que você deseja criar:

• GET: O método GET obterá informações de um formulário enviado e enviará os detalhes para um aplicativo conectado.
• POST: O método POST pegará as informações enviadas através do WPForms e as enviará para um serviço secundário.
• PUT: O método PUT permite que você atualize dados quando seu webhook for executado.
• PATCH: O método PATCH permite que você substitua dados quando seu webhook for executado.
• DELETE: O método DELETE permite que você exclua informações quando este webhook específico for executado.

Formato da Requisição

O Formato da Requisição comunicará ao seu servidor qual tipo de dados está sendo enviado através do seu webhook. Isso também definirá o valor do cabeçalho Content-Type para seus dados.

Existem dois tipos diferentes de formato de requisição disponíveis:

• JSON: O método JSON formatará seus dados em um formato application/json e definirá o tipo de conteúdo como charset=utf-8.
• FORM: O método FORM formatará seus dados em um formato application/x-www-form-urlencoded e definirá o tipo de conteúdo como charset=utf-8.

Segredo

A chave Segredo gerará um hash (ou ID exclusivo) para cada solicitação concluída. Isso atua como uma assinatura para verificar a origem da sua solicitação HTTP e estará sempre fornecido no Cabeçalho da Requisição.

Cabeçalhos da Requisição

Os Cabeçalhos da Requisição permitem que você defina a(s) chave(s) e o(s) valor(es) do cabeçalho HTTP a serem enviados com sua solicitação de webhook.

Corpo da Requisição

Semelhante aos Cabeçalhos da Requisição, a configuração do Corpo da Requisição permite que você defina a(s) chave(s) e o(s) valor(es) que serão enviados no corpo da solicitação do seu webhook.

Exemplo: Usando Webhooks para Conectar WPForms ao Slack

Como exemplo, mostraremos como conectar o WPForms à sua conta do Slack usando um webhook.

Criando seu aplicativo Slack

Primeiro, você precisará navegar até a página da API do Slack. Em seguida, clique no botão Criar um aplicativo.

Isso abrirá uma sobreposição onde você precisará selecionar como deseja configurar seu aplicativo. Escolha a opção Do zero.

Você poderá então nomear seu aplicativo e selecionar para qual workspace deseja enviar os dados do formulário. Para nosso exemplo, nomearemos nosso aplicativo Contact Sullie. Clique no botão Criar aplicativo para continuar.

Isso o levará a uma página com algumas informações básicas sobre seu aplicativo. Role para baixo até as configurações Adicionar recursos e funcionalidades e ative a opção Webhooks de entrada.

Depois de ativar a configuração de Webhooks de entrada, alterne a opção Ativar Webhooks de entrada para Ativado. Isso abrirá mais detalhes mais abaixo na página.

Abaixo da seção URLs de Webhook para seu Workspace, clique no botão Adicionar novo Webhook ao Workspace.

Isso o redirecionará para outra sobreposição onde você precisará selecionar um canal do Slack para enviar suas mensagens. Escolha um canal no menu suspenso e clique em Permitir.

Isso o levará de volta à página anterior. Você verá um novo URL na seção URLs de Webhook para seu Workspace. Copie este URL, pois você o usará na próxima etapa.

Certifique-se de manter esta aba ou janela do navegador aberta, pois você precisará das informações nesta área mais tarde.

Adicionando seu Webhook do Slack a um Formulário

Em seguida, você precisará abrir o formulário em que usará seu webhook. Se você ainda não o fez, certifique-se de configurar seu addon de Webhooks no WPForms.

Depois de ativar os webhooks para seu formulário, cole o URL que você copiou do Slack no campo URL da Solicitação para conectar seu formulário à API do Slack.

Em seguida, configure o restante das configurações do webhook. Detalhamos todas as nossas configurações configuradas para este exemplo abaixo:

• Método da Solicitação: Como estaremos enviando dados de nossos formulários para o Slack, definiremos o Método da Solicitação como a opção POST.
• Formato da Solicitação: Definiremos o Formato da Solicitação como JSON padrão.
• Segredo: Para nosso exemplo, deixaremos o campo Segredo em branco e permitiremos que ele seja gerado automaticamente quando nosso webhook for executado. Se você for um desenvolvedor e quiser inserir seu próprio valor de Segredo, pode fazê-lo aqui.
• Cabeçalhos da Solicitação: Não temos nenhum valor específico que precisemos enviar com nossa solicitação, portanto, deixaremos a configuração de Cabeçalhos da Solicitação em branco. Quando o webhook for executado, o Segredo gerado automaticamente será colocado aqui.
• Corpo da Solicitação:
  • Chave: Digite texto no campo de chave do parâmetro Corpo da Requisição, pois o formulário enviará informações em texto simples. Falhar ao inserir texto como valor para este campo provavelmente causará um erro em sua conexão.
  • Selecionar Campo: A configuração Selecionar Campo será o nome do campo cujos dados você deseja enviar. Para nosso exemplo, enviaremos os dados do campo Comentário ou Mensagem para o Slack.

Lembre-se de salvar suas alterações antes de sair do construtor de formulários. Também recomendamos testar seu formulário para garantir que seu webhook esteja funcionando corretamente depois de configurá-lo.

Adicionando Lógica Condicional (Opcional)

Lógica condicional permite que você escolha se uma ação será executada ou não com base nas escolhas de um usuário em seu formulário.

Como exemplo, mostraremos como você pode usar a lógica condicional para enviar uma mensagem ao Slack se um usuário enviar uma entrada em nosso formulário de contato com uma mensagem que contenha a palavra “Ajuda”.

Para configurar isso, você precisará garantir que seu formulário tenha um campo Texto de Linha Única ou Texto de Parágrafo. Para nosso exemplo, adicionaremos um campo de Texto de Parágrafo.

Em seguida, você precisará ajustar o rótulo para o campo de entrada de mensagem. Para nosso exemplo, adicionaremos o rótulo Comentário ou Mensagem.

Em seguida, você precisará configurar sua lógica condicional. Na parte inferior das configurações do webhook do Slack, ative a opção rotulada Habilitar Lógica Condicional para revelar os menus suspensos para criar sua regra.

Em seguida, adicione a regra para sua lógica condicional. Para nosso exemplo, definiremos os menus suspensos para ler, Enviar este webhook se Comentário ou Mensagem contém ajuda.

Como sempre, lembre-se de salvar seu formulário antes de sair do construtor.

Perguntas Frequentes

Estas são algumas das principais perguntas que vemos relacionadas ao add-on Webhooks.

Como posso usar Smart Tags no Cabeçalho da Requisição e no Corpo da Requisição?

Smart Tags podem ser usadas para inserir dinamicamente informações no cabeçalho da requisição e no corpo da requisição do seu formulário.

Para usar Smart Tags, selecione Adicionar Valor Personalizado no menu suspenso Cabeçalhos da Requisição nas configurações do seu webhook, em seguida, adicione a Smart Tag como a chave do parâmetro. Você pode repetir o mesmo passo para a configuração do Corpo da Requisição.

Para uma lista completa de Smart Tags que podem ser usadas, certifique-se de conferir todas as Smart Tags disponíveis no WPForms.

É isso! Agora você sabe como configurar o add-on Webhooks para WPForms.

Em seguida, você está procurando uma maneira de transferir facilmente seus WPForms de um site para outro? Confira nosso tutorial sobre como importar e exportar seus formulários.