Envío de un formulario por AJAX a Connectif

En algunos casos surge la necesidad de integrar en Connectif formularios de tipo "formularios integrados" que funcionan mediante AJAX en nuestra tienda. Al no utilizarse el submit nativo del navegador el envío de formulario no es detectado por Connectif por defecto. En estos casos es necesario integrar el evento de submit. 

Su implementación consiste en utilizar el JavaScript de Connectif para enviar los datos.

connectif.managed.sendEvents(events, options)

Utilizando la función connectif.managed.sendEvents puedes notificar a Connectif de cualquier evento, y en este caso concreto el de submit del formulario. Ejemplo:

connectif.managed.sendEvents(
    [
        {
            type: 'form-submitted',
            formId: 'ID_DEL_FORMULARIO_INTEGRADO_DE_CONNECTIF',
            primaryKeyField: 'mi_campo_email',
            payload: {
                mi_campo_email: 'test@example.org',
                mi_campo1: 1234,
                nombre: 'Test',
                campo2: 'Esto es una prueba'
            }
        }
    ]
)

Nota

En el caso de ser un formulario de Alta (es decir, que solicita el email a tus contactos), el campo "primaryKeyField" es requerido y su valor es el nombre del campo en el payload que contendrá el email que está haciendo submit del formulario. Si el formulario no es de tipo Alta (es decir, si no solicita el email), entonces no es necesario indicar en el campo "primaryKeyField".

¿Qué pasa si mi Formulario no es detectado por Connectif?

Existen casos donde los Formulario Integrados de Connectif no pueden detectar formularios en tu web. Ejemplos:

  • El formulario está en una página que requiere autenticación
  • El formulario se construye de forma dinámica via javascript

En estos casos la opción recomendada es crear un evento de Integración personalizada para recibir datos en Connectif. Para ello, necesitas crear primero al menos una nueva Integración Personalizada. Una vez esté creada, puedes crear un nuevo Evento de recepción de datos en la pestaña Recibir Datos:

new-custom-integration.png

Este se crea estableciéndole un nombre y definiendo el nombre y el tipo de los campos que se van a enviar. Ejemplo:

in-event.png

Al pulsar Guardar, pulsa sobre Volver al listado de eventos. Entonces podrás ver el identificador del evento recién creado:

custom-integration.png

Usa dicho identificador en el campo "eventId" del ejemplo de código que hay a continuación para realizar la notificación de este evento a Connectif:

connectif.managed.sendEvents(
    [
        {
            type: 'custom',
            eventId: 'ID_DEL_EVENTO_PERSONALIZADO_DE_RECEPCIÓN',
            payload: {
                mi_campo_email: 'test@example.org',
                mi_campo1: 1234,
                nombre: 'Test',
                campo2: 'Esto es una prueba'
            }
        }
    ]
)

Nota

aquí no es necesario indicar un "primaryKeyField" dentro del evento, sino que el campo de la clave primaria se establece en el campo "mi_campo_email" del evento personalizado cuando lo creaste.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0