Easy WeGlot Integration for Webflow Websites
Table of Contents:
- Introduction
- Setting Up a WeGlot Account
- Adding DNS Records
- Copying JavaScript Snippet to Webflow
- Testing the Translated Site
- Exploring the WeGlot Dashboard
- Manual Translations
- Using the Visual Editor
- Customizing UI Components
- Using the WeGlot and Webflow UI Kit
Introduction
In this article, we will walk through the process of integrating WeGlot with Webflow. We will cover everything from creating a WeGlot account to adding DNS records and customizing the UI components. By the end of this article, you will be able to set up a fully translated Webflow build with WeGlot in just a few minutes.
Setting Up a WeGlot Account
To start with, you will need to create a WeGlot account. Visit the WeGlot website and sign up for a free account if you haven't already. Once you have created your account, log in and create your first project. In this project, select Webflow as your platform. If you already have your primary domain name ready, you can follow the steps with your DNS records. If not, you can use the JavaScript integration for testing purposes.
Adding DNS Records
Adding DNS records is an essential step in the integration process. These CNAME records will add subdomains to your URL, giving you SEO benefits and making your site searchable in different languages. The process of adding DNS records may vary depending on your domain provider, but the steps are generally the same. In your domain provider's DNS dashboard, add the appropriate CNAME records for each language you want to translate your site into. For example, if you want to add French, German, Russian, and Spanish translations, create CNAME records for each of these languages, pointing to websites.weglot.com.
Copying JavaScript Snippet to Webflow
Once you have added the DNS records and they have been recognized by WeGlot, you can proceed to the next step. Copy the JavaScript snippet provided in your WeGlot account. Make sure to copy the API key specific to your account and paste it into the custom code section of your Webflow site settings. This JavaScript snippet will enable the language switcher on your site, allowing users to change the language automatically.
Testing the Translated Site
After pasting the JavaScript snippet, save the changes in Webflow and publish your site. Upon visiting your site, you will now see the WeGlot language switcher in the bottom right corner. You can use this switcher to change the language of your site instantly. Each language will have its own subdomain, and the text on your site will be automatically translated. Test different languages to see the translations in action.
Exploring the WeGlot Dashboard
The WeGlot dashboard offers many settings and options to customize your translated site. You can manually edit translations, use the visual editor for a WYSIWYG experience, and customize UI components. In the project settings, you can exclude certain parts of the site from being translated and make dynamic elements. Take some time to explore the dashboard and see what options are available to enhance your translated site.
Manual Translations
In addition to automatic translations, WeGlot also allows you to manually translate specific content on your site. If you want to provide unique or special translations that are not part of the automatic process, you can easily do so within the WeGlot dashboard. This gives you more control over the translation process and allows you to tailor the content to your specific needs.
Using the Visual Editor
The visual editor in WeGlot is similar to the Webflow editor and provides a visual way to edit translations on your site. You can edit the translated text directly on the page, making it easy to make adjustments or corrections. This feature is especially useful for fine-tuning the translations and ensuring the accuracy of the content.
Customizing UI Components
With WeGlot, you have the option to customize the UI components of the language switcher to match your branding and design. By using the WeGlot and Webflow UI Kit, you can create a custom language switcher that integrates seamlessly with your site. This allows for a more personalized and consistent user experience when switching between languages.
Using the WeGlot and Webflow UI Kit
To take your language switcher to the next level, you can use the WeGlot and Webflow UI Kit. This UI Kit utilizes Webflow interactions and allows you to completely customize the language switcher using Webflow's design tools. It provides a branded and interactive way to change the language on your site, enhancing the overall user experience. Check out the accompanying video for a step-by-step guide on using the UI Kit.
Conclusion
In conclusion, integrating WeGlot with Webflow is a straightforward process that allows you to easily translate your site into multiple languages. With WeGlot's powerful features and intuitive dashboard, you have complete control over the translation process and can customize the UI components to match your branding. By following the steps outlined in this article, you can set up a fully translated Webflow site in just a few minutes. Translating your website is crucial in reaching a global audience, and with WeGlot, the process becomes effortless and efficient.
Highlights:
- Set up WeGlot integration with Webflow in minutes
- Add DNS records to make your site searchable in different languages
- Customize UI components for a consistent user experience
- Manually edit translations for more control over the content
- Utilize the WeGlot and Webflow UI Kit for a branded language switcher
FAQ
Q: Can I translate my Webflow site into multiple languages?
A: Yes, with the WeGlot integration, you can easily translate your Webflow site into multiple languages.
Q: Can I manually edit translations if needed?
A: Absolutely! WeGlot provides a feature to manually edit translations if you want to customize specific content.
Q: How long does it take for the DNS records to be recognized by WeGlot?
A: The recognition process may vary depending on your DNS provider. It can take anywhere from a few seconds to several minutes.
Q: Can I exclude certain parts of my site from being translated?
A: Yes, in the WeGlot dashboard, you have the option to exclude specific parts of your site from being translated.
Q: Is the language switcher customizable?
A: Yes, you can customize the UI components of the language switcher using the WeGlot and Webflow UI Kit to match your branding and design.
Q: How can I get support if I have any questions or issues?
A: For any questions or support, you can reach out to the WeGlot support team at support@weglot.com. They will be happy to assist you.
