Quando um novo cliente se inscreve em seus serviços, o tempo entre o contrato e um site WordPress provisionado é importante. O MyKinsta facilita a criação e o gerenciamento de sites WordPress, mas as agências que lidam com muitos projetos de clientes frequentemente procuram formas de automatizar tarefas repetitivas de configuração.
A API da Kinsta permite que você automatize partes desse processo. Neste tutorial, você conecta um formulário de cadastro de clientes do HubSpot à API da Kinsta por meio de um aplicativo middleware em Node.js. Quando um contato envia o formulário, o middleware recebe os dados, chama a API da Kinsta e provisiona automaticamente um site WordPress.
Por que as agências devem automatizar o provisionamento de sites
Uma configuração manual do site introduz atrasos justamente no momento do relacionamento com o cliente em que o ritmo é mais importante. Novos cadastros exigem que alguém crie um ambiente de hospedagem, configure o WordPress, gere credenciais e as comunique de volta ao cliente.
O MyKinsta simplifica essas tarefas, mas quando o processo depende da disponibilidade de um membro da equipe para concluir cada etapa, ainda podem ocorrer atrasos.
A Straight out Digital (Sod), uma agência digital que gerencia centenas de sites de clientes na Kinsta, usa a API da Kinsta para criar ferramentas internas personalizadas que transformam o provisionamento e a manutenção em fluxos de trabalho automatizados. Em vez de repetir as mesmas etapas de configuração para cada novo site, a Sod aciona o processo de forma programática. O resultado, como a equipe descreve, é que “o que poderia ser uma operação demorada se tornou simples”
Ao conectar o HubSpot à API da Kinsta, você obtém um resultado semelhante. Quando um cliente envia seu formulário de cadastro, a HubSpot envia um webhook, seu middleware recebe os dados do contato e a API da Kinsta inicia o processo de criação do site.
Dessa forma, a transição de lead para um ambiente WordPress provisionado acontece automaticamente, reduzindo o trabalho manual envolvido no onboarding de novos clientes.
Primeiros passos
Para seguir este tutorial, você precisa de:
- Pelo menos um site existente em sua conta Kinsta. Isso garante que o acesso à API esteja disponível.
- Uma conta no HubSpot com um formulário configurado para capturar inscrições de clientes. Observe que os fluxos de trabalho de webhook estão disponíveis apenas em determinados planos premium da HubSpot.
- Node.js 18 ou posterior instalado localmente.
Você pode gerar uma chave API da Kinsta no painel MyKinsta. Navegue até Configurações da empresa > Chaves API e clique em Criar chave API.
Defina uma data de expiração, dê um nome à chave e clique em Gerar. Como o MyKinsta só exibe a nova chave API apenas uma vez, armazene-a em um local seguro.
Você também precisa do ID da sua empresa. Você pode recuperá-lo na URL do MyKinsta enquanto estiver conectado ou fazendo uma solicitação ao endpoint /sites quando sua chave API estiver ativa.
Armazene ambos os valores em um arquivo .env na raiz do seu projeto:
KINSTA_API_KEY=your_api_key_here
KINSTA_COMPANY_ID=your_company_id_hereComo integrar o HubSpot com a Kinsta usando a API da Kinsta
Assim como ao usar a API da Kinsta com o Slack, você pode configurar uma integração em que o envio de um formulário no HubSpot aciona um webhook, um aplicativo Node.js recebe os dados do contato, chama a API da Kinsta para criar um site WordPress e consulta a API até que o site esteja ativo.
Você constrói isso em cinco etapas: configuração do HubSpot, configuração do middleware, autenticação da API, criação do site e monitoramento da operação.
1. Configurar seu formulário e workflow no HubSpott
No painel da HubSpot, crie ou selecione o formulário que captura as inscrições de novos clientes em Marketing > Form.
No mínimo, o formulário precisa de campos para nome, endereço de e-mail e nome da empresa. Esses valores são mapeados para os parâmetros que você passará para a API da Kinsta mais tarde.
Com seu formulário pronto, vá até Automation > Workflows no menu de navegação do HubSpot e clique em Create workflow no canto superior direito.
Em seguida, selecione Start from scratch. Isso abre o editor de workflow. Clique no gatilho e escolha Form submission como o gatilho de cadastro.
Em seguida, selecione seu formulário no menu suspenso Form submission e conclua a configuração. O HubSpot agora inscreve um contato no workflow sempre que alguém envia o formulário.
Com o gatilho configurado, o canvas do workflow exibe uma nova ação. Clique em Data Ops > Send a webhook, defina o método como POST e insira uma URL placeholder por enquanto. Depois que você implantar seu aplicativo Node.js, atualize a URL para o seu endpoint ativo.
O HubSpot envia um payload JSON para a URL do webhook quando o workflow é executado. O payload inclui as propriedades do contato, com os valores dos campos do formulário aparecendo sob seus nomes internos de propriedades do HubSpot. Você pode confirmar o nome interno de qualquer campo no HubSpot em Settings > Properties, verificando o painel de detalhes da propriedade.
2. Criar o endpoint de middleware
O HubSpot pode enviar um webhook para uma URL quando um contato envia seu formulário, mas não tem como se comunicar diretamente com a API da Kinsta. Em vez disso, uma camada de middleware recebe o payload do HubSpot, extrai os dados do contato necessários, reformata essas informações e as envia para a API da Kinsta.
O Express.js é um framework web mínimo para Node.js que facilita a criação de um servidor HTTP como este. Ele lida com requisições recebidas, permite definir rotas e fornece acesso ao corpo da requisição com configuração mínima. Você pode instalá-lo após inicializar um novo projeto Node.js:
npm init -y
npm install express dotenv
O express fornece o servidor e a camada de roteamento, enquanto o dotenv carrega seu arquivo .env em process.env para que sua chave API e o ID da empresa estejam disponíveis para o aplicativo em tempo de execução.
Seu servidor está em um arquivo app.js. Ele inicia o Express, diz a ele para analisar os corpos de solicitação de entrada como JSON, define uma rota com solicitações POST da HubSpot e inicia o servidor em uma porta local.
Este exemplo assume Node.js 18 ou superior, que inclui suporte nativo a fetch.
// app.js
const express = require('express');
require('dotenv').config();
const app = express();
app.use(express.json());
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
app.post('/new-site', async (req, res) => {
const event = Array.isArray(req.body) ? req.body[0] : req.body;
const displayName = event?.properties?.company;
const adminEmail = event?.properties?.email;
if (!displayName || !adminEmail) {
return res.status(400).json({ message: 'Missing required fields' });
}
// Kinsta API call goes here
res.status(200).json({ message: 'Received' });
});
app.listen(3000, () => console.log('Server running on port 3000'));
A linha app.use(express.json()) instrui o Express para analisar os corpos das solicitações de entrada como JSON. Sem ela, req.body retorna undefined.
A rota lê os dados de contato da carga do webhook, extrai o nome da empresa e o e-mail do administrador e valida se ambos os valores estão presentes antes de continuar.
O operador de encadeamento opcional ?. lida com casos em que a estrutura da carga útil é diferente do que você espera. Em vez de lançar um erro que poderia travar o servidor, ele retorna undefined com segurança se uma propriedade estiver faltando.
3. Autenticar com a API da Kinsta
A API da Kinsta usa autenticação de token Bearer. Cada solicitação que você envia inclui sua chave API no headerAuthorization. A API usa essa chave para identificar sua conta e verificar seu nível de acesso.
A chamada require('dotenv').config() na parte superior do app.js carrega seu arquivo .env quando o aplicativo é iniciado. Isso permite que process.env.KINSTA_API_KEY seja resolvido de acordo com sua chave de API real em tempo de execução.
Defina a URL base e os headers como constantes no topo do app.js após a configuração do dotenv:
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.KINSTA_API_KEY}`
};
Definir os headers como uma constante mantém o código consistente em todas as chamadas à API dentro do aplicativo e facilita a rotação de chaves. Atualizar o valor no seu arquivo .env e reiniciar o servidor elimina a necessidade de procurar manualmente todos os locais onde a chave aparece no código.
O ID da sua empresa não vai para o header Authorization. Em vez disso, você o inclui no corpo da solicitação ao criar um site.
4. Criar o site WordPress via API da Kinsta
Com a autenticação configurada, você pode fazer a requisição de criação do site. O endpoint /sites da API da Kinsta aceita uma solicitação POST com os detalhes do site que você deseja criar e o coloca na fila para provisionamento. Em vez de esperar que o site esteja pronto antes de responder, a API retorna imediatamente com uma referência que você usa para rastrear a operação.
Dentro da rota /new-site, substitua o comentário do espaço reservado pelo seguinte:
const response = await fetch(`${KinstaAPIUrl}/sites`, {
method: 'POST',
headers,
body: JSON.stringify({
company: process.env.KINSTA_COMPANY_ID,
display_name: displayName,
region: 'us-central1',
install_mode: 'new',
admin_email: adminEmail,
admin_password: process.env.WP_ADMIN_PASSWORD,
admin_user: 'admin',
site_title: displayName
})
});
const data = await response.json();Os parâmetros obrigatórios são company, display_name, region, install_mode, admin_email, admin_password, admin_user e site_title. Se você definir install_mode como "new", a API criará uma nova instalação. O valor region corresponde ao identificador de região de um centro de dados da Kinsta.
Se você provisionar sites com WooCommerce ou Yoast SEO pré-instalados, a API suporta parâmetros opcionais para ambos. Quando você adiciona woocommerce: true ou wordpressseo: true ao corpo da solicitação, a API instala esses plugins como parte do processo de criação do site. O site provisionado já é entregue com seu stack padrão de plugins configurado.
Uma solicitação bem-sucedida retorna um código de status 202 e não 200. O código 202 informa a você que a API aceitou a solicitação e colocou a operação na fila, mas isso não significa que o site está pronto. A criação do site Kinsta é executada de forma assíncrona, portanto o corpo da resposta contém um operation_id que você usa para verificar o progresso do provisionamento em vez de retornar os detalhes do site concluído.
5. Monitorar o status da operação
Como a criação do site é executada de forma assíncrona, você precisa pesquisar o endpoint /operations/{operation_id} para verificar quando o site está pronto. A API retorna o status atual da operação sempre que você a chama. Quando esse status muda para completed, a resposta inclui detalhes sobre o novo site.
Pegue o operation_id da resposta de criação do site e passe-o para uma função de pesquisas (polling):
const pollOperation = (operationId) => {
const interval = setInterval(async () => {
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{ method: 'GET', headers }
);
const result = await resp.json();
if (result.status === 'completed') {
clearInterval(interval);
console.log('Site ready:', result);
}
}, 30000);
};A função faz pesquisas a cada 30 segundos. A API da Kinsta permite até 120 solicitações por minuto, com um limite inferior de 5 solicitações por minuto para endpoints de criação de recursos, como a criação de sites. Fazer polling no endpoint de operações a cada 30 segundos mantém você bem dentro desses limites, enquanto ainda verifica o progresso em um intervalo razoável.
Você também precisa extrair o valor operation_id e passá-lo para pollOperation(). Adicione o seguinte no final da rota app.post:
const operationId = data.operation_id;
pollOperation(operationId);Quando a operação for concluída, a resposta conterá os detalhes do novo site. Você pode testar isso localmente executando node app.js em seu terminal. Depois que você implantar o aplicativo, substitua a URL do webhook de espaço reservado no seu fluxo de trabalho do HubSpot pelo seu endpoint ativo.
Automatizando o onboarding de clientes da sua agência com HubSpot e Kinsta
Com a integração em funcionamento, um novo ambiente WordPress começa a ser provisionado assim que um cliente envia seu formulário de cadastro no HubSpot. O middleware recebe os dados do contato, os envia para a API da Kinsta e monitora a operação até que o site esteja pronto. Essa abordagem ajuda a automatizar a etapa inicial de configuração do site, enquanto sua equipe continua gerenciando os sites pelo MyKinsta.
Para tornar o middleware acessível ao HubSpot, implemente o aplicativo para que ele tenha um endpoint público. Plataformas como a Sevalla (um produto Kinsta) podem hospedar aplicativos Node.js como esse. Quando o aplicativo estiver ativo, atualize a URL do webhook no seu fluxo de trabalho do HubSpot para apontar para o endpoint implantado.
Para a hospedagem gerenciada para WordPress da Kinsta, o acesso à API está disponível em todas as contas assim que você gerar uma chave API no MyKinsta.
