Escala tu desarrollo visual globalmente sin código backend.
Webflow es la plataforma principal para el desarrollo visual, pero la localización nativa puede ser compleja y costosa. MultiLipi se integra directamente en la arquitectura de Webflow a través de una única inyección de script, transformando instantáneamente tus páginas estáticas y colecciones de CMS en una infraestructura multilingüe con indexación SEO completa.
Esta guía detalla el proceso de integración utilizando el Código Personalizado característica.
1. Prerrequisitos de Despliegue
Antes de comenzar, asegúrate de que tu entorno cumple con los requisitos:
Plan del Sitio Webflow
Debes estar en un Plan Básico del Sitio (o superior) para desbloquear la función "Código Personalizado".
Clave API de MultiLipi
Localiza esto en tu Panel de Control bajo Configuración > General.
2. Paso 1: Acceder a la Arquitectura del Sitio
Inyectaremos el motor de traducción en el encabezado global para asegurar que persista en todas las páginas y plantillas CMS.
- 1
Inicia sesión en tu Panel de Control de Webflow.
- 2
Localiza la tarjeta de tu proyecto y haz clic en el Icono de Configuración (⚙️) (o selecciona Configuración del Sitio desde el menú Diseñador).
- 3
Navega a la Código Personalizado pestaña en la barra de navegación superior.
3. Paso 2: Inyecta el Script de Infraestructura
- 1
Desplázate hacia abajo hasta el campo etiquetado "Código de Encabezado".
- 2
Nota: No coloques esto en el "Código de Pie de Página", ya que retrasará la carga de la traducción y causará un "flash de contenido no traducido".
Acción: Pega el Script de Conexión
Pega el siguiente script de conexión en el campo:
⚠️ Configuración Crítica
- •Reemplazar
TU_CLAVE_API_AQUIcon la Clave API real copiada de tu panel de control MultiLipi. - •Haz clic en el verde Guardar Cambios botón en la esquina superior derecha.
4. Paso 3: Despliegue y Verificación
Webflow no ejecuta código personalizado en la vista de Diseñador. Debes publicar para ver el motor en acción.
Publicar
Haz clic en el azul Publicar botón y selecciona tu dominio de producción (o .webflow.io dominio de staging).
Verificar
Abre el enlace en vivo.
Verificación Visual
El Conmutador de Idiomas debería aparecer en la esquina inferior izquierda.
Comprobación CMS
Navega a una página de Colección CMS (por ejemplo, /blog/post-1) y cambia de idioma para asegurar que el contenido dinámico se traduzca correctamente.
Protocolo de Solución de Problemas
- •¿Switcher faltante? Confirma que publicaste el sitio después de guardar el código.
- •Verificación de Plan: Asegúrate de que tu plan de alojamiento de Webflow esté activo; los sitios de prueba gratuitos a menudo limitan la ejecución de código personalizado en dominios personalizados.
5. Optimización y Estilo
Una vez implementado, MultiLipi funciona silenciosamente en segundo plano.
Integridad del Diseño
Debido a que solo intercambiamos nodos de texto, tus Interacciones de Webflow (IX2) y animaciones de desplazamiento permanecen perfectamente intactas.
Personalización del Conmutador
Puedes reposicionar el selector usando la configuración de nuestro Panel de Control o anular su CSS para que coincida con la tipografía específica de tu sitio.
Automatización SEO
Generamos automáticamente las sitemap.xml entradas y hreflang etiquetas para tu proyecto Webflow, asegurando que te posiciones en los resultados de búsqueda globales sin trabajo manual de SEO.