Webflow - Integración / Configuración

Guía en vídeo: ¿Quiere una explicación rápida y sencilla sobre cómo configurar su sitio Webflow con Weglot? Consulte nuestro video tutorial ¡sobre cómo integrar Weglot en su sitio Webflow!

1. Regístrese en una cuenta de Weglot

En esta cuenta es donde podrá ver y gestionar todas sus traducciones. Simplemente cree una cuenta de Weglot aquí.

2. Cree su proyecto (~ 1 minuto)

Una vez creada su cuenta, debe crear su proyecto. Debe darle un nombre y seleccionar la tecnología de su sitio web, que es "Webflow":

3. Introduzca las lenguas que desee (~ 1 minuto)

En este paso, necesita las lenguas que desea.

El idioma original es el idioma de su página web original y el idioma o idiomas traducidos son los idiomas a los que desea traducir su página web.

Introduzca los datos del sitio web

**NO AÑADA SU NOMBRE DE DOMINIO TEMPORAL que termine en .webflow.io.

NOTA: Si aún no ha adquirido su propio nombre de dominio y sólo dispone de un dominio .webflow.io, haga clic en "Conectar Weglot a su sitio web sin él" si aún se encuentra en la fase de pruebas de su sitio. Podrá añadir su nombre de dominio más adelante.

Pulse el botón "Siguiente" para pasar al siguiente paso.

4. Configure los subdominios en los registros DNS (~ 5 minutos)

Este es el paso en el que se configura el DNS para crear y conectar los subdominios.

En la configuración de su cuenta de Weglot, verá las siguientes entradas DNS para añadir (Nota: este ejemplo es para la configuración en inglés):

Para el propósito de este ejemplo, estamos usando Google Domains como nuestro proveedor de nombres de dominio - la mayoría de los otros proveedores de alojamiento tendrán un aspecto similar a este. Pero, por favor, póngase en contacto con nosotros en support@weglot.com si necesita ayuda con este paso.

Ahora, vaya a la cuenta de su proveedor de nombres de dominio y a la sección o página en la que puede gestionar los DNS (por ejemplo, en Google Domains, se encuentra en una pestaña de la barra de menú de la izquierda llamada DNS).

En este punto, debería poder crear nuevas entradas en la sección DNS de su pantalla (en nuestro ejemplo es en la sección "Registros de recursos personalizados"). Seleccione CNAME como tipo de entrada.

Introduzca " es"(para los que añaden inglés) en la sección "Nombre" y el valor proporcionado por Weglot en la sección "Datos".

Si tiene algún problema para saber dónde encontrar o cómo actualizar sus registros DNS, podemos ayudarle. Sólo tiene que enviarnos un correo electrónico a support@weglot.com.

Una vez que haya añadido y guardado las entradas, vuelva a la página de Weglot. Puede hacer clic en " Comprobar DNS" y debería aparecer un icono de marca de verificación verde: esto significa que todo se ha configurado correctamente (Esto puede tardar a veces un par de minutos o incluso 10, así que no se alarme si el icono de marca de verificación verde no ha aparecido todavía junto a su registro DNS). Haga clic en"Siguiente".

5. Instale la biblioteca Weglot (~ 3 minutos)

Este es el paso final, en el que añadirá el botón de cambio de idioma a su sitio web de Webflow, y personalizará algunos de los ajustes de la aplicación.

Es rápido y fácil, sólo tiene que seguir los siguientes pasos (que también se muestran en el GIF de abajo).

Vaya a su Webflow dashboard, y luego, en su sitio web, haga clic en los 3 puntos y haga clic en "Configuración".
En la página de Configuración, seleccione "Código personalizado" (la última pestaña de la derecha)
Go to “Head Code”, and you should see a field that’s titled “Add code at the end of the <head> tag:”
Copie y pegue el fragmento de JavaScript que se le ha proporcionado en su cuenta de Weglot. Se parecerá al siguiente, pero asegúrese de añadir su clave de API real en lugar del marcador de posición "YOUR_API_KEY":

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
    Weglot.initialize({
        api_key: 'YOUR_API_KEY',
    });
</script>

Pulse el botón verde, "Guardar cambios".
Publique sus cambios, haciendo clic en el botón azul situado en la parte superior derecha.

¡Ya está todo hecho!

¡Terminado! Vaya a su sitio web, y verá que el botón de cambio de idioma aparece en la parte inferior derecha. Déle unos minutos para que se asegure de que sus subdominios están bien configurados, luego puede probar a cambiar el idioma, y verá sus páginas traducidas.

Bonus: ¡hemos creado algunos conmutadores de idioma Webflow que puede clonar y añadir a su sitio web! Compruébelos en nuestro Webflow UI Kit de Finsweet y en Weglot Components de Digidop.