Configurar newsletter, contacto y mapa

Qué vas a lograr

• Insertar los bloques Newsletter, Formulario y Google Maps en una página del Page Builder v2.
• Configurar el bloque Newsletter con su texto, placeholder, botón y mensaje de éxito.
• Entender que el bloque Formulario tiene campos fijos y que Google Maps depende de una dirección manual y de una API Key válida.

Paso a paso en Flobu

Cómo funciona la interfaz de Flobu en este tutorial

• Menú lateral: para este tutorial ya debes estar dentro del Page Builder v2, trabajando sobre una página con al menos una sección disponible.
• Panel central: usarás el canvas para revisar la vista previa del Newsletter, del Formulario y del Google Maps, y para editar el título del mapa.
• Acciones clave: insertarás los bloques desde Añadir o Agregar bloque, y luego usarás el inspector derecho para configurar los campos que cada bloque realmente expone.
• Alcance de este tutorial: aquí te enfocarás en estos tres bloques del editor. No configurarás audiencias de Mailchimp, no cambiarás el destinatario del formulario desde esta pantalla y no administrarás claves de Google Maps desde el bloque.

1) Insertar y configurar el bloque Newsletter

1. Abre una página dentro del Page Builder v2.
2. Ubica la sección donde quieras cerrar una landing, captar correos o reforzar una llamada a la acción.
3. Haz clic en Agregar bloque o abre la pestaña Añadir.
4. Busca Newsletter y agrégalo.
5. Haz clic sobre el bloque para abrir su configuración en el inspector derecho.
6. En el panel Contenido verás estos campos reales:
   • Título
   • Subtítulo
   • Placeholder
   • Texto del botón
   • Mensaje de éxito
7. Título y Subtítulo usan el editor de texto enriquecido del panel lateral.
8. Placeholder, Texto del botón y Mensaje de éxito se escriben como texto simple.
9. En el canvas verás una vista previa del formulario con un campo de correo y un botón. Esa vista previa no ejecuta la suscripción real desde el editor; el comportamiento real ocurre en la tienda publicada.
10. Cuando el sitio está en vivo, este bloque envía el email al endpoint de suscripción usando el contexto de la tienda. Si el correo es válido, Flobu registra la suscripción y muestra el Mensaje de éxito.
11. Un matiz importante: este bloque no sirve para conectar ni elegir la audiencia de Mailchimp, ni decide si habrá automatizaciones externas. Lo que sí hace Flobu es registrar o actualizar el cliente de la tienda con consentimiento de marketing, por lo que este bloque funciona aunque todavía no hayas configurado Mailchimp.
12. Cuando termines, revisa el texto en Escritorio, Tablet y Móvil.

Resultado esperado:

• Configuraste el bloque Newsletter con sus textos visibles y su mensaje de éxito.
• Entendiste que en vivo el bloque registra la suscripción de la tienda, pero no configura audiencias ni integraciones desde este panel.

2) Configurar el bloque Formulario y entender sus límites reales

1. Inserta un nuevo bloque desde Agregar bloque o Añadir.
2. Busca Formulario y agrégalo.
3. Haz clic sobre el bloque para abrir el inspector derecho.
4. En la interfaz actual solo verás dos campos configurables:
   • Título
   • Subtítulo
5. Ambos usan editor enriquecido en el panel lateral.
6. En el canvas verás inmediatamente el formulario completo con tres campos fijos: Tu correo, Tu nombre y Tu mensaje. También muestra un botón fijo con el texto Enviar mensaje.
7. Este es el límite clave del producto: desde el Page Builder no puedes cambiar esas etiquetas, agregar más campos ni cambiar el texto del botón. Tampoco puedes elegir desde este bloque a qué correo se enviarán los mensajes.
8. En la implementación actual, cuando el formulario se usa en la tienda publicada, Flobu lo envía al correo del dueño de la tienda usando el contexto del branch. Además, el mensaje sale con reply-to del correo que escribió el cliente.
9. En el editor, el canvas sirve solo como vista previa de estructura y estilo. Si quieres validar el envío real, tendrás que revisar la página publicada.
10. Este bloque funciona como formulario simple de contacto para la tienda y no reemplaza otros sistemas como soporte por WhatsApp, tickets o formularios avanzados.

Resultado esperado:

• Configuraste el Título y Subtítulo del bloque Formulario.
• Entendiste que los campos visibles y el botón son fijos, y que el destinatario del mensaje no se define desde el editor.

3) Configurar Google Maps y validar que se vea en vivo

1. Inserta un nuevo bloque desde Agregar bloque o Añadir.
2. Busca Google Maps y agrégalo.
3. Haz clic sobre el bloque para abrir su configuración.
4. En el inspector derecho verás estos campos reales:
   • Dirección o Lugar (Query)
   • Zoom
   • Altura (px)
   • Tipo de mapa
5. En Dirección o Lugar (Query) escribe la dirección o lugar que quieres mostrar. Este punto es importante: el bloque no toma automáticamente la dirección de una sucursal; debes escribirla manualmente.
6. Ajusta Zoom según qué tan cerca o lejos quieras ver el mapa.
7. Define Altura (px) para que el bloque tenga el espacio adecuado dentro de la página.
8. En Tipo de mapa puedes elegir entre Mapas de carreteras y Satélite.
9. El título del bloque se comporta de forma distinta a otros componentes: no se edita desde el inspector lateral, sino directamente en el canvas, sobre el mapa.
10. Hay un límite real importante: aunque el modelo del bloque soporta otros datos técnicos, la interfaz actual no expone edición de mode, center, language ni region.
11. Requisito clave: para que el mapa se vea correctamente, la tienda necesita una NEXT_PUBLIC_GOOGLE_MAPS_API_KEY válida en el entorno. Si esa clave falta, en el editor verás el aviso Google Maps API Key missing. En la tienda publicada, si no hay API Key o no existe una dirección válida, el bloque puede no renderizarse.
12. Por eso conviene validar el resultado final no solo en el editor, sino también en la página publicada.
13. Revisa además el bloque en Escritorio, Tablet y Móvil para confirmar que la altura elegida sigue siendo cómoda.

Resultado esperado:

• Configuraste un bloque Google Maps con dirección, zoom, altura y tipo de mapa coherentes.
• Entendiste que el mapa no toma automáticamente datos de sucursal y que depende de una API Key válida para mostrarse correctamente.

Checklist final rápido

• Inserté el bloque Newsletter.
• Configuré Título, Subtítulo, Placeholder, Texto del botón y Mensaje de éxito.
• Entendí que Newsletter registra suscriptores de la tienda y no configura Mailchimp desde este bloque.
• Inserté el bloque Formulario.
• Configuré Título y Subtítulo del formulario.
• Entendí que las etiquetas de campos y el botón del formulario son fijos en la interfaz actual.
• Inserté el bloque Google Maps.
• Completé Dirección o Lugar (Query).
• Ajusté Zoom, Altura (px) y Tipo de mapa.
• Revisé los tres bloques en Escritorio, Tablet y Móvil, y consideré validar el resultado también en la página publicada.

Errores comunes

• Buscar "Contacto" o "Mapa" como nombres exactos dentro de la biblioteca. En la UI real los bloques aparecen como Formulario, Newsletter y Google Maps.
• Pensar que el bloque Newsletter conecta por sí solo Mailchimp o permite elegir una audiencia. Ese bloque solo captura la suscripción de la tienda; la integración externa se configura aparte.
• Esperar que el Formulario permita cambiar el texto del botón, agregar campos o definir el destinatario desde el editor. En la interfaz actual eso no está disponible.
• Suponer que Google Maps toma automáticamente la dirección de una sucursal. Debes escribir manualmente la dirección o el lugar en Dirección o Lugar (Query).
• Intentar cambiar el título del mapa desde el inspector derecho. En este bloque el título se edita directamente en el canvas.
• Probar el mapa sin una API Key válida y pensar que el bloque está roto. Si falta la clave de Google Maps, el editor y la tienda publicada no podrán mostrarlo correctamente.