Integraciones

El módulo Integraciones te permite conectar servicios externos y herramientas con tu sitio web en MGPanel. Desde pasarelas de pago hasta frameworks de diseño, aquí gestionas todas las conexiones que amplían las capacidades de tu plataforma sin necesidad de programar desde cero.

1. ¿Qué es el módulo de Integraciones? 🔌

El módulo Integraciones es tu centro de conexión con servicios externos y herramientas complementarias. A diferencia de otros módulos que crean contenido o gestionan datos, aquí configuras cómo tu sitio web se conecta con servicios de terceros para agregar funcionalidades avanzadas.

• Para dueños de negocio y marketing: conecta pasarelas de pago para recibir pagos online, integra servicios de facturación electrónica,, o activa herramientas de análisis para entender mejor a tus visitantes.
• Para desarrolladores: configura APIs, frameworks de diseño, librerías JavaScript y plugins que necesitas para construir funcionalidades personalizadas en tu sitio web.

El módulo organiza las integraciones en tres categorías principales:

• Frameworks de diseño: herramientas para crear interfaces visuales modernas.
• Librerías y plugins: componentes y funcionalidades adicionales para tu sitio.
• APIs y servicios: conexiones con servicios externos como pasarelas de pago, servicios de análisis y más.

Integraciones activas vs disponibles:

• Activas: integraciones que ya has configurado y están funcionando en tu sitio web. Aparecen en la sección superior del módulo.
• Disponibles: integraciones que puedes activar pero aún no has configurado. Están organizadas por categorías.

2. Acceso y estructura del módulo

1. Entra a MGPanel y accede al módulo Integraciones desde:
   1. El botón de integraciones en la barra superior (Integraciones)
2. Verás la estructura principal:
   1. Barra superior: buscador, botón de filtro y botón "Sugerir integración".
   2. Sección Activas: integraciones que ya tienes configuradas y funcionando.
   3. Categorías: tres secciones organizadas (Frameworks de diseño, Librerías y plugins, APIs y servicios).

Cada integración se muestra como una tarjeta con su logo y nombre. Las integraciones activas tienen un indicador visual que las diferencia de las disponibles.

3. Categorías de integraciones

MGPanel organiza las integraciones en tres categorías para facilitar su búsqueda y gestión:

3.1 Frameworks de diseño

Los frameworks de diseño son herramientas que te ayudan a crear interfaces visuales modernas y profesionales sin escribir todo el código desde cero.

Qué son:

• Conjuntos de componentes pre-diseñados (botones, formularios, tarjetas, etc.).
• Estilos y animaciones listos para usar.
• Sistemas de diseño consistentes que mejoran la apariencia de tu sitio.

Ejemplos comunes:

• Frameworks CSS como Bootstrap, Tailwind CSS.
• Librerías de componentes.
• Herramientas de diseño visual.

Cuándo usarlos:

• Cuando quieres mejorar rápidamente el diseño de tu sitio.
• Para mantener consistencia visual en todas tus páginas.
• Si necesitas componentes responsivos que se adapten a móviles y tablets.

3.2 Librerías y plugins

Las librerías y plugins son herramientas complementarias que agregan funcionalidades específicas a tu sitio web.

Qué son:

• Código pre-escrito que resuelve problemas comunes.
• Funcionalidades listas para usar (galerías de imágenes, sliders, validaciones, etc.).
• Extensiones que amplían las capacidades de tu sitio.

Ejemplos comunes:

• Librerías JavaScript para animaciones.
• Plugins para funcionalidades avanzadas.
• Herramientas de validación y utilidades.

Cuándo usarlos:

• Cuando necesitas una funcionalidad específica sin desarrollar desde cero.
• Para agregar características interactivas a tu sitio.
• Si quieres aprovechar código probado y optimizado por la comunidad.

3.3 APIs y servicios

Las APIs y servicios son conexiones con plataformas externas que agregan capacidades avanzadas a tu negocio.

Qué son:

• Conexiones seguras con servicios de terceros.
• Integraciones que permiten que tu sitio se comunique con otras plataformas.
• Servicios que amplían las funcionalidades de MGPanel.

Ejemplos comunes:

• Pasarelas de pago: PayPal, Wompi, Stripe (para recibir pagos online).
• Herramientas de análisis: Google Analytics (para medir el rendimiento).
• Servicios de mapas: Google Maps API (para mostrar ubicaciones).

Cuándo usarlos:

• Cuando necesitas recibir pagos online en tu sitio.
• Si quieres medir el comportamiento de tus visitantes.
• Cuando necesitas mostrar información de servicios externos (mapas, videos, etc.).

4. Integraciones activas

Las integraciones activas son aquellas que ya has configurado y están funcionando en tu sitio web.

4.1 ¿Qué significa tener una integración activa?

Una integración activa significa que:

• Has completado su configuración (credenciales, versión, ambiente).
• El switch de activación está encendido.
• La integración está disponible para usar en tu sitio web.
• Los cambios se aplican tanto en la versión de borrador (draft) como en la publicada.

4.2 Cómo se muestran las integraciones activas

• Aparecen en la sección superior del módulo con el título "Activas".
• Tienen un indicador visual que las diferencia.
• Se muestran antes que las categorías de integraciones disponibles.
• Si no tienes ninguna activa, verás un mensaje informativo.

4.3 Diferencia entre activa e inactiva

Integración activa:

• Switch encendido en el panel de configuración.
• Aparece en la sección "Activas".
• Está disponible para usar en tu sitio web.
• Sus funcionalidades están operativas.

Integración inactiva:

• Switch apagado o sin configurar.
• Aparece en su categoría correspondiente (Frameworks, Librerías o APIs).
• No está disponible para usar en tu sitio web.
• Sus funcionalidades no están operativas.

4.4 Impacto en el sitio web

Cuando activas una integración:

• Se carga automáticamente en tu sitio web (versión de borrador / draft y publicada).
• Puedes usar sus funcionalidades en el módulo que lo requiera.
• Los cambios se sincronizan entre borrador (draft) y publicado.
• Si desactivas una integración, deja de estar disponible pero no se elimina la configuración.

5. Configurar una integración paso a paso

Configurar una integración es un proceso sencillo que te guía paso a paso. Aquí te explicamos cómo hacerlo:

5.1 Abrir el panel de configuración

1. Haz clic en la tarjeta de la integración que quieres configurar (puede estar en Activas o en alguna categoría).
2. Se abrirá un panel lateral desde la derecha con el título "Configurar [Nombre de la integración]".
3. El panel muestra toda la información y opciones de configuración.

5.2 Switch de activación/desactivación

En la parte superior del panel, verás un switch con la etiqueta "Activa":

• Encendido: la integración está activa y disponible en tu sitio web.
• Apagado: la integración está inactiva y no está disponible.

5.3 Configuración de credenciales

Las credenciales son las llaves de acceso que necesitas para conectar tu sitio con el servicio externo. Cada integración puede requerir diferentes tipos de credenciales:

Campos de texto:

• Para valores simples como API keys, tokens o identificadores.
• Aparecen como campos de entrada de texto estándar.
• Ejemplo: "API Key", "Token de acceso", "ID del cliente".

Campos de texto largo (textarea):

• Para configuraciones más extensas o múltiples líneas.
• Aparecen como áreas de texto más grandes.
• Ejemplo: "Configuración JSON", "Script personalizado".

Campos de editor:

• Para contenido estructurado y complejo.
• Incluyen herramientas de formato (títulos, listas, imágenes, etc.).
• Se cargan dinámicamente cuando abres la integración.
• Ejemplo: "Configuración avanzada", "Documentación personalizada".

Campos requeridos:

• Algunos campos tienen un asterisco (*) que indica que son obligatorios.
• No podrás guardar la configuración sin completar estos campos.
• Los campos opcionales no tienen asterisco.

Tooltips informativos:

• Algunos campos tienen un icono de información (ℹ️) que explica qué información debes ingresar.
• Pasa el mouse sobre el icono para ver la ayuda.

5.4 Selección de versión (si aplica)

Algunas integraciones tienen múltiples versiones disponibles:

1. Verás un menú desplegable con la etiqueta "Versión".
2. Selecciona la versión que necesitas usar.
3. Cada versión puede tener diferentes funcionalidades o requisitos.
4. Debajo del menú, verás un enlace "Ver documentación" que te lleva a la guía oficial de esa versión.

Cuándo cambiar de versión:

• Si necesitas funcionalidades específicas de una versión más nueva.
• Si estás siguiendo un tutorial que usa una versión determinada.
• Si quieres probar una versión más reciente.

5.5 Selección de ambiente

Algunas integraciones te permiten elegir entre diferentes ambientes:

1. Verás un menú desplegable con la etiqueta "Ambiente".
2. Opciones comunes:
   1. Production (Producción): ambiente real donde los usuarios finales interactúan. Usa datos reales y transacciones reales.
   2. Staging/Development (Desarrollo): ambiente de pruebas donde puedes probar sin afectar datos reales.

Cuándo usar cada ambiente:

• Producción: cuando tu sitio está en funcionamiento y quieres que la integración funcione con datos reales.
• Desarrollo: cuando estás probando o desarrollando nuevas funcionalidades y no quieres afectar datos reales.

5.6 Información y documentación

En el panel de configuración también verás:

• Descripción de la integración: explicación breve de qué hace y para qué sirve.
• Información adicional: alertas o advertencias importantes (si aplica).
• Enlaces a documentación: acceso directo a la guía oficial del servicio.

5.7 Guardar configuración

Una vez que hayas completado la configuración:

1. Revisa que todos los campos requeridos estén completos.
2. Haz clic en el botón "Guardar" en la parte superior del panel (también puedes usar Ctrl + S).
3. Verás un mensaje de confirmación cuando se guarde correctamente.
4. Si la integración está activa, se moverá automáticamente a la sección "Activas".
5. Si está inactiva, permanecerá en su categoría original.

Indicadores de guardado:

• El botón muestra "Guardando..." mientras se procesa.
• Aparece un mensaje de éxito cuando se completa.
• Si hay un error, verás un mensaje explicativo.

6. Tipos de credenciales y configuración

Las credenciales son las llaves de acceso que conectan tu sitio con servicios externos. Entender los diferentes tipos te ayudará a configurarlas correctamente.

6.1 API Keys y Tokens

¿Qué son?

• Son códigos únicos que identifican tu cuenta en un servicio externo.
• Funcionan como contraseñas que permiten que tu sitio se comunique con el servicio.
• Cada servicio genera sus propias credenciales en su panel de control.

Cómo obtenerlas:

1. Regístrate o inicia sesión en el servicio externo (ej: Wompi, Stripe, Firebase).
2. Busca la sección de "API Keys", "Credenciales" o "Configuración de desarrollador".
3. Genera una nueva API key o token.
4. Copia el valor y pégalo en el campo correspondiente en MGPanel.

Seguridad:

• Nunca compartas tus API keys públicamente.
• No las incluyas en código que puedas compartir.
• Si crees que alguien tiene acceso a tus credenciales, regenera las llaves inmediatamente.

6.2 Campos de texto

Los campos de texto son para valores simples de una sola línea:

Cuándo usarlos:

• API keys cortas.
• Tokens de acceso.
• IDs de cliente o aplicación.
• URLs de endpoints.

Ejemplo:

API Key: sk_live_1234567890abcdef

6.3 Campos de texto largo (textarea)

Los campos de texto largo son para configuraciones más extensas:

Cuándo usarlos:

• Configuraciones en formato JSON.
• Scripts personalizados.
• Múltiples valores separados por líneas.
• Documentación o notas extensas.

Ejemplo:

{
  "api_key": "tu_api_key",
  "endpoint": "https://api.servicio.com",
  "timeout": 30
}

6.4 Campos de editor

Los campos de editor permiten crear contenido estructurado con formato:

Cuándo usarlos:

• Configuraciones complejas que requieren estructura.
• Documentación personalizada con formato.
• Contenido que necesita imágenes, listas o enlaces.
• Configuraciones que se benefician de un editor visual.

Herramientas disponibles:

• Títulos (H2, H3, H4).
• Párrafos con formato.
• Listas ordenadas y desordenadas.
• Imágenes.
• Citas y código.
• Tablas.

6.5 Mejores prácticas de seguridad

Protege tus credenciales:

• No compartas tus API keys en redes sociales o foros públicos.
• No las incluyas en capturas de pantalla que puedas compartir.
• Usa diferentes credenciales para desarrollo y producción cuando sea posible.
• Regenera las credenciales periódicamente si el servicio lo permite.

Gestión de credenciales:

• Guarda una copia segura de tus credenciales en un gestor de contraseñas.
• Documenta qué servicio usa cada credencial.
• Mantén un registro de cuándo las generaste y cuándo expiran (si aplica).

7. Versiones y ambientes

Algunas integraciones ofrecen múltiples versiones y ambientes para adaptarse a diferentes necesidades.

7.1 Versiones

¿Qué son las versiones?

• Diferentes releases de la misma integración.
• Cada versión puede tener nuevas funcionalidades, correcciones o cambios.
• Algunas versiones pueden ser más estables, otras más nuevas con características experimentales.

Cuándo seleccionar una versión específica:

• Si sigues un tutorial que usa una versión determinada.
• Si necesitas funcionalidades específicas de una versión más nueva.
• Si quieres mantener compatibilidad con código existente (versión antigua).
• Si estás probando nuevas características (versión más reciente).

Enlaces a documentación:

• Cada versión tiene su propio enlace a la documentación oficial.
• El enlace se actualiza automáticamente cuando cambias de versión.
• Úsalo para entender las diferencias entre versiones.

7.2 Ambientes

¿Qué son los ambientes?

• Diferentes contextos de ejecución para la misma integración.
• Te permiten probar sin afectar datos reales o usar datos reales en producción.

Ambiente de producción:

• Cuándo usarlo: cuando tu sitio está en funcionamiento y quieres que la integración funcione con datos reales.
• Características:
  • Transacciones reales (pagos, envíos, etc.).
  • Datos reales de usuarios.
  • Efectos inmediatos en tu negocio.
• Ejemplo: recibir pagos reales de clientes a través de una pasarela de pago.

Ambiente de desarrollo/staging:

• Cuándo usarlo: cuando estás probando o desarrollando nuevas funcionalidades.
• Características:
  • Transacciones de prueba (no se procesan realmente).
  • Datos de prueba que no afectan tu negocio.
  • Permite experimentar sin riesgos.
• Ejemplo: probar el proceso de pago sin cobrar realmente a los clientes.

Mejores prácticas:

• Usa desarrollo/staging para probar nuevas integraciones antes de activarlas en producción.
• Verifica que todo funcione correctamente en desarrollo antes de cambiar a producción.
• Mantén credenciales separadas para cada ambiente cuando sea posible.

8. Buscar y filtrar integraciones

MGPanel te ofrece herramientas para encontrar rápidamente las integraciones que necesitas.

8.1 Barra de búsqueda

La barra de búsqueda está ubicada en la parte superior del módulo:

Cómo usarla:

1. Haz clic en el campo de búsqueda (icono de lupa 🔍).
2. Escribe el nombre de la integración que buscas.
3. Los resultados se filtran automáticamente mientras escribes.
4. Las integraciones que coinciden aparecen resaltadas.

Qué busca:

• Nombres de integraciones.
• Coincidencias parciales (no necesitas escribir el nombre completo).

Ejemplos:

• Buscar "wompi" encontrará "Wompi API".
• Buscar "pay" encontrará todas las integraciones relacionadas con pagos.

8.2 Botón de filtro

Con el botón "Filtrar" podrás filtrar por categoría, estado (activa/inactiva) y más.

8.3 Navegación entre categorías

Puedes navegar entre las diferentes secciones:

• Activas: desplázate hacia abajo para ver las integraciones activas.
• Frameworks de diseño: sección dedicada a herramientas de diseño.
• Librerías y plugins: sección para componentes y funcionalidades adicionales.
• APIs y servicios: sección para conexiones con servicios externos.

Cada sección tiene su propio encabezado y muestra un mensaje si no hay integraciones disponibles.

9. Sugerir nuevas integraciones

Si necesitas una integración que no está disponible en MGPanel, puedes sugerirla al equipo.

9.1 Botón "Sugerir integración"

El botón está ubicado en la barra superior del módulo, junto a la búsqueda y el filtro.

Cómo usarlo:

1. Haz clic en el botón "Sugerir integración".
2. Se abrirá un formulario o enlace donde puedes enviar tu sugerencia.
3. Completa la información solicitada.
4. Envía tu sugerencia.

9.2 Qué información es útil proporcionar

Para ayudar al equipo a evaluar tu sugerencia, incluye:

• Nombre del servicio: el nombre oficial de la integración que quieres.
• Tipo de integración: si es una API, framework, librería o plugin.
• URL del servicio: enlace al sitio web oficial del servicio.
• Casos de uso: para qué la necesitarías en tu sitio web.
• Documentación: si conoces la URL de la documentación de la API o servicio.

Ejemplo de sugerencia:

Nombre: Stripe
Tipo: API y servicio (Pasarela de pago)
URL: https://stripe.com
Casos de uso: Recibir pagos con tarjeta de crédito en mi tienda online
Documentación: https://stripe.com/docs/api

9.3 Proceso de evaluación

El equipo de MGPanel:

• Revisa todas las sugerencias recibidas.
• Evalúa la viabilidad técnica y la demanda de la integración.
• Prioriza las integraciones más solicitadas.
• Notifica cuando una integración sugerida está disponible.

10. Mejores prácticas según tu perfil

10.1 Para dueños de negocio y marketing

Cuándo activar integraciones:

• Pasarelas de pago: cuando necesitas recibir pagos online en tu sitio.
• Herramientas de análisis: cuando necesitas medir el rendimiento de tu sitio.

Seguridad de credenciales:

• Nunca compartas tus API keys con personas que no necesitan acceso.
• Si trabajas con un equipo, considera quién realmente necesita acceso a las credenciales.
• Regenera las credenciales si sospechas que alguien no autorizado las tiene.
• Usa un gestor de contraseñas para guardar tus credenciales de forma segura.

Gestión de integraciones:

• Activa solo las integraciones que realmente necesitas.
• Revisa periódicamente qué integraciones tienes activas y si aún las usas.
• Desactiva integraciones que ya no necesitas para mantener tu sitio optimizado.

Pruebas antes de producción:

• Si es posible, prueba las integraciones en un ambiente de desarrollo primero.
• Verifica que todo funcione correctamente antes de activar en producción.
• Pide ayuda a emyi si tienes dudas sobre cómo configurar una integración.

10.2 Para desarrolladores

Gestión de ambientes:

• Usa siempre ambiente de desarrollo/staging para probar nuevas integraciones.
• Verifica que las credenciales de desarrollo sean diferentes a las de producción.
• Cambia a producción solo cuando hayas probado exhaustivamente en desarrollo.
• Documenta qué ambiente usa cada integración en tu proyecto.

Versiones:

• Mantén un registro de qué versión de cada integración estás usando.
• Revisa las notas de versión antes de actualizar a una versión más nueva.
• Prueba actualizaciones en desarrollo antes de aplicarlas en producción.
• Considera la compatibilidad con código existente al cambiar de versión.

Integración en código:

• Revisa la documentación oficial de cada integración antes de usarla.
• Usa las credenciales configuradas en MGPanel, no las hardcodees en tu código.
• Implementa manejo de errores para cuando las integraciones fallen.
• Prueba los casos extremos (errores de red, credenciales inválidas, etc.).

Optimización:

• Activa solo las integraciones que realmente necesitas en cada página.
• Considera el impacto en el rendimiento de cargar múltiples integraciones.
• Monitorea el uso de recursos cuando agregas nuevas integraciones.
• Desactiva integraciones no utilizadas para mantener el sitio optimizado.

Documentación:

• Documenta qué integraciones usa tu proyecto y para qué.
• Mantén un registro de las credenciales y ambientes usados.
• Comparte esta información con tu equipo de forma segura.

11. Solución de problemas comunes

12. Recursos adicionales y soporte

• emyi puede ayudarte a configurar integraciones, entender qué credenciales necesitas o resolver problemas con APIs y servicios. Solo pregúntale sobre la integración que necesitas configurar.
• Documentación externa: cada integración tiene enlaces a su documentación oficial. Úsalos para entender funcionalidades avanzadas o casos de uso específicos.
• Equipo de soporte: si encuentras un error o necesitas ayuda con una integración específica, abre un ticket desde emyi, ve a la sección de Ayuda -> Sugerir mejoras -> Reportar un error o escribe a soporte@mgpanel.co con:
  • Nombre de la integración.
  • Descripción del problema.
  • Capturas de pantalla si es posible.
  • Pasos para reproducir el error.

13. Próximos lanzamientos del módulo

El equipo de MGPanel está trabajando en mejoras que harán el módulo Integraciones aún más potente:

• Más integraciones disponibles: nuevas pasarelas de pago, servicios de email y herramientas de análisis.
• Filtros avanzados: posibilidad de filtrar por categoría, estado, fecha de activación y más.
• Analytics de uso: métricas sobre qué integraciones usas más y su impacto en el rendimiento.
• Integraciones sugeridas: recomendaciones automáticas basadas en tu tipo de negocio y necesidades.

Mantente atento al panel de Novedades para enterarte de cada actualización.