4.2 Modo Experto (Integración Manual) ⚙️

El poder bajo tu control. El Modo Experto está diseñado para desarrolladores y diseñadores web que quieren usar TMS Optin como motor ("backend"), pero prefieren diseñar su propio formulario con código personalizado en HTML/CSS o constructores como Elementor, Divi o Bricks.

1. Configuración Compartida

Aunque uses el Modo Experto, la lógica del negocio sigue siendo la misma. Por eso, las siguientes secciones funcionan exactamente igual que en el Modo Automático:

2. Diferencias Clave: Automático vs. Experto

Es vital elegir la herramienta correcta para el trabajo. Aquí te explicamos cuándo usar cada una.

3. Guía de Implementación Técnica 👨‍💻

Para activar el "Modo Motor" (Engine Mode), sigue estos pasos estrictos. TMS Optin escuchará cualquier formulario que cumpla con este contrato.

A. Configuración del Formulario HTML

Tu formulario debe tener la clase tms-engine-form y los campos con los nombres (name) correctos.

<form class="tms-engine-form">
    <!-- 1. Campos Visibles -->
    <input type="text" name="name" placeholder="Tu Nombre" required>
    <input type="email" name="email" placeholder="Tu Email" required>

    <!-- 2. Conexión con el Plugin (Engine Fields) -->
    <?php if(function_exists('tms_render_engine_fields')) { 
        tms_render_engine_fields('slug-de-tu-campana'); 
    } ?>

    <button type="submit">Enviar</button>
    
    <!-- Spinner Opcional (El JS busca esta clase) -->
    <div class="tms-engine-loader" style="display:none;">Cargando...</div>
</form>

B. Escuchando Eventos (JavaScript)

El plugin no mostrará mensajes de éxito/error en tu diseño personalizado (porque no sabe dónde ponerlos). En su lugar, despacha eventos JavaScript para que tú decidas qué hacer.

document.querySelector('.tms-engine-form').addEventListener('tms:submit_success', function(e) {
    // e.detail contiene los datos del servidor
    console.log('¡Éxito!', e.detail.message);
    
    // Ejemplo: Redirigir o mostrar modal
    alert(e.detail.message);
    this.reset(); // Limpiar formulario
});

document.querySelector('.tms-engine-form').addEventListener('tms:submit_error', function(e) {
    console.error('Error:', e.detail.message);
    alert('Error: ' + e.detail.message);
});