Escala tu desarrollo visual a nivel mundial sin código de 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 un infraestructura multilingüe con indexación SEO completa.
Esta guía detalla el proceso de integración utilizando el sistema de Webflow Código personalizado característica.
1. Requisitos previos para el despliegue
Antes de comenzar, asegúrate de que tu entorno cumpla con los requisitos:
Plan de sitio de Webflow
Debes estar en un Plan Básico del Sitio (o superior) para desbloquear la función "Código personalizado".
Clave API MultiLipi
Localiza esto en tu Panel de Control debajo de Configuración > General.
2. Paso 1: Acceder a la Arquitectura del Sitio
Inyectaremos el motor de traducción en la cabecera global para asegurar que persista en todas las páginas y plantillas de CMS.
- 1
Inicie sesión en su 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 hasta el Código personalizado pestaña en la barra de navegación superior.
3. Paso 2: Inyectar el Script de Infraestructura
- 1
Desplázate hacia abajo hasta el campo etiquetado como "Código de Encabezado".
- 2
Nota: No coloques esto en "Código del pie de página", ya que retrasará la carga de la traducción y provocará un "flash de contenido sin traducir".
Acción: Pega el script de conexión
Pega el siguiente script de conexión en el campo:
⚠️ Configuración crítica
- •Reemplazar
YOUR_API_KEY_HEREcon la Clave API real copiada de tu panel de control de MultiLipi. - •Haz clic en el verde Guardar cambios 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
Haga clic en el botón azul Publicar botón y selecciona tu dominio de producción (o .webflow.io dominio de staging).
Verificar
Abre el enlace en vivo.
Comprobación visual
El selector de idioma debería aparecer en la esquina inferior izquierda.
Comprobación de CMS
Navega a una página de Colección de CMS (por ejemplo, /blog/post-1) y cambia los idiomas para asegurar que el contenido dinámico se traduzca correctamente.
Protocolo de resolución de problemas
- •¿Falta el conmutador? Confirma que publicaste el sitio después de guardar el código.
- •Comprobación del plan: Asegúrate de que tu plan de alojamiento de Webflow esté activo; los sitios de staging 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 de diseño
Dado 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 el sitemap.xml entradas y hreflang etiquetas para tu proyecto Webflow, asegurando que te clasifiques en los resultados de búsqueda globales sin trabajo manual de SEO.