Integra tus formularios web con Meetings

Descripción general

Puedes integrar formularios web de tu propio sitio web con routers de Inbound en Apollo, en lugar de crear un formulario de captación desde cero.

Integrar tus formularios web te permite recopilar datos de prospectos en tu propio sitio web mientras agendas reuniones sin problemas a través de tus routers de Inbound en Apollo.

Volver arriba

Ver la experiencia del prospecto

El siguiente recorrido muestra lo sencillo que es para un prospecto reservar una reunión contigo y tu equipo cuando integras tus formularios web con Apollo.

Volver arriba

Antes de comenzar

Los administradores de Apollo deben completar el Paso 1 y el Paso 2 a continuación. Contacta al administrador de tu equipo para configurar estas opciones.

Paso 3 requiere conocimientos de HTML y de un lenguaje de front-end como JavaScript, además de acceso al código fuente de tu sitio web. Para completar esta configuración, contacta al usuario administrador de tu equipo o a otro contacto de tu organización que tenga las habilidades necesarias.

Si eliges usar la integración de formularios del sitio web, debes crear tú mismo el formulario HTML e integrarlo con un controlador de envío de formularios proporcionado por Apollo.

Volver arriba

Paso 1: Crea un router de Inbound

Si aún no lo has hecho, crea un router de Inbound en Apollo.

Tu router de Inbound debe incluir todos los campos que quieres mapear desde tu formulario web integrado.

Volver arriba

Paso 2: Copia el Snippet JS de Apollo y mapea campos

Una vez que crees un router de Inbound, mapea los campos entre tu formulario web y Apollo. Luego, puedes generar un snippet de JavaScript para agregarlo a tu sitio web.

1. Abre Apollo y ve a Reuniones > Consola de administración > Router de Inbound.
2. Haz clic en el router de Inbound que quieres integrar con tu formulario web.

3. Haz clic en Compartir.

4. Haz clic en Integrar con el formulario de tu sitio web.

5. Escribe los dominios donde se encuentra tu formulario web y luego presiona Enter o Return para guardarlos. No incluyas / al final de tus dominios. Puedes agregar hasta 5 dominios, incluidos los subdominios. Recuerda incluir todas las variaciones del dominio, como https://apollo.io y https://www.apollo.io, así como los dominios de los entornos de prueba.

6. Activa Completar automáticamente los campos del formulario para completar los campos automáticamente con datos de Apollo cuando un prospecto agregue su dirección de email en tu formulario.

7. Activa Ocultar campos completados automáticamente para ocultar a los prospectos los campos que Apollo completa automáticamente. Cuando habilitas esta configuración, tus prospectos solo ven los campos que aún necesitan completar. Apollo recomienda habilitar los campos ocultos del formulario para evitar que tus prospectos se confundan cuando Apollo completa automáticamente los campos del formulario.

8. Asigna los campos de tu inbound router a los campos de tu formulario web copiando y pegando el atributo name de cada entrada del formulario. Si un campo del inbound router permite que los prospectos seleccionen varias opciones, asegúrate de que tu formulario web ofrezca las mismas opciones. Haz clic en Continuar.

9. Apollo genera un Snippet de JavaScript para agregar a tu sitio web. Haz clic en Copiar Snippet para agregarlo a tu portapapeles y luego haz clic en Listo.

Guarda tu Snippet y continúa al paso 3 para crear la integración de tu formulario web.

Volver arriba

Paso 3: Crea la integración de tu formulario web

Las siguientes secciones incluyen los componentes que puedes usar para crear tu integración, desde establecer el flujo básico para pasar los registros del formulario web hasta definir opciones más avanzadas.

Volver arriba

Agrega el snippet de JS a tu sitio web

Agrega el snippet de JavaScript generado en Paso 2 al código de tu sitio web.

En el siguiente ejemplo, Apollo agregó el snippet entre las etiquetas head del HTML de un sitio web.

El snippet no renderiza nada de forma predeterminada.

El snippet crea una API de window.ApolloMeetings a la que se puede acceder desde cualquier lugar de la app/consola. Debes usar la API para gestionar el envío de tu formulario personalizado a Apollo y, si lo deseas, usar opciones personalizadas.

Volver arriba

Integra con el controlador de envío de formularios del Inbound Router

Después de agregar el snippet de JS a tu sitio web, debes capturar los datos de tu formulario web existente y pasar los resultados a Apollo.

La forma más fácil de hacerlo es usar window.ApolloMeetings.submit() sin ningún parámetro. Cuando no se proporcionan parámetros, se capturan los registros del primer elemento de formulario en la página web. Solo se capturan los elementos input con atributos name y cada nombre de input debe coincidir con el nombre definido en el mapeo de campos del formulario. Si prefieres proporcionar manualmente todos los valores de los campos, consulta la sección Personalizaciones avanzadas de este artículo.

<form onsubmit="window.ApolloMeetings.submit(); return false">

Ahora deberías poder ver el modal de reserva de reuniones al enviar el formulario.

Volver arriba

(Opcional) Personaliza el renderizado del widget de reservas

El método initWidget , que se invoca en el snippet de JavaScript proporcionado, inicia el flujo de programación desde Apollo.

initWidget: ({ appId: string, schedulingLink: string, domElement?: HTMLElement }) = void;

Este widget acepta 3 parámetros:

• appId: Este es un ID único proporcionado por Apollo y no se puede cambiar. Se genera junto con el snippet de JavaScript en Apollo.
• schedulingLink: Este es el identificador de tu inbound router. Lo proporciona Apollo y no se puede cambiar.
• domElement: De forma predeterminada, Apollo renderiza el widget al final de la etiqueta body de tu sitio web. El widget se abre al enviar el formulario. Si prefieres adjuntar el widget a otro elemento del DOM, puedes definir esa opción aquí.

Volver arriba

(Opcional) Agrega integraciones de formularios de terceros

Además de tus propios formularios web, también puedes capturar datos de envíos de formularios web de HubSpot y Marketo en tu sitio web y pasar esos registros a Apollo. Igual necesitas agregar el snippet de JS de Apollo a tu sitio web.

HubSpot

Para los formularios de HubSpot, agrega el siguiente snippet a tu sitio web. Cuando un usuario envía el formulario de HubSpot, los datos se pasan a Apollo y se activa el flujo de programación. Los formularios de HubSpot envían un evento llamado hsFormCallback en el objeto window, que tiene los valores del formulario de Hubspot integrado en el sitio web correspondiente. Se adjunta un listener a este evento en el 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 los formularios de Marketo, agrega el siguiente snippet a tu sitio web. Cuando un usuario envía el formulario de Marketo, los datos se pasan a Apollo y se activa el flujo de programación. Este snippet adjunta la función de envío de Apollo al 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;
  });
});

Volver arriba

(Opcional) Personalizaciones avanzadas

Además de usar window.ApolloMeetings.submit() para pasar entradas de formularios web a Apollo, puedes configurar varias opciones para personalizar la experiencia para ti y tus prospectos.

formId (String)

De forma predeterminada, Apollo captura las entradas del primer formulario web que aparece en una página web. Sin embargo, cualquier elemento de una página web que capture entradas del usuario podría ser un formulario.

Si tienes varios formularios definidos, formId captura las entradas de un formulario específico. Usa el atributo id del formulario y agrégalo en window.ApolloMeetings.submit().

const handleFormSubmit = (e) = {
    e.preventDefault();
    // myForm is the id attribute for the form.
    window.ApolloMeetings.submit({formId : "myForm"});
};

map (Boolean) y lead (Object)

De forma predeterminada, map está configurado en true, lo que significa que Apollo gestiona automáticamente la extracción de datos de tu formulario web. Apollo usa etiquetas input dentro de la estructura HTML de tu formulario para recuperar la información necesaria.

Si eliges proporcionar directamente tu objeto de datos, puedes pasarlo usando la clave lead mientras mantienes la opción map configurada en false.

window.ApolloMeetings.submit({
    map: false, 
    lead : {name: state.name, email: state.email}
});

closeOnOutside (Boolean)

El flujo de programación se muestra mediante un modal emergente de Apollo. De forma predeterminada, si un prospecto hace clic en el área de fondo gris fuera de la ventana emergente, el modal se cierra.

Para cambiar este comportamiento, configura closeOnOutside en true.

window.ApolloMeetings.submit({
    closeOnOutside : true
});

preventRedirect (Boolean) y onRedirect (Function)

Al crear un router inbound en Apollo, puedes elegir enviar prospectos a una URL externa.

Si el router inbound usa esta opción, puedes elegir tomar el control de todos los redireccionamientos de URL y enviar a los prospectos a una URL diferente. Esto puede permitirte hacer un mejor seguimiento de métricas o hacer que los prospectos pasen por acortadores de URL.

Para controlar manualmente el redireccionamiento, configura preventRedirect en true. Luego, implementa un onRedirect callback para gestionar la lógica de redirección.

window.ApolloMeetings.submit({
    preventRedirect: true,
    onRedirect: (url) => {
      // You can add custom logic here (such as analytics).
      window.location.href = 'https://www.replacethisurl.com';
    }
});

onSuccess (Función), onError (Función), y onRouted (Función)

Usa estas 3 funciones callback para extender la lógica de envío del formulario.

Configura onSuccess para definir un callback adicional que se ejecutará después de que un prospecto haya programado una reunión correctamente. Esto no reemplaza la lógica proporcionada por la integración de Apollo.

Si el inbound router falla en cualquier momento, Apollo devuelve el error específico en la respuesta. Configura onError para gestionar el error.

window.ApolloMeetings.submit({
    onError: (error) => {
      // Define your additional custom error handler.
    },
    onSuccess: () => {
      // Define your additional success handler.
    }
})

Configura onRouted para llamar a una función cuando el inbound router haya determinado el controlador de acción aplicable. Esto ocurre cuando se hace clic en el botón Submit form dentro de tu formulario, pero antes de que el prospecto haya programado una reunión correctamente o no.

window.ApolloMeetings.submit({
    onRouted: (result) => {
      // Implement your custom logic here (such as analytics).
    }
})

onRouted proporciona detalles sobre si se alcanzó correctamente una acción en el inbound router y, de ser así, qué acción se alcanzó.

Volver arriba