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 su nombre de dominio y los idiomas que desee (~ 1 minuto)

En este paso, debe introducir el nombre de su dominio y los idiomas que desee.

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

NOTA: Si todavía no ha comprado su propio nombre de dominio, y sólo tiene un dominio .webflow.io, haga clic en "Usar integración de Javascript" si todavía está en la fase de prueba de su sitio. Podrá añadir su nombre de dominio más tarde.

Por ejemplo:

el dominio es weglot-translate-wbflow.com
el idioma original es el inglés
el idioma traducido es el francés

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 configurar el francé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 " fr"(para los que añadan francés) en el apartado "Nombre" y el valor proporcionado por Weglot en el apartado "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.