Visão geral
Você pode integrar formulários da web do seu próprio site com roteadores de entrada no Apollo, em vez de criar um formulário de captura do zero.
Integrar seus formulários da web permite coletar dados de prospects no seu próprio site enquanto agenda reuniões sem complicações pelos seus roteadores de entrada no Apollo.
Assista à experiência do prospect
O tour a seguir mostra como é simples para um prospect agendar uma reunião com você e sua equipe quando você integra seus formulários da web ao Apollo.
Antes de começar
Os administradores do Apollo precisam concluir a Etapa 1 e a Etapa 2 abaixo. Entre em contato com o administrador da sua equipe para configurar essas definições.
Etapa 3 requer conhecimento de HTML e de uma linguagem de front-end como JavaScript, além de acesso à base de código do seu site. Para concluir essa configuração, entre em contato com o usuário administrador da sua equipe ou com outro ponto de contato da sua organização que tenha as habilidades necessárias.
Se você optar por usar a integração de formulários do site, precisará criar o formulário HTML por conta própria e integrá-lo a um manipulador de envio de formulário fornecido pelo Apollo.
Etapa 1: criar um roteador de entrada
Se ainda não fez isso, crie um roteador de entrada no Apollo.
Seu roteador de entrada deve incluir todos os campos que você quer mapear do formulário da web integrado.
Etapa 2: copiar o snippet JS do Apollo e mapear campos
Depois de criar um roteador de entrada, mapeie os campos entre seu formulário da web e o Apollo. Em seguida, você poderá gerar um snippet em JavaScript para adicionar ao seu site.
- Abra o Apollo e vá para Reuniões > Console de administração > Roteador de entrada.
- Clique no roteador de entrada que você quer integrar ao seu formulário da web.
- Clique em Compartilhar.
- Clique em Integrar com o formulário do seu site.
- Digite os domínios onde seu formulário da web está localizado e pressione
EnterouReturnpara salvá-los. Não inclua/no final dos seus domínios. Você pode adicionar até 5 domínios, incluindo subdomínios. Lembre-se de incluir todas as variações de domínio, comohttps://apollo.ioehttps://www.apollo.io, bem como domínios de ambientes de teste.
- Ative Preencher campos do formulário automaticamente para preencher campos automaticamente com dados do Apollo quando um prospect adicionar o endereço de Email ao seu formulário.
Acesse este artigo para testar como o Apollo preenche automaticamente seu formulário quando um prospect insere o Email.
- Ative Ocultar campos preenchidos automaticamente para ocultar dos prospects os campos que o Apollo preenche automaticamente. Quando você ativa essa configuração, seus prospects veem apenas os campos que ainda precisam preencher. O Apollo recomenda ativar campos ocultos no formulário para evitar que seus prospects fiquem confusos quando o Apollo preencher campos do formulário automaticamente.
Tem mais dúvidas sobre as configurações de enriquecimento de formulários? Confira este artigo para saber mais.
- Mapeie os campos do seu inbound router para os campos do seu formulário da web copiando e colando o atributo
namede cada entrada do formulário. Se um campo do inbound router permitir que os prospects selecionem várias opções, garanta que seu formulário da web ofereça as mesmas opções. Clique em Continuar.
Mapeie todos os campos para garantir que o Apollo direcione seus prospects corretamente. Os nomes dos campos que você fornece diferenciam maiúsculas de minúsculas e precisam corresponder exatamente aos nomes dos campos do seu formulário da web. Por exemplo, se seu formulário da web usar o nome de campo email address, use o nome completo em vez de email ao configurar seu router.
Além disso, formate corretamente o HTML do seu formulário da web. Envolva todas as entradas no elemento form e atribua tags de rótulo relevantes.
- O Apollo gera um Snippet em JavaScript para adicionar ao seu site. Clique em Copiar Snippet para adicioná-lo à sua área de transferência e depois clique em Concluído.
Salve seu Snippet e continue para a Etapa 3 para criar a integração do seu formulário da web.
Etapa 3: crie a integração do seu formulário web
Você precisa do snippet de código da Etapa 2 para criar a integração do seu formulário web. Se você não tiver esse snippet, siga as instruções da Etapa 2 para gerá-lo antes de atualizar seu site.
As seções a seguir trazem os elementos básicos que você pode usar para criar sua integração, desde estabelecer o fluxo básico de envio das entradas do formulário web até definir opções mais avançadas.
Adicione o snippet de JS ao seu site
Adicione o snippet de JavaScript gerado na Etapa 2 ao código do seu site.
No exemplo a seguir, a Apollo adicionou o snippet entre as tags head do HTML de um site.
O snippet não renderiza nada por padrão.
O snippet cria uma window.ApolloMeetings API que pode ser acessada de qualquer lugar no app/console. Você deve usar a API para processar o envio do seu formulário personalizado para a Apollo e, se quiser, usar opções personalizadas.
Integre com o manipulador de envio de formulário do Inbound Router
Depois que o snippet de JS for adicionado ao seu site, você precisará capturar os dados do seu formulário web existente e enviar os resultados para a Apollo.
A forma mais fácil de fazer isso é usar window.ApolloMeetings.submit() sem nenhum parâmetro. Quando nenhum parâmetro é fornecido, as entradas do primeiro elemento de formulário da página web são capturadas. Somente elementos de entrada com atributos name são capturados, e cada nome de entrada precisa corresponder ao nome definido no mapeamento de campos do formulário. Se preferir fornecer manualmente todos os valores dos campos, consulte a seção Personalizações avançadas deste artigo.
<form onsubmit="window.ApolloMeetings.submit(); return false">
Agora você já deve conseguir ver o modal de agendamento de reunião ao enviar o formulário.
(Opcional) Personalize a renderização do widget de agendamento
O método initWidget , que é chamado no snippet de JavaScript fornecido, inicia o fluxo de agendamento da Apollo.
initWidget: ({ appId: string, schedulingLink: string, domElement?: HTMLElement }) = void;
Este widget aceita 3 parâmetros:
- appId: Este é um ID exclusivo fornecido pela Apollo e não pode ser alterado. Ele é gerado junto com o snippet de JavaScript na Apollo.
- schedulingLink: Este é o identificador do seu inbound router. Ele é fornecido pela Apollo e não pode ser alterado.
-
domElement: Por padrão, a Apollo renderiza o widget no final da tag
bodydo seu site. O widget é aberto no envio do formulário. Se você preferir anexar o widget a um elemento DOM diferente, pode definir essa opção aqui.
(Opcional) Adicione integrações com formulários de terceiros
Além dos seus próprios formulários web, você também pode capturar dados de envios de formulários web do HubSpot e do Marketo no seu site e enviar essas entradas para a Apollo. Você ainda precisa adicionar o snippet de JS da Apollo ao seu site.
HubSpot
Para formulários do HubSpot, adicione o snippet a seguir ao seu site. Quando um usuário envia o formulário do HubSpot, os dados são enviados para a Apollo e o fluxo de agendamento é acionado. Os formulários do HubSpot disparam um evento chamado hsFormCallback no objeto window, que contém os valores do formulário do Hubspot integrado ao respectivo site. Um listener desse evento é anexado ao objeto window.
window.addEventListener("message", function(event) {
if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
const lead = event.data.data.submissionValues;
window.ApolloMeetings.submit({
map: false,
lead
});
}
});
Marketo
Para formulários do Marketo, adicione o snippet a seguir ao seu site. Quando um usuário envia o formulário do Marketo, os dados são enviados ao Apollo e o fluxo de agendamento é acionado. Esse snippet anexa a função de envio do Apollo ao método MktoForms2.loadForm.
MktoForms2.loadForm(BASE_URL, MUNCHKIN_ID, FORM_ID, function(form) {
form.onSuccess(function(values) {
window.ApolloMeetings.submit({
map: false,
lead: values
});
return false;
});
});
(Opcional) Personalizações avançadas
Além de usar window.ApolloMeetings.submit() para enviar entradas de formulários web ao Apollo, você pode definir várias opções para personalizar a experiência para você e seus prospects.
formId (String)
Por padrão, o Apollo captura entradas do primeiro formulário web exibido em uma página da web. No entanto, qualquer elemento de uma página que capture a entrada do usuário pode ser um formulário.
Se você tiver vários formulários definidos, formId captura entradas de um formulário específico. Use o atributo id do formulário e adicione-o em window.ApolloMeetings.submit().
const handleFormSubmit = (e) = {
e.preventDefault();
// myForm is the id attribute for the form.
window.ApolloMeetings.submit({formId : "myForm"});
};
map (Boolean) e lead (Object)
Por padrão, map está definido como true, o que significa que o Apollo gerencia automaticamente a extração de dados do seu formulário web. O Apollo usa tags input na estrutura HTML do seu formulário para recuperar as informações necessárias.
Se você optar por fornecer seu objeto de dados diretamente, poderá passá-lo usando a chave lead enquanto mantém a opção map definida como false.
window.ApolloMeetings.submit({
map: false,
lead : {name: state.name, email: state.email}
});
closeOnOutside (Boolean)
O fluxo de agendamento é exibido por meio de um modal pop-up do Apollo. Por padrão, quando um prospect clica na área de fundo cinza fora do pop-up, o modal é fechado.
Para alterar esse comportamento, defina closeOnOutside como true.
window.ApolloMeetings.submit({
closeOnOutside : true
});
preventRedirect (Boolean) e onRedirect (Function)
Ao criar um roteador Inbound no Apollo, você pode escolher enviar prospects para uma URL externa. Essa opção impede que prospects fora do perfil ideal agendem reuniões.
Se o roteador Inbound usar essa opção, você poderá escolher controlar todos os redirecionamentos de URL e enviar prospects para uma URL diferente. Isso pode permitir um acompanhamento melhor de métricas ou o envio de prospects por encurtadores de URL.
Para controlar manualmente o redirecionamento, defina preventRedirect como true. Em seguida, implemente um onRedirect callback para processar a lógica de redirecionamento.
window.ApolloMeetings.submit({
preventRedirect: true,
onRedirect: (url) => {
// You can add custom logic here (such as analytics).
window.location.href = 'https://www.replacethisurl.com';
}
});
onSuccess (Função), onError (Função), e onRouted (Função)
Use estas 3 funções de callback para estender a lógica de envio do formulário.
Defina onSuccess para definir um callback adicional a ser chamado depois que um prospect agendar uma reunião com sucesso. Isso não substitui a lógica fornecida pela integração do Apollo.
Se o inbound router falhar em qualquer etapa, o Apollo retornará o erro específico na resposta. Defina onError para processar o erro.
window.ApolloMeetings.submit({
onError: (error) => {
// Define your additional custom error handler.
},
onSuccess: () => {
// Define your additional success handler.
}
})
Defina onRouted para chamar uma função quando o inbound router determinar o action handler aplicável. Isso acontece quando o botão Submit form é clicado no seu formulário, mas antes de o prospect agendar uma reunião com sucesso ou sem sucesso.
window.ApolloMeetings.submit({
onRouted: (result) => {
// Implement your custom logic here (such as analytics).
}
})
onRouted fornece detalhes sobre se uma ação foi alcançada com sucesso no inbound router e, em caso afirmativo, qual ação foi alcançada.