Forem: Localazy Team

Top 18 Translation Service Provider APIs

Localazy Team — Thu, 05 Jan 2023 14:42:32 +0000

Are you looking for a translation API to use in your new project? We curated a list of the 18 most popular translation service providers’ APIs available on the market. Maybe you’ll find a match!

Translating your content online hasn’t ever been easier than now. 🗣 Considering that content marketing is becoming increasingly important, the need to have this content translated into different languages is also increasing. This is where a Translation Service Provider (TSP) API enters the scene. 💡

📄 In this article, we’ll explain what is a translation API to translate and localize your content seamlessly and list 18 of the most popular translation APIs.

🤔 What is a Translation API?

A translation API is a software interface that developers can use to connect their own software with another application that can translate any text content.

That comes from the definition of an API:

API stands for Application Programming Interface. API enables applications to exchange data with each other. 📲

Many TSPs use a combination of machine learning algorithms and human capabilities to help businesses translate their content.

📝 List of Translation API Providers

We’ve collected some of the most advanced translation APIs for you to use in the list below.

Google Translate API

Google Translate is probably the most popular machine translation engine in the world. And when it comes to translation service providers, everyone would head to the big G.

The Google Translation API pricing is distributed into four tiers: Translation API Basic, Translation API Advanced, AutoML Translation, and Media Translation API. The first 500,000 characters are free, and the Basics package starts with prices as low as $1.5 per 575,000 characters.

The Google Cloud Translation API can be integrated easily by developers to make the production of accurate translations automatic and practical.

Google Translate is integrated inside Localazy and available on the Autopilot plan and above.

However, the API runs on machine translation and doesn’t understand the context in which a word or idiom may be used. The result can lead to funny and often embarrassing results and, in worse cases, legal troubles. But the best part about it is that it offers many integration options.

Amazon Translate

Usually, talking about the translation tech without mentioning Amazon wouldn't make sense. The company has launched its tool, Amazon Translate, which functions on Neural Machine Translation (NMT) algorithms to help produce quality translations. Their API accepts materials in several formats, including Excel spreadsheets, Word files, and PowerPoint presentations.

Amazon Translate is also another machine translation engine that's available at Localazy. And the best thing about it is you can use it on the Free plan!

Unlike traditional translation services that rely on statistical algorithms and rules, Amazon implements deep learning, which tries to mimic how the human brain functions to deliver more natural translations. Also, the API seamlessly integrates the tool whenever you need it. Amazon Translate allows you to translate website content, chat messages, or emails.

Yandex API

Yandex launched its translation service in 2011, and since then, it has gone through continual enhancements. There are plans for both small and big companies as well as individuals, and its services include over 100 languages. Users say that Yandex’s pricing is more affordable than Google Translate API’s, which gives it an advantage.

However, Google Translate offers twice as many languages as Yandex (200+), which might be a dealbreaker. The service is used to translate both web pages and text materials. It does this by relying on a neural machine translation algorithm that analyzes the translated texts and builds dictionaries for each word which are then used to aid in the quality of translations.

DeepL

If you are searching for a translation service that goes deeper into the intricacies of a language and has made headlines for beating other popular translation engines like Google with its accuracy, DeepL is the one. The statistics that compare it with other translation services offered by Facebook, Microsoft, and even Google Translate show that the difference is enormous.

What’s more exciting is that the DeepL Free translation API offers the option to translate up to 500,000 characters for free.

DeepL is the third engine built-in to Localazy. Enjoy some of the best machine translation engines with the Autopilot plan!

The formats you can translate using DeepL API include Word documents, PDFs, PowerPoint presentations, and HTML files. As in many other translation services, it comes with the capability to detect languages, which means that you’re able to upload a file, and it will detect its language instantly.

Microsoft Azure Translator API

Searching for a powerful translation engine that doesn’t take much work to set up? Our fifth alternative is the Microsoft Azure Translator API, which enables you to translate text between over 100 languages without much effort and is easy to integrate. You can choose between one of the three features that it offers.

Microsoft Azure Translator is the fourth (and at this time final) engine included with the Localazy Autopilot plan.

Depending on your situation, you may opt to translate documents and texts or build your own models to use the translator API however you want. Microsoft uses neural machine translation to power its translation services. It caters to a wide variety of industries, such as call centers or agents who need to speak with customers who belong to different nationalities.

iTranslate

You might have used the iTranslate on your phone for on-the-spot voice translations when speaking to a stranger. The handy mobile app supports over 100 languages. However, you’ll be able to use only about 50+ languages and dialects in their API integrations.

The iTranslate API supports text translations and ensures your data is kept safe by not keeping any records of it after it’s translated. Snap Inc recently announced that they were integrating the iTranslate API for their Lens Studio to provide AR developers with the capability to build multilingual lenses.

Lingvanex

Another growing company that works majorly with large enterprises is Lingvanex. Their machine translation API is quite diverse and affordable for both consumers and businesses. Working with confidential data could get out of control quickly, and that’s why they enforce privacy protection according to the GDPR & CCPA policies.

With prices starting from $5 per 1 million translated characters, Lingvanex supports over 109 languages and multiple content formats, including web content, files, and text. Once you’re signed up on the platform, you’re rewarded with a free batch of 200,000 characters that you can use before starting to pay.

Transifex

If you go online, you’re likely to find some negative reviews about the app from two years ago, saying that it is a bit slow even though it has all the functionalities that it promises. This CAT (Computer-assisted Translation) tool and its API were born in the heart of Greece, Athens, slowly catching the attention of big brands like Reddit and Coursera, which started working with it.

The platform doesn’t directly offer translations, but it matches companies and users with translators and takes care of the translation management process. You can rely on it to manage content for digital products such as videos, games, websites, and mobile apps.

However, most of its features come for a steep price since it’s designed for large enterprises. Localazy is a much more affordable alternative, and it's easier to get started with it, as this Capterra comparison clearly concludes.

Smartling Translation API

This company has quite a reputation in the industry. Large-sized companies like Shopify and SurveyMonkey have chosen Smartling to manage their translation processes. Offering a CAT API, the platform comes in handy for translation services. You can order translations from professionals or use machine translations.

Their pricing isn’t cheap. It starts from $200 per month, and they don’t even offer a free trial or free version for new users.

Try Localazy for free. See what's included in the Free plan.

Even though Transifex offers complete translation management, Translation Memory (TM), CAT tools, and an API, they lack some of the essential localization features, such as activity dashboards and commenting.

Unbabel Translation API

Unbabel is the next translation provider on our list. It was founded by Vasco Calais Pedro, an academic interested in Social Network Semantic Analysis and Big Data and a Ph.D. holder in Computer Science. The platform offers support in over 30 languages and connects its users with human editors while providing a machine translation API at their disposal.

Recently, they acquired another startup, Lingo24, which uses AI to translate content en masse. Major brands like Udemy and Microsoft have been using their services to empower their customer support teams to communicate with multilingual customers. However, Unbabel doesn’t offer a free trial version (unlike Localazy) and charges its users per feature.

Localazy translation API

Localazy API is a favorite way of integrating software products with the automated localization platform Localazy. It was launched in 2021, fresh with insights from the localization market and Localazy users, and it's equipped with powerful features that enable you to manage your translation projects at Localazy programmatically.

The Localazy API is organized around REST with predictable resource-oriented URLs, accepts JSON-encoded request bodies, returns JSON-encoded responses, and uses standard HTTP response codes, authentication, and verbs.

Localazy API offers endpoints to import content for translation, download translations, manage source keys in the project, and link source keys together to solve duplicity issues. You can also upload screenshots and manage glossary terms to ensure good context for the translators working on your Localazy project.

The Localazy API is continuously improving, and we are carefully listening to our user's feedback to enhance and automate their localization workflows.

Learn all about the Localazy API in the documentation.

And as said earlier, Localazy combines four machine translation engines inside one platform. So you’ll be able to use Amazon Translate as a free option and browse through suggestions from DeepL, Google Translate, or Azure Translate on the Autopilot plan and above.

TIP: We’re maintaining the @localazy/ts-api library, which wraps all of the Localazy API resources.

You can also read articles about the API on the Localazy blog:

Systran Translate API

Available to companies and individual developers needing to translate content across their projects, the Systran Translate API is pretty flexible to use. It allows you to translate both external and internal applications easily and offers the proper tools to tackle different types of content, including videos and images. It supports over 50 languages powered by artificial intelligence.

The automatic translation API can easily detect languages, summarize documents, and easily translate online chats, web pages, or support tickets. Its translator API provides real-time translation and offers 500,000 characters in its free trial version that lasts 14 days.

Memsource API

Memsource was founded in 2010, providing a wide set of tools in its CAT API, including translation memories, integrations with translation management services, and desktop and browser versions.

In September 2022, the company announced its new identity with Phrase, another well-known localization software acquired by Memsource in 2021, thus renaming its services under Phrase name. That's why their brand is mentioned often in Memsource API documentation.

The Translation Management System (TMS) helps you with the translation management of website assets, file documents, and translators. You can access the platform through your mobile device and benefit from its machine translation engine.

POEditor API

The POEditor offers an automatic translation API that complements your translations via machine translations which can save a lot of time in large projects.

Their free version offers around 1,000 strings but doesn't include a Translation Memory (TM). The paid plans start at $14/month, and apart from using API, POEditor can be easily integrated with Bitbucket, VTSTS, and GitHub, among other technologies. It also integrates with Microsoft Teams and Slack to support communication during localization.

Libretranslate

Libretranslate offers an open-source. self-hosted, machine translation API that focuses on providing high-quality translations and keeping your data safe. Supporting over 100 languages, this open-source machine translation API is practical to some extent. What's more exciting about it is the capability of the API to work offline as well.

Libretranslate provides self-hosted data services and allows you to use it even in production by utilizing an API key.

Unlike most translation service providers, the API doesn't rely on translation engines like DeepL, Amazon, or Google, but it uses the Argos Translate library, which is open source and might pose some accuracy issues at times. However, you can provide feedback to their production endpoints to suggest improvements.

Translated API

Translated machine translation API supports a wide range of file formats and an impressive number of 194 languages. Whether you're a developer or a company, their services span from real-time progress monitoring, quality assurance, and the option to add external translators to the project easily.

The company mainly serves enterprises like Airbnb and has managed translations for over 260k clients so far. Their services aid marketers with Google Ads translation and subtitling while providing an efficient API. On top of that, they offer a free migration plan and a customized extractor to pull content from your data.

IBM Cloud API Language Translator

The IBM Cloud API Language Translator translation models allow you to customize the glossaries and terminology while translating content. The machine translation API provides different character sets and language pairs to help make your web apps multilingual.

The level of customization is impressive since you're allowed to personalize the domain of the content you're translating further into corpus-level customization. Implementation is done with an easy API call.

Translate.com API

With customers like Adcash or Slidepeak, the Translate API offers both services from both human translators and machine translations (a combination that we provide through our Continous Localization Team).

The company offers support from human translators in over 70 languages and machine translations in over 90 languages. The service is used for customer service tickets, among others, and can immensely help reduce the costs of hiring multilingual agents. You can also use the API to translate web content, apps, and documentation.

✔️ Conclusion

Did you find your favorite? Are you missing any from the list? Let us know in the comments. Or jump straight in and try the Localazy API to localize your next project in a hassle-free way.

Spanish, a growing language in the business world

Localazy Team — Thu, 05 Jan 2023 13:59:13 +0000

Learn why Spanish is an important language to consider and why it might be one of the first to choose when you start with the localization of your product. There’s no wonder Spanish is the most popular language on our platform!

📖 Introduction

Before discussing this topic, we first need to know a little about the history of this language. Spanish is one of the Romance languages that originated from Vulgar Latin, which in turn originated from the living or cultured Latin that was spoken in the Roman Empire.

Origin of Spanish Language

The Romance languages were formed by the end of the 9th century and emerged from the various dialects that differed in pronunciation and writing that gained prominence as the number of people speaking them grew. These dialects included Portuguese, Galician, Castilian, Asturleonese, Aragonese, Catalan, Occitan, French, Rhaeto-Romanic, Italian, Romanian, and Dalmatian.

Who speaks Spanish?

Spanish is the official language of 21 countries, most of them in America and Europe, although it is also present in former Spanish colonies such as the Philippines (Asia), Equatorial Guinea, and Western Sahara (Africa); it is the mother tongue of millions of people and is also spoken by those who study Spanish as a second language; all in all, more than 450 million people speak Spanish.

The Difference between Spanish and Castilian

A notion that many of us have heard but few have wondered about and investigated is the Castilian language. In particular, what is the difference between Spanish and Castilian?

The answer is simple: the term Spanish comes from the word Spain, while Castilian comes from Castile, one of the original kingdoms that originated the country. This was later used to differentiate the Spanish dialect spoken in Latin America from the one used in Europe. But there's no such thing as two dialects in Spanish... There are multiple ones and that's what we're going to talk about next.

The importance of dialects

A dialect is a specific form of a language spoken in a particular part of the country of used by a particular group of people. Nearly every language in the world has dialects, which are generally regional varieties of a standard tongue. They are not to be confused with accents, as the standardized version of a language can be spoken in different accents.

Having said that, did you know that there are dozens of Spanish dialects all over the world? Although most Spanish speakers can understand each other, the Spanish spoken in Argentina differs from the one spoken in Mexico, Chile, Philippines, Equatorial Guinea or Antilles.

This means that this incredibly diverse language has many regional variants inside every country, like Andalusian (Spain), Rioplatense (Argentina and Uruguay) or Caribbean (Cuba, Venezuela, Panama...). Differences in pronunciation, vocabulary and grammar can also be found in several regions of Spain, where there are five co-official languages as well (Basque, Catalan, Galician, Valencian and Aranese). Imagine the richness the language has in every country it's present on!

🤔 Why is Spanish important?

Let's run over the facts quickly:

It is spoken as a mother tongue not only in Spain but in many other countries such as the United States (37 million), Canada (909,000), Brazil (460,000), the Philippines (439,000), and more.
Spanish is the official language of the following 21 countries: Argentina, Bolivia, Chile, Colombia, Costa Rica, Cuba, Dominican Republic, Ecuador, El Salvador, Equatorial Guinea, Guatemala, Honduras, Mexico, Nicaragua, Panama, Paraguay, Peru, Spain, Uruguay, Venezuela, and Puerto Rico.
Although not an official language, Spanish is also spoken in the United States, Belize, Andorra, and Gibraltar.
It is the fourth most popular language in the world after English, Mandarin and Hindi. And if we focus on the number of total native speakers, it escalates to the second position after Mandarin.
18 million students study Spanish as a foreign language.
Latin American countries have experienced strong economic growth for years with GDP growth, resulting in driving major trade, economic and political agreements.
Hispanic actors and singers are gaining worldwide recognition and fame.

Spanish is the official language of 21 countries and the second most spoken language in the world in terms of native speakers

Some predictions for the future of the Spanish language:

In 3 or 4 generations, it is estimated that 10% of the world's population will understand Spanish.
By 2030, some 535 million people in the world will be native Spanish speakers.
By 2050, the United States will become the country with the world's largest population of Spanish speakers.
Economy and culture: More and more companies value employees with Spanish language skills, a language that provides access to one of the fastest-growing markets in the world.
The world is rapidly becoming multilingual, and Spanish is one of the key languages of the future.

The importance of knowing Spanish goes beyond the borders of Spain. Large companies have decided to broaden their horizons and are already present in larger international cities.

🤝 Doing business in Spanish

Think you need to make a change in your business? Maybe Spanish can help expand it – not only does it have 400 million native speakers but it also comes with a large Hispanic population in the U.S., which greatly increases the importance of the language in that region. An additional fact that highlights the importance of the language is that more than 21 million students in schools and institutes study Spanish as a foreign language.

Young people all over the world are learning this language, and we have to take advantage of its great expansion and promote our trade. Due to its worldwide deployment, Spanish has become a key language for creating alliances between different business circles, such as the strategic Latin American market. Some sectors, such as the world of telecommunications with Telefónica at the forefront, are good examples of this.

Financial sector

We must also not forget that there are many other areas where Spanish business is booming and represents the Spanish brand with guaranteed success. Here one can mention, for example, the financial sector with renowned banks such as Santander and BBVA that perhaps best capture the significance and crucial role of the Spanish language in the business world.

The latter has become one of the largest financial companies in the world and, in addition to Spain, is present mainly in Mexico, South America, the U.S., and Turkey. On the other hand, Santander Bank – which is also one of the world's leading banks – is present in the markets of the United Kingdom, Portugal, Poland, Brazil, Chile, and Argentina, among others.

Retail world

Another strength of Spanish commerce lies in the retail sector. Spanish can open many doors when it comes to promoting your business, for instance, in the world of textiles, with the Zara brand at the forefront. There, Spain has one of the most important multinational groups in the world, Inditex – a brand that is present in 5 continents with more than 7,000 stores divided among its main brands.

💭 Closing words

For all these reasons above, Spanish has become essential in our globalized world. Not only is it the key that allows us to access the prominent Hispanic culture and enjoy the works of universal masters of literature, art, and cinema, but it also opens many doors at a professional level.

🚩 Spanish localization with Localazy

Localazy allows you to translate your software projects, websites, and other digital content into many languages, including Spanish. And as said earlier, Spanish is the most popular language among Localazy users!

➡️ Learn how to order translations for your project in\
The ultimate guide to Localazy translation services.

Translate your projects from English to Spanish comfortably with Localazy. Among other things, you will want to make sure that you're hitting the right dialect too! Don't be left behind and dare to invest in good translations that sound natural. Enlist our localization team with professional translators trained in different areas to satisfy all of your company's needs. Don't think twice and let your company reach beyond its current boundaries with Localazy.

How to Translate Idioms the Right Way?

Localazy Team — Thu, 05 Jan 2023 13:30:15 +0000

Learn why idioms are difficult to translate correctly, how to identify them in the text, and figure out their meaning to come up with the best translation in this article.

Translators know very well that idioms aren't a piece of cake to translate. 🧁 Easy-to-translate idioms are a drop in the bucket, and even the most skilled professionals can find it hard to translate the majority of them because of their metaphoric meaning. 🧙‍♂️

Let alone machine translation engines that will attempt to embarrassingly translate the idioms word-for-word. 📃 That happens because there are some culprits to translating idioms literally, including:

😵 Loss of meaning: When an idiom is translated literally, it doesn't convey the intended meaning. It classifies as a bad translation.
💭 Loss of imagery: Idioms are all about conjuring up comparative imagery in your mind. Translating that literally completely messes up the idiom's meaning.
🔨 Loss of usefulness: Translating an idiom literally rips off its intended use and distorts the meaning of the text. The idiom won't be of any use in such a form.

A literal translation of idioms is risky, especially when translating complex texts that are too technical or academic. 👨‍🏫 Why would you want to add more fuel to the fire by throwing a vaguely translated idiom? This said it's about time we learn how to properly translate idioms so that you're always on the ball when asked to translate them. ⛹️

🤔 How to Translate Idioms Properly?

Don't fret. Idioms can be challenging but not impossible to tackle. ✊ All you have to do is sit down and follow a step-by-step process that helps you beautifully adapt the idioms into your target language. 🏁 In the end, what's the worst thing they can do to you? They're just words. You can always make it even if you only understand the train station. 🚂

Step 1: Identify the Used Idioms

Scroll or flip through your materials and mark those daunting idioms. How to spot them? 🧐 Their first traits are always remarkable imagery that makes you secretly chuckle before bursting into an "Aha" moment and a witty comparison.

Idioms are common in opinion pieces, fiction, news, and whenever clever writers are hired to write content. Basically, not only fiction writers make use of idioms.

Look at this ad campaign by Scholl and how they've used the idiom: "You pay through the nose," which means paying an unfairly high price. 💰 At the same time, the idiom can be taken literally as having to endure a bad smell. 👃

Marketing and advertising are fueled by strong imagery, and this idiom has nailed it. The point is that not only can you find idioms in other works besides fiction, but you find some excellent uses that leave you speechless.

But identifying the idioms in a text remains challenging. Without knowing the specific meaning of the idiom you run into, it will be hard to classify it as an idiom. 🤔 However, idioms have their own characterizing elements to help you spot them.

At first, they resemble metaphors unrelated to the text's topic. 🤓 When your knowledge of the source language tells you that the sentence you ran into doesn't make much sense literally, chances are that you've stumbled into an idiom.

For example, when you read in Wall Street Journal that "YouTube Stars Keep Facebook at Arm's Length For Now," that doesn't mean that they are keeping Facebook physically at arm's length but rather that they are distancing from its use. 😉

Or, when the empty box of unread messages on Slack displays a message that says to you, "the world is your oyster," 🦪 it doesn't mean that the world magically transformed into an oyster. What it actually means is that there are no limits to what you can do with your potential. 🚀

Step 2: Figure Out the Meaning of the Idiom in Your Context

Defining the idiom means that half of the translation task is already made. The beast is almost defeated! Now, we have to wrap our heads around it for an accurate translation. Considering idioms are tough nuts to crack, don't get discouraged if you're confused.

To understand the idiom's meaning, you can search online or ask a native speaker. There are a ton of resources on this matter, such as The Oxford Dictionary of Idioms, The Free Dictionary by Farlex, the Cambridge Dictionary, or simply Google. 😃 Here, we are talking about English idioms because, for idioms in other languages, you might need to search for other official or unofficial sources and dictionaries. 📚

At Localazy, we're inviting contributors from all over the world to help us build a repository of idioms translated into multiple languages. Here, you'll find not only translations for idioms but their adoption into your native language.

Step 3: Translate the Idiom as Accurately as Possible

Now go through these three steps to find your idiom's fairest and most accurate translation. Each stage aims to obtain the best translation possible in terms of structure, word choice, imagery, and meaning. ✨ But often, we can't have them all in the target language, so we'll have to compromise on some features we mentioned. 👨‍🏫

Here are three approaches to idiom translations from the hardest to the easiest:

Find an Equivalent Idiom With the Same Words and Meaning

This is the ideal solution. ✨ For some idioms, you might be able to find the ideal idiom that suits your translation, and this includes a phrase that matches in structure and often in the imagery that it conjures up. 👻

Even though the probability for an idiom to be found in another language with the same words and structure is very low, they're not inexistent. 👉 For example, the idiom "that's a child's game" in English has a similar counterpart in French: c'est un jeu d'enfant. ⛹️

Find an Equivalent Idiom With the Same Meaning

There's still hope when the first approach seems impossible, and there is no equivalent idiom with the same words and structure. The second most ideal approach for translating idioms is to find an adequate idiom in the target language that has the same meaning as your idiom in the source language but uses different words. 📜

This approach gives you more options since you're not restricted to the word choice but only the structure. You'd be surprised at the similarity of idioms you'll find across languages around the world. Plenty of similar idioms differ from each other only in a single word used, making translation increasingly easy. 😃

We all know the common idiom: it's raining cats and dogs. 🐱🐶 Well, in Norway, they have a pretty similar idiom: it's raining witches (det regner trollkjerringer). 🧹 In Germany, they say: it's raining shoemakers (Es regnet Schusterjungen), which is equally flabbergasting! 👞

Simply Convey the Meaning

The truth is that, practically, you'll struggle to find matching counterparts for your idioms. Not all of them will have twins in other languages. 👬 To the point where it becomes impossible to find an equivalent, you have to give up the ghost of that approach and merely attempt to describe the meaning of it thoroughly and clearly. ⚪

As long as you can accomplish this, your job as a translator is done, even if you don't replace an idiom with an idiom. 🔄 In the end, clarity is our main goal when translating and localizing content. Loyalty to literal translation shouldn't come at the expense of qualitative and crisp content. 💻

✔️ Final Thoughts

Here, we have to tie up the article, hoping to have inspired you in your journey as a translator. Translating idioms is challenging and sometimes a nerve-wracking experience but also a necessary battle to win.

Idioms enrich content and speak to the reader in its vernacular version of the native language. But if you share a different love for idioms, consider joining our open-source project to localize all the world's idioms. 🗺️

Nuxt 3 + Tailwind + Eslint + i18n + Sentry Starter

Localazy Team — Tue, 01 Nov 2022 13:17:51 +0000

This short tutorial will help you set up a scalable Nuxt 3 boilerplate for small and large projects. Find out more about the configuration that Localazy uses for their website and build your next project on proven and solid ground.

Nuxt 3 is nearing the stable release, bringing many great new features to test out and benefit from. As the team states, the deployments are up to 75 times smaller compared to v2, everything runs much faster (both production and development), and the Composition API approach allows for more extensibility and flexibility than ever. All of that is powered by Vue 3 with native TypesScript and ESM support.

However, with such a giant leap, most of the guides on the internet have become obsolete, and content creators and developers need to step up to provide up-to-date examples. In this article, I will guide you through the initial setup we're currently using at Localazy. Do note that the Nuxt v3 is still developing, and some of the steps outlined here might not work in the future. All the packages and configurations have been tested on the Nuxt version 3.0.0-rc.6.

Here is the final repository with all the tools and modules installed.

🧰 Setup Overview

For our Nuxt 3 starter, we'll install tools and modules I find invaluable for small and, especially, large projects. Naturally, you'll need additional packages for your particular project, but the following tools should facilitate your development efforts every time.

Tailwind CSS

A utility-first CSS framework created to build modern websites rapidly. Not only does it provide you with 99% of the CSS classes you'll ever need, but it also has native support for responsive classes, pseudo-classes, and more. It's also super lightweight as it drops unused classes during the build process that are not used in the production version.

Eslint

Eslint is a highly configurable static code analysis that can identify problematic patterns in your javascript files. With the right plugins and extensions, it can also scan your Vue/Nuxt files and enforce a unified coding style across your development team.

I18n

This is an abbreviation for internationalization and stands for means of adapting computer software to different languages. This is a crucial aspect of any product that aims to become successful outside your country's borders. Remember, having your product in English only is not enough.

Currently, the popular @nuxtjs/i18n module for Nuxt v2 is not yet stable for v3. Therefore, we're going to use the @intlify/nuxt3 package, which is an extension of vue-i18n-next for Nuxt. It does not support route localization and SEO i18n enhancement, but this can be developed independently if you need it.

Sentry

Sentry is an application monitoring and error tracking software that supports over 30 coding languages. It helps developers track down issues and optimize their code's performance. There isn't a better way to annoy your users than by having them face the same issues repeatedly. Sentry helps you identify those problems quickly and gives you enough information to fix them.

💚 Create the Nuxt project

Let's start by creating a new Nuxt project. The team has made it extremely easy this time, and we'll have the basic boilerplate project up and running with just three lines of code.

npx nuxi init nuxt3-starter
cd localazy-nuxt3
npm i

This process should be fast as the base project does not include almost any dependencies. Run npm run dev to start the development server.

📌 Add Eslint

First, install the dev dependencies

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-nuxt eslint-plugin-vue

Then create .eslintrc.js file in the root of your project and paste in the following:

// .eslintrc.js 
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:@typescript-eslint/recommended",
    "plugin:nuxt/recommended",
    "plugin:vue/vue3-recommended",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {

  },
};

The rule extensions we're using are plugin:@typescript-eslint, plugin:nuxt/recommended, plugin:vue/vue3-recommended. Personally, I find that these three extensions are enough to enforce an enjoyable code style while pointing out the most pressing issues. When combined with Volar for VS Code for support of TypeScript in Single File Components, it is a setup that can speed up your development tremendously.

The configuration above is enough to catch the code errors and styling issues in your IDE. However, if you'd like, you can propagate these errors into the browser as well through the vite-plugin-eslint for Vue 3's Vite server (learn more about Vite here).

To enable this, install npm install vite-plugin-eslint --save-dev and then adjust the configuration in your nuxt.config.ts.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import eslintPlugin from 'vite-plugin-eslint';

export default defineNuxtConfig({
  vite: {
    plugins: [
      eslintPlugin()
    ]
  },
})

🖼️ Add Tailwind

Let's start by installing Tailwind and Nuxt's Tailwind wrapper as dev dependencies: npm install -D tailwindcss @nuxtjs/tailwindcss. Then add @nuxtjs/tailwindcss to the modules section in nuxt.config.ts

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import eslintPlugin from 'vite-plugin-eslint';

export default defineNuxtConfig({
  vite: {
    plugins: [
      eslintPlugin()
    ]
  },
  modules: [
    '@nuxtjs/tailwindcss',
  ]
})

I had some issues using the recommended npx tailwindcss init command since that creates a .js configuration file, but Nuxt couldn't pick up the content configuration section. Let's create a TypeScript variant instead manually. Create a file called tailwind.config.ts in the root of the project and paste in the following:

// tailwind.config.ts
import { Config } from 'tailwindcss';

export default <Config> {
  content: [
    'app.vue'
    // Add all files that contain Tailwind classes
    // e.g. './modules/**/*.{vue,js,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

The @nuxtjs/tailwind module adds the base Tailwind utility classes behind the scenes for you. If you wish to modify it, refer to the official documentation.

🚩 Add i18n - @intlify/nuxt3

Install the dev dependency by running npm i -D @intlify/nuxt3. Then create lang folder in the root of your project, which we'll use as the localization files source for the i18n module and create the en.json file inside. We'll also set English as the main and fallback locale for the moment. Modify your nuxt.config.ts to accommodate these changes.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import eslintPlugin from 'vite-plugin-eslint';

export default defineNuxtConfig({
  vite: {
    plugins: [
      eslintPlugin()
    ]
  },
  modules: [
    '@nuxtjs/tailwindcss',
    '@intlify/nuxt3'
  ],
  intlify: {
    localeDir: 'lang',
    vueI18n: {
      locale: 'en',
      fallbackLocale: 'en'
    }
  }
})

The list of supported languages, as well as the fallback language, will depend on your project.

Learn how you can connect Nuxt 3 to Localazy at translate your project in no time

At this point, when you create some keys in en.json , you'll be able to render them in your application via the $t('...') utility function. Here is an example:

// lang/en.json
{
  "hello_from_localazy": "Hello from Localazy",
  "description": "Nuxt 3 + Tailwind + Eslint + i18n + Sentry Starter"
}

// app.vue
<template>
  <div>
      <h1>`{{ $t('hello_from_localazy') }}`</h1>
      `{{ $t('description') }}`
  </div>
</template>

👁️ Add Sentry

First of all, head to the Sentry website and sign up. Once logged in, create a new project and navigate to its settings, and open Client Keys (DSN). Note down your DSN; we'll need it shortly.

Back in your project, we'll install Sentry as a Vue-based client-only plugin. Firstly, install the required dependencies npm i @sentry/tracing @sentry/vue. Then create plugins folder and sentry.client.ts file inside. Paste in the following and fill in your DSN key.

// plugins/sentry.client.ts
import * as Sentry from '@sentry/vue';
import { BrowserTracing } from '@sentry/tracing';

export default defineNuxtPlugin((nuxtApp) => {
  const { vueApp } = nuxtApp;

  Sentry.init({
    app: [vueApp],
    dsn: '<YOUR-DSN>',
    environment: process.dev ? 'development' : 'production',
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(nuxtApp.$router)
      })
    ],
    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 1.0,
    beforeSend (event, hint) {
      // Check if it is an exception, and if so, log it.
      if (event.exception) {
        // eslint-disable-next-line no-console
        console.error(`[Exeption handled by Sentry]: (${hint.originalException})`, { event, hint });
      }
      // Continue sending to Sentry
      return event;
    }
  });

  vueApp.mixin(Sentry.createTracingMixins({ trackComponents: true, timeout: 2000, hooks: ['activate', 'mount', 'update'] }));
  Sentry.attachErrorHandler(vueApp, { logErrors: false, attachProps: true, trackComponents: true, timeout: 2000, hooks: ['activate', 'mount', 'update'] });

  return {
    provide: {
      sentrySetContext: Sentry.setContext,
      sentrySetUser: Sentry.setUser,
      sentrySetTag: Sentry.setTag,
      sentryAddBreadcrumb: Sentry.addBreadcrumb,
      sentryCaptureException: Sentry.captureException
    }
  };
});

If you'd like to dive deeper into the configuration, I recommend reading through the official Sentry documentation.

At this point, when an error arises in your application or you'll capture exceptions by hand. We're attaching a couple of Sentry methods to the Nuxt instance, and they are available on the client side through useNuxtApp composable. For example:

// app.vue

...

<script lang="ts" setup>

const { $sentryCaptureException } = useNuxtApp();

onMounted(() => {

  $sentryCaptureException("Test exception");

});

</script>

✔️ Conclusion

Throughout this article, we've integrated and implemented the fundamental tools and modules that will help your Nuxt 3 projects scale easily. Here is the final boilerplate that you can download. Happy coding!

🎁 A gift for you

Use the coupon "lovenuxt" during your Localazy plan checkout and get a 25% discount on your purchase.

Discount applies to Professional, Autopilot, and Agency plans. Enjoy!

The ultimate guide to Localazy translation services

Localazy Team — Wed, 26 Oct 2022 10:44:26 +0000

Localazy can take complete care of your translation process with the built-in translation services available inside the platform. Forget the hassle of managing translation projects forever. All you need to do is choose the language and service. Learn everything you need to know in this article.

Welcome to the ultimate guide to Localazy translation services! After reading this article, you should be able to:

tell the difference between one-time and continuous translation services
know the benefits of using Localazy translation services
understand what each Localazy service does and what results to expect
get answers to most of the questions you might have about the services
place your first order with Localazy 😊

⚖️ One-time or Continuous Translation?

What is the difference between one-time and continuous translation services? You might already have experience with the one-time model. It usually entails extracting the content you need to get translated into some human-friendly format, contacting the translation agency of your choice, 📤 sending them the files, getting a quote, confirming the order, and then waiting for the result. ⏱️

There might also be several rounds of corrections until you get the result which you then have to implement into your product - sometimes copy-pasting strings, making sure everything is translated, and so on... 🙄

This approach works great for documents and articles you don't expect to change often. But, for software microcopy, marketing materials, and website content, a continuous translation model will save you a lot of time and nerves.

Modern translation management systems (TMS), such as Localazy, enable software makers, marketers, and content creators to integrate their translations with the tool where translations actually happen and unlock the continuous mode of service. At Localazy, the process is simplified into three steps: integrate your project (or upload your strings in one of the supported formats), provide the context, order the services and watch as the translators do their work. 😎

Then, if at any point, any changes happen, e.g., you add more texts, change already translated texts or decide to add a new language, everything happens automatically. 🔄 And the best thing is that translations are available immediately and without you lifting a finger when your project is integrated - more on that in the next section.

👍 Benefits of continuous services by Localazy

You can already see why continuous translations are the best choice for software copy and digital marketing content. Several other benefits are waiting for you when you decide to go with Localazy and order translation services from our Continuous Localization Team.

Setup needed only once

As said earlier, once you integrate your project, you don't have to bother developers with updates again. All translations in Localazy can be delivered to your project with a simple command or an automated trigger. You can automate the synchronization of source texts with Localazy and the delivery of translations with our advanced CLI, API, or CDN - just ask your developer or contact us!

No file hand-offs and e-mails

Collaboration is enabled directly inside the Localazy platform. Forget about long and chaotic e-mail threads and multiple file versions.

Flexible and transparent pricing

You immediately see the price-per-word for each language and service combination on the order screen. You also don't have to wait for quotes because Localazy calculates the total estimate before you place your order. If your budget is tight, you can choose a more affordable option for less important languages. More on that later.

Translations are available immediately

The Localazy platform is ready for agile management of translation work. Once our translators start working on your project, the translations they save are available immediately. This means you can review them instantly and deploy them faster - effectively cutting time-to-market.

Pro-active approach to changes

Another considerable benefit of the continuous translation mode is that after your project is wholly translated, Localazy will monitor your project for newly added texts or changes to source strings that require new translation. Our translators are then notified to translate the new content as soon as possible.

Context is king

The context for translation is readily available inside the platform - users can see relevant glossary terms highlighted in the source text, browse relevant screenshots, ask for clarification in comments and check for any translation notes by the project owners. We highly recommend you prepare a rich context base before ordering translation services. More on that later.

Less error-prone process

Tag and placeholder highlighting and other preventative measures also help translators to produce accurate translations for your project.

💼 Understanding the services Localazy offers

There are currently four services available to choose from. Only two of them actually produce new translations, and that are Human-Assisted Machine Translations and Professional Translations. One of the other two is designed to ensure the validity of crowd-sourced translations (Human Translation Validation), and there is also Proofreading, which serves as a QA measure after professional translations. Below is a brief description of each service and what results to expect.

Professional Translations

The most popular service we offer is Professional Translation. After ordering this service, professional human translator(s) selected by Localazy will translate your project into the chosen languages while following provided context cues and assistive technologies. You can get your whole project translated by professional translators.

Before you order:

To ensure the best possible quality, we highly recommend the preparation of a project glossary, adding translation notes and context screenshots, and the composition of a style guide.

Results:

Translations made by professional translators are automatically approved and ready to be used in your project as soon as they are produced.
The translator utilizes uploaded screenshots, provided translation notes, style guides, comments, and other context and assistive technologies offered by Localazy to provide the best translation possible.
Placeholders or tags are included and not translated, there is a correct number of new lines, trailing spaces, etc., and the translator does his best to preserve maximum translation length. Still, if it’s impossible to achieve, the translator will rather skip the translation, and we will contact you to avoid breaking your project.

What not to expect:

Transcreation of source strings to adapt the translation to the symbolic meaning of source text based on the ambiguity of words/phrases, slang, puns, etc.
One-on-one interaction with translators to discuss the project beforehand, as the service is highly automated.
Translators won't diligently research if the translation is perfectly fitting for the domain - industry-specific texts etc., are translated on a best-effort basis.

Example use cases:

Excellent choice for any consumer-facing app or project intended for the general public.
Great for specialized applications and games. However, we recommend you prepare a good context base and glossary for translators first.

Note: In case of legal, medical, science and manufacturing applications or highly specialized niche-targeted products, please contact us before ordering professional translations to discuss your requirements.

Professional Proofreading

Even though humans are the best translators, mistakes can still happen. After all, we are only human. That's why this service acts as a quality assurance measure for Professional Translations. So, if you want to be 99% sure that your translations are correct, we recommend you tick this service alongside Professional Translations.

Before you order:

This service is generally recommended to be active simultaneously with Professional Translations.

Results:

Translations should be completely free of mistakes. Please remember that the last quality checks should always be made by people involved in the project who know every nuance.
The same principles that apply to Professional Translations apply here as well.

What not to expect:

We won't proofread crowd-sourced translations (use Human Translation Validation instead)
You also shouldn't try to use MT pre-translate and then order proofreading to clean up the errors. That's what Human-Assisted Machine Translation is for. 🤓

Example use cases:

You already have existing translations from professionals (can be outside of Localazy, e.g., after migration from competition) and want to have your translations proofread to ensure their quality.
If you have a fresh project and want the best possible quality from the get-go, then activate the proofreading service together with the Professional Translations service.

Human-Assisted Machine Translation

Previously known as the Virtual Translator and frequently shortened to "HAMT," the Human-Assisted Machine Translation by Localazy is the best of both worlds when it comes to translation. This service is more affordable than Professional Translation, but the human touch ensures your project won't break when the machine misinterprets something.

Before you order:

There is no special requirement to prepare your project for this service but remember that the translation results are coming from a machine and might end up being wrong. The human is there to spot obvious errors and correct minor mistakes in punctuation etc., not to make sure the meaning isn't accidentally lost.

Results:

The best translation out of several provided by different machine translation engines (Amazon, Google, DeepL, Microsoft) is selected by a human.
Placeholders or tags are included and not translated, the maximum translation length is preserved, and there is correct letter casing, punctuation, etc.
Translations made by Human-Assisted Machine Translation are automatically approved and ready to be used in your project. With enough credits, you can get your project translated completely. We advise you to follow up with thorough localization testing to correct possible mistakes.

What not to expect:

Ensuring and researching if the meaning of the translation exactly matches the source meaning.
Spellchecking and correcting grammar mistakes might not be 100%. Only obvious errors are corrected.

Example use cases:

Perfect for testing a new market when budgets are tight, but you don't have the time to go through machine translation results in-house.
Great for languages that are not a priority now, but you need to have the language version ready and functional.

Human Translation Validation

Are you an independent developer or a non-profit organization depending on help from volunteers? This service is designed with crowd-sourcing in mind. Upon enabling this service, a human reviewer uses machine translation tools to verify existing translations that are waiting for review. The reviewer rejects invalid translations and accepts valid ones. Additionally, the reviewer may correct minor mistakes for translations that pass the checks (see below). This way, you don’t have to review volunteers' translations by yourself.

Before you order:

Remember that this service doesn't produce any new translations! You need to have some translations ready for review in the target language.

Results:

The reviewer will check if the translation matches the source using backward machine translations, i.e., translation is generally understandable in the target language.
The reviewer will reject translations that exceed the specified length.
The reviewer ensures that placeholders or tags are included and not translated in otherwise valid translations.
The person providing this service might not understand the target language but relies on machine translation technology and their best judgment.

What not to expect:

Correcting the translation ➝ if the translation is invalid, it’s rejected and not corrected.
Validation is generally not available for translations mass-produced by machine translation engines. Your project must contain translations made by Localazy users waiting for review in the selected language pair.

Example use cases:

Indie games, hobby apps, and non-profit projects that depend on volunteers to translate their texts are all great for this service. Save your time and get the translations checked for an affordable price.

📝 Placing your first order

So now you know which service (or combination of them) will suit your project best. It's time to order the translations! Sign up and integrate your project or simply upload the files with your source texts via the web interface.

There are multiple ways of integrating your project. You can learn more in the docs article: Importing content for localization

Open your project in Localazy and click on the "Order Translations" button in the left submenu.

Select languages

Then you select languages from the dropdown list (you can pick multiple at once) and look at the icons next to the language name to see what services are available.

Generally, we expect your source language is English but don't hesitate to contact us if you can't find a match for your desired source language!

Tip: Please get in touch with us if you don't see the language you are looking for. We might be able to find a translator for you upon request.

Choose services

For each language, you can select the service(s) to activate by clicking on the switcher. You also see the price per word and a cost estimate for finishing the translation of all remaining strings.

In the picture below, you can see that we are about to order Professional translations to Czech, the total estimate is $967.8, and we have a $1000 credit balance, which should cover the cost.

Add credits to your account

Now that you know the total estimate for everything click on the "Increase" button in the top right corner and top up your credits. The lowest amount you can buy is $100. This is because there is some overhead in selecting the translators that will do the work, assigning them to your project, and so on. We don't want to burden our translators with small chunks of different new projects, remember that there are real people behind these services! 👩‍💼🙋‍♂️

Do you need to top up more than $5000 in one payment? Does your bank or card provider cause you trouble? Contact us to setup an alternative payment method.

Confirm your order

Now that you have enough credits and everything is set up click the "Place Order" button to send the order our way.

What happens now? Usually, our "Localady" Zuzana (or Zuzka), who is in charge of the translation services team, will contact you in case there is anything that needs clarification. Then she'll confirm your order with you.

And that's it! Your translations should be done in one or two weeks, depending on the capacity and volume. You can watch the progress in Localazy and focus on other business you need to attend to.

🤔 Frequently Asked Questions

If you have any questions about the process, reach out and ask us anytime. Below is a list of the frequently asked questions we were getting from our customers.

What if I have special requirements?

If you have special requirements regarding professional translation, contact us and tell us about your situation. It might seem that the high automation we preach doesn't allow for any personalization or modification, but we are committed to finding a solution for almost any use case.

How do you select translators for my project?

We collaborate with vetted language service providers and professional freelance translators. We prefer long-term relations and carefully maintain a list of selected partners. Once the translator is assigned to your project, they will most likely work on it repeatedly since they already know your project and its context. In the case of Proofreading, the another set of eyes will be a different translator than the one who conducted the first round of translations.

Why did the price change since the last time I checked?

The order screen displays the estimates for the current state of translations. The total estimate can be significantly lower if our translators already did some work. However, if you add or change the texts, which increases the total number of words, the price can grow before the work is finished.

We also frequently run promotional discount periods for certain languages. Maybe the last time you checked, such a discount was applied to the language. Check Localazy for new discounts every once in a while!

I am a translator and would like to join the team. How to do it?

Please send your CV to zuzana@localazy.com along with a few words about yourself. Ideally, you should have prior experience with Localazy and software/app translation.

What is the difference between the available services?

I hope we explained that in the paragraphs above. If you still have questions about the details of each service, please read the terms of service or contact us with your question.

How can I help translators and ensure the best quality?

To ensure the best possible quality, we highly recommend the preparation of a project glossary, adding translation notes and context screenshots, and the composition of a style guide. There is currently no dedicated interface for your style guide, but you can attach it as a link to a PDF document in the project description where translators will find it. Doing this before ordering translations will set you up for success, and translators will have all the information they need.

How fast can Localazy finish my translations?

The usual period is one to two weeks. This depends on the volume of your project and our capacity. Also, remember that the service does not deliver translations instantly, as humans provide the services. Therefore, it takes some time before the translations and reviews are conducted. But as soon as the translators start working on your project, their translations will begin to appear in Localazy continuously as they work.

How to check the status?

You can check in the Languages tab or on the order screen. If you have concerns or questions, please get in touch with us.

✔️ Conclusion

I hope this article helps clear up any confusion you might've had about the Localazy translation services. I am confident you can now distinguish between Human Translation Validation and Professional Proofreading and know how to order Professional Translations.

Remember to prepare a sound context library for the translators before you order to ensure that nothing gets lost in the process. Do you already have experience with our translation services or have any questions or thoughts? Let us know in the comments!

Managing multilingual content with Strapi CMS & Localazy

Localazy Team — Mon, 24 Oct 2022 12:30:25 +0000

Learn how to manage your Strapi content in multiple languages and translate it seamlessly with the verified Strapi localization plugin by Localazy.

❓ What Is Strapi CMS?

Strapi is a headless, open-source CMS. A headless CMS is a content management system (CMS) that only manages the content on the back end. It was designed as a content repository that makes content available via an API for display across any device. Strapi allows building, managing, and publishing content-rich experiences to any digital service, channel, or device.

Strapi, like Localazy, can help developers save time while still allowing them to utilize their preferred tools and frameworks.

💜 Find more information about Strapi at Strapi.io

⭐ Benefits of using Strapi to manage multilingual content

Strapi as a backend service is important because it allows for complete automation with localization, and it is quite a seamless experience with the content management system. Some more benefits include:

It takes a shorter time to deploy an application.
The content management system has a user-friendly interface
It allows for universal content distribution and management across any platform and device.
Above all, it supports internationalization

🚀 Goals of this tutorial

This tutorial aims to give a fundamental approach to what the Strapi localization plugin can do. Following an example of building a ticket booking platform, you will learn:

how to create a new Strapi project,
how to configure the Strapi localization plugin by Localazy to manage multilingual content,
how to create a Vue.js frontend to display the content.

The frontend implementation will be built with Vue.js, a JavaScript framework, and the backend implementation will be done with a clean Strapi project and the Localazy plugin.

At the end of this tutorial, you should know how to get started with the Strapi localization plugin for development and how to showcase the translated content to the client side.

Prerequisites

You only need two things to start:

A clean Strapi v4 project
A Localazy account - you can sign up for a free account now.

💜 Strapi Implementation

We will be installing Strapi and creating an instance of the Strapi project. To build this project Strapi structure, you need to do the following:

You need to download and install Node.js (version 16 is recommended by Strapi).
You need npm (version 6 only) or yarn to run the CLI installation scripts.

You can learn more in the Strapi Quick Start Guide

Project Bootstrap

We will install our Strapi project via the Strapi Command Line Interface (CLI) and run it locally. Open the console in the folder where you want to create the project and insert the following code:

npx create-strapi-app ticket-app-backend --quickstart
# OR
yarn create-strapi-app ticket-app-backend --quickstart

After creating this instance, the project should open automatically in the browser. You can also run the following command to open it in your browser.

npm run develop
# OR
yarn run develop

A new tab will be opened in your browser, and you can register as an admin.

Modeling Strapi Content Type Builder

After successfully registering as an admin, you will be routed to the dashboard. In the admin dashboard, we will be building the content type of the application. Using the case of a ticket booking platform, we will need models such as:

Hero title: This is the main heading of the page
Hero text: This is the sub-heading of the page
Placeholders: This includes the following:
- Name of passenger
- Number of travelers
- Ticket class
- Origin
- Destination
- Departure date

Follow these steps to create your content type:

On the left-hand side of the panel, click on the Content-Type Builder and then on Create new collection type. Fill in Ticket-booking-platform as the display name. Click on continue to create a new collection.
This prompts a new modal where you can select the fields for your collection type. Select Text and fill in hero_title at the Text field. Click on Add another field and select Text for the hero_text field too.
Click on Add another field and select Components for the placeholder fields. Here, you will add a display name and category for the new component. Click on Configure the components and add a name for the attributes. Afterward, you can then add fields to the component. We will add the name_of_passenger, ticket_class, origin, destination, departure_date and number_of_travellers fields.

Make sure that all of the added fields have the "Enable localization for the Content-Type" option checked to be able to upload them to Localazy - the option can be found in Advanced Settings while adding the field. The checkbox might not be checked by default.

After adding all the required fields, click the Finish button and Save the collection.

Adding Content to Application

We will be adding content to this model created. On the left-hand side of the admin panel, click on the Content Manager and then on Create new entry.

You fill in the content and click on Save.

After creating content for our application, we will move on to translating the content using the Localazy plugin.

🚩 Configuring the Localazy plugin

The Strapi localization plugin by Localazy helps you transform any Strapi project into a multilingual site. With Localazy and Strapi, you can break language barriers and unleash multilingual content.

You can find the Localazy plugin for Strapi localization in the Strapi Marketplace

We will install the Localazy plugin in our Strapi application. You can run the following command to install the plugin:

npm install @localazy/strapi-plugin
#OR
yarn add @localazy/strapi-plugin

After installing the plugin, run the following commands. The first command rebuilds your Strapi admin to apply the changes and npm run develop restarts your application again.

npm run build
npm run develop

You can refresh the page on your browser, and you should see the Localazy plugin on the left-hand side of your admin dashboard, open the plugin page.

Click on Login with Localazy. You would be routed to the Localazy page. No worries, you can sign up for free if you do not have a Localazy account already.

After signing up, you can log in with your account email and password.

After being authorized by Localazy, you will be requested to create a new project. In this new tab, we will authorize the Strapi plugin to access our Localazy account and create a new project called ticket-app.

Click on the Authorize button to give access. You should get a confirmation tab confirming your authorization with Localazy was successful.

Handling Content Transfer Setup in Strapi

In this step, we will be handling content transfer setup in Strapi. Navigate to the Strapi admin dashboard and click on Content Transfer setup. Here, we will choose the contents that we need to translate.

It is important to note that only text based content can be translated.

All the fields should be checked for translation for our model build as they are text-based.

Now that we successfully set up our content transfer, let's upload the content to Localazy.

Upload content to Localazy

This section serves to upload the booking content from the Strapi project to Localazy. We will click on the Start upload button in the Upload to Localazy tab to start uploading our content to Localazy.

Head over to your Localazy account, and you should see the content in the source language was uploaded successfully. The next thing is to add the languages you intend to translate into. For our test case website, we will add Spanish (es), Czech (cs), and French (fr).

Localazy offers three general approaches to choose from and blend to translate your project:

💪🏻 Translate on your own or invite contributors - You can start translating on your own and use our built-in suggestion system.
🦾 Translate everything in bulk via machine translation - With the Localazy Autopilot plan, you can instantly translate all strings by running a machine translation over the content.
🚩 Fully automate the translation process with the Continuous Localization services - Once your Localazy integration is set up, you can order translations from our vetted translators and get your project translated by professionals automatically. The service is also proactive, so you don't have to micromanage translators, and you can visit Localazy only once in a while to check the progress.

In this tutorial, we will translate the content ourselves with the free built-in suggestions from Amazon Translate & ShareTM. Click on Translate, and you will be directed to a page where suggestions will be given, and you can select which translation to go with.

When everything is translated successfully, you will see smiley faces next to the completed languages. Now we can head to the Strapi application, where we can download the translations and make our project multilingual.

Downloading translated content to Strapi

In the Strapi project, we can now download our translation. Navigate to the Download to Strapi tab, and click on the Start download button. You would get a report that tells you the locales created, the contents that were translated correctly, and the new entries created for each new locale.

Click on the Content Manager. If you explore any entry, you should see new locales created for them. Click on an item to see its detail. Only the fields set for transfer in Content Transfer Setup were localized.

Below is an example of the original English page and the French version after downloading translations from Localazy.

Remember to publish all the content entries from the content manager as only published content can be viewed on the client side.

Showcase the translated content

Download the Postman API, which we will use in the next step. Here, we will be testing our API for localized content. To test our API, we need to allow public access because if we try to access the API URL with our public client, it will return a 403 forbidden error.

To fix this, we will navigate to Settings and click on Roles in the Users and permissions plugin. Click on Ticket-booking-platform and select find.

You can test out the endpoint by accessing the URL http://localhost:1337/api/ticket-booking-platforms?populate=*&locale=${locale} where locale is the language to be translated to.

🖱️ Vue.js Implementation

We have built our Strapi project, and the Localazy plugin is configured. Now we will move on to creating our frontend application to consume our APIs with Vue.js.

What is Vue.js? According to the documentation, Vue.js is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

Create a new project

To create a new Vue.js project, follow these steps to get started:

Navigate to the project directory and install the Vue.js package using the following console command:

npm install @vue/cli
# OR
yarn add @vue/cli

Create a new project using the command:

vue create ticket-app-frontend

You will be prompted to pick a preset. Choose "Manually select features" to pick the features we need. Then select Vuex, Router, and Lint/Formatter:

Vuex is a state management library for Vue applications,
Router allows changing the URL without reloading the page,
and Lint/Formatter correctly formats the code.

After successfully creating your project, navigate to the folder directory and run our application.

cd ticket-app-frontend
npm run serve
#OR
yarn run serve

The URL http://localhost:8080/ should open your Vue.js application in your browser.

Dependency Installation

Usually, when creating a new project, you will need to install some dependencies that will help you with efficient development. At this stage, we need only Axios, the package dependency that will be used to make the call to the Strapi backend APIs.

npm install axios

Prepare frontend components

Firstly, delete all the files in the components and view folders, as these files are redundant in this project.

Add the following content to the store/index.js . This file handles the API call to the backend using Axios.

import { createStore } from "vuex";
import axios from "axios";
export default createStore({
  state: {
    bookingPlatform: [],
  },
  getters: {
    getBookingPlatform: (state) => state.bookingPlatform,
  },
  mutations: {
    setBookingPlatform: (state, payload) => (state.bookingPlatform = payload),
  },
  actions: {
    getBookingDetails: ({ commit }, locale) => {
      try {i
        axios
          .get(
            `http://localhost:1337/api/ticket-booking-platforms?populate=*&locale=${locale}`
          )
          .then((res) => {
            commit("setBookingPlatform", res.data.data[0].attributes);
          });
      } catch (e) {
        console.log("error", e);
      }
    },
  },
  modules: {},
});

In the views folder, create a BookTicketView.vue file and copy the following content:


<template>
  <div>
    <div class="header" :style="image">
      <div class="nav-bar">
        <select class="form-control" @change="onChange($event)">
          <option selected value="en">English (en)</option>
          <option value="es">Spanish (es)</option>
          <option value="cs">Czech (cs)</option>
          <option value="fr">French (fr)</option>
        </select>
      </div>
      <div class="hero" v-if="getBookingPlatform">
        <h3>`{{ getBookingPlatform.hero_title }}`</h3>
        <p>
          `{{ getBookingPlatform.hero_text }}`
        </p>
      </div>
    </div>
    <div v-if="getBookingPlatform.placeholders" class="form">
      <input
        type="text"
        :placeholder="getBookingPlatform.placeholders[0].name_of_passenger"
      />
      <input
        type="text"
        :placeholder="getBookingPlatform.placeholders[0].ticket_class"
      />
      <input
        type="number"
        :placeholder="getBookingPlatform.placeholders[0].number_of_travellers"
      />
      <input
        type="text"
        :placeholder="getBookingPlatform.placeholders[0].destination"
      />
      <input
        type="text"
        :placeholder="getBookingPlatform.placeholders[0].origin"
      />
      <input
        type="date"
        :placeholder="getBookingPlatform.placeholders[0].departure_date"
      />
      <button id="button">BOOK NOW</button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "BookTicketView",
  data() {
    return {
      image: {
        backgroundImage:
          "url(https://d2rdhxfof4qmbb.cloudfront.net/wp-content/uploads/20190711165133/iStock-498556541.jpg)",
      },
      bookingPlatform: [],
      locale: "en",
    };
  },
  computed: {
    ...mapGetters(["getBookingPlatform"]),
  },
  methods: {
    onChange(event) {
      this.locale = event.target.value;
      this.$store.dispatch("getBookingDetails", this.locale);
    },
  },
  mounted() {
    this.$store.dispatch("getBookingDetails", this.locale);
  },
};
</script>
<style scoped>
.header {
  background-size: cover;
  background-repeat: no-repeat;
  padding: 50px;
  height: 529px;
}
.hero {
  margin-top: 100px;
  width: 500px;
  font-size: 30px;
}
.container {
  margin: 50px auto;
  width: 768px;
}
.form {
  display: flex;
  padding: 40px;
  height: 100%;
  background: #007ac5;
  justify-content: space-evenly;
  align-items: center;
}
input {
  margin: 27px 3px;
  padding: 20px;
  border: none;
  border-radius: 3px;
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
select {
  border: none;
  height: 27px;
  width: 94px;
  border-radius: 6px;
}
#button {
  height: 65px;
  width: 150px;
  background: #e1a584;
  color: #000000;
  border: none;
}
</style>

Refactor the router/index.js file to suit the changes done so far. It should be similar to the following:

import { createRouter, createWebHistory } from "vue-router";

import BookTicketView from "../views/BookTicketView";

const routes = [

  {

    path: "/",

    name: "BookTicketView",

    component: BookTicketView,

  },

];

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes,

});

export default router;

Testing the Application

You can refresh the URL http://localhost:8080/ and you can see the frontend application, and from the drop-down, you can select the language you want to render. Examples of English and French are in the pictures below.

✔️ Conclusion

In this tutorial, we learned how to use the Strapi localization plugin by Localazy and how it can handle multilingual content interaction. We also built a use case of a ticket booking platform with Vue.js as the frontend framework and Strapi as the Backend, with the content localization handled by Localazy.

We demonstrated how the localization plugin could handle the upload and download of contents from Localazy to Strapi and vice-versa. Our project case study shows how multilingual content was easily created for Strapi with the Localazy plugin.

You can check out more about this awesome plugin in the official documentation.

You can also download the example repository with the complete source code for the tutorial from our GitHub.

How to upload rows from Google Sheets to Localazy using Zapier Integration by Localazy

Localazy Team — Mon, 26 Sep 2022 15:06:45 +0000

Learn how to sync translations from Google Sheets to Localazy with Zapier. In case the Google Spreadsheet is your favorite source of truth or you’re migrating to Localazy, then you can upload your source language and translations easily with this Zap.

To create a Zap that does exactly that, you need to follow the steps. First, let's set up the Trigger.

Before you start, we recommend reading the previous article:

➡️ Enhance your localization workflow with Zapier & Localazy

1️⃣ Add Trigger: New or Updated Spreadsheet Row

Search for the Google Sheets App and select New or Updated Spreadsheet Row Event. Connect your account. Then do the setup - choose a Spreadsheet with the translations, a Worksheet you'd like to pull the translations from, and a Trigger ColumIt it can be any column for our purposes, so keep any_column as the input value. You can see the setup in the image below.

This event is triggered any time a new row is added to the Sheet, or an existing row is updated. Note that the changes are not triggered instantly. They're instead buffered and triggered as a batch once in a while (a couple of minutes, I'd say, based on my tests).

It's also important to remember that the trigger has some limitations - described here.

2️⃣ Add Action: Import to Localazy

Next, add an Action. Search for the Localazy App and select Import to Localazy Action. Connect your Localazy account and select a project you'd like to import the translations into.

Then set up the Action. You can optionally choose a File name, File path, and File format. If any of them is empty, the default value noted in the field description will be used (e.g. zapier.json as a File name). There are various formats to choose from, so you can select the one that fits your requirements.

Then, it's important to pair columns from Sheet to the input fields. To better explain the pairing, the image below shows the structure of my Sheet.

As you can see, in the A column, there's a source key, followed by the translations in English (en), Czech (cs), and Polish (pl). To pair all the columns correctly, the project needs to have the languages added in Localazy because only those will appear as input fields under the Source key field, as seen in the example below.

Now, pairing the keys by selecting the corresponding columns is possible. Filled input fields are shown in the following image.

There are also a couple of options for modifying the import. Let's go through them real quick:

Filter source - Set to True if you do not import translations identical to the source language content. Is True by default.
Import as new - Set to True if you want to import all translations to go through the review process. Useful when you are unsure about their quality and want to do an extra check. It's False by default.
Force current - Set to True if you want to import all translations and set them as the current version. By default, Localazy doesn't overwrite existing current versions for translations and lets you decide through the review process. It is False by default.
Force source - Set to True if you want to overwrite the source language translations even if there are existing human changes. This option is useful when the source of truth is not Localazy, and it's always required to synchronize the source language translations. It is False by default.

As our source of truth is Google Sheets, we will set the Force source option to True. In the image below, there's the final Action setup.

Test the action and continue. I also added one more Action step that sends a Slack message after every import, so I'm always notified if someone has updated the Sheet.

You can also read how to setup the Slack integration in the article: How to send a Slack group message for translators using Zapier?

🕹️ Testing the Zap

Let's publish the Zap. If you activated the Zap for the first time, you should be asked whether you'd like to use a Transfer by Zapier (Beta) feature. This allows you to transfer the whole Sheet at once. At the time of writing, the feature is still in Beta.

You can also create your own transfer here. Follow the steps, and you should have all the rows with translations imported in Localazy. You can also see that all the translations are approved - we forced that by setting up the Force Source flag during the Action setup.

To test the Zap out, add some new keys and translations to the Sheet. I intentionally did not add some translations, so you can see it's not required for the import to process correctly. They can be added later. However, you must provide a source language string (English in our case). Otherwise, the import won't be successful.

And that's it! Every time someone updates the connected Google Sheet, you will automatically get the content imported to Localazy.

⚡ Use the Zap Template

You can also use the Template below:

Add new or updated Google Sheets rows to Localazy projects

Visit the Localazy Integration page on Zapier to explore more templates.

✔️ Conclusion

Zapier allows you to connect thousands of apps with Localazy and create your own automation workflows without using any code. Learn more in the Zapier integration docs.

How to send a Slack group message for translators using Zapier?

Localazy Team — Thu, 22 Sep 2022 08:33:38 +0000

Would you like to notify translators when there is a new comment regarding their language in Localazy? You can do it with the Zapier integration in a few steps! Learn more in this article.

Setting up a simple Slack notification when a new comment is added is possible by using this Zap template. But when you don't want to bother, e.g., German translators with Polish-related comments and vice-versa, some additional steps are needed. So I'm going to tell you how to do it using the Zapier integration by Localazy and the Paths by Zapier.

Before you start, we recommend reading the previous article to learn how the integration with Zapier works:

➡️ Enhance your localization workflow with Zapier & Localazy

1️⃣ Add the Trigger and Conditional Paths

Thanks to Paths, you can create conditions in your Zap workflows.

Search for the Localazy App and connect your Localazy account to select a project where you want to monitor the new comments. Set up the Localazy comment added Trigger. Then, search for and add the Paths by Zapier Action.

We'll create two conditional paths - one for German translators and the other one for Polish.

Set up your DE path so it will continue only if the Comment locale field exactly matches de.

Do a similar thing with the Send notification to PL translators path.

You can always find a locale code in the project languages overview table next to its name in Localazy.

2️⃣ Setup Slack Action

If you don't already have the channels in Slack created, create two channels - one for each group of translators and invite them into the respective channels. Then set up the Send Channel Message in Slack Action.

Assuming that the members of the #zapier_testing_de_translators channel are only German translators, when adding a comment in Localazy, you achieve exactly what we want - as shown in the animation below.

You could also set your action so that it sends a DM to each of the translators instead of sending it to the channels. And that's it! Now your translators will get notified instantly as new comments are added.

⚡ More Zap Templates

You can visit the Localazy Integration page on Zapier to explore more templates.

✔️ Conclusion

Zapier allows you to connect thousands of apps with Localazy and create your own automation workflows without using any code. Learn more in the Zapier integration docs.

Enhance your localization workflow with Zapier & Localazy

Localazy Team — Wed, 14 Sep 2022 13:43:42 +0000

You can now create your own Zaps or use one of the example templates on Zapier to integrate Localazy with over 5000 apps. Build your own workflows across platforms to stay on top of things and automate your localization workflow even more with Localazy and Zapier!

While developers can quickly come up with solutions to integrate Localazy into their workflows, we know that not everyone can handle the developer-oriented CLI or API to achieve the desired level of automation we preach. So we felt obliged to empower all users who don't necessarily want to go down the developer road to enjoy the fruits of automation.

To set the stage, we needed to prepare a Public API and introduce the webhooks feature. This was another big step toward improved developer friendliness of Localazy, but it was necessary for us to be able to make the huge leap to reach the non-developers among our users who would like to connect Localazy to other 3rd party services but didn't have the option to do so.

And now, after hundreds of hours of development, we know it was worth it, and we are incredibly happy to announce that Localazy is now available on the Zapier platform in public beta!

🤔 What is Zapier?

Technically speaking, Zapier is an Integration Platform as a Service, or simply "a translator between web APIs," which allows end users to integrate their favorite web apps together and automate their workflows. Zapier orchestrates the flow of data between tools and online services that wouldn't otherwise be possible.

Thanks to Zapier, you can now connect Localazy with over 5 thousand of the most popular apps, so you can automate your work and have more time for what matters most. And the best thing is - no code is required to do this!

🕹️ What are some ways to use Zapier?

Using simple if-this-then-that logic, Zapier allows you to move information from one app to another—without code.

At Localazy, we used Zapier, e.g., to send responses from Typeform surveys to our ClickUp and notify us about it on Slack.

So now, we don't need to check our inboxes or refresh Typeform every once in a while, but we always get a notification on Slack that someone has completed our survey, and we know we could find the results in our ClickUp where it was sent for further processing.

Some other popular examples include:

Send e-mails via Gmail to customers who fill out a form on Typeform
Notify me on Slack when a Google Spreadsheet row is updated
Save new Gmail attachments to Dropbox
...

The possibilities that Zapier offers are endless, and they grow with each added integration as well! You can explore the millions of examples on the Zapier website.

🚩 What Triggers and Actions by Localazy are available?

Now that you know what Zapier is and how it works let's dive into how you can utilize Localazy with it. I'm going with the Zapier terminology here, so I recommend getting familiar with the Zapier platform first.

Triggers

Your trigger is what kicks off the automated process between your apps. There are currently three Localazy triggers available. Technically speaking, it's four webhooks implemented into three triggers.

Comment Added

When a user adds a comment to the specified project, this trigger is set off. There's no additional input setup required.

The provided output fields are:

various information about the project, such as its name and description,
data about organization and languages,
there's also basic information about the user who added the new comment,
locale to which the comment was added,
link to the comment,
and, of course, the text of the comment.

You can use this trigger to e.g., send a notification to Slack when one of the translators in the project adds a comment, so you can respond in real time, or contact them directly.

➡️ Learn more about this Trigger in the documentation.

Project Published

This trigger sets off when the specified project is successfully published (applies to release tags too).

Besides the same project information as in the Comment Added Trigger, there's also a tag name and a current timestamp available.

The Project published trigger also contains the whole functionality of the Zip files in languages Action Search we'll talk about in a minute.

➡️ Learn more about this Trigger in the documentation.

Import finished

This is triggered when the import of new content to your Localazy project is finished - whether some content was actually imported or the action resulted in an empty import. For more technical details, see the Webhooks documentation.

This trigger contains a useful set of output fields such as the number of added, updated, and deprecated strings. And apart from sending simple notifications to your favorite Slack channel, it can be used to create complex Zaps that fit your needs.

➡️ Learn more about this Trigger in the documentation.

Actions

Import to Localazy

This Action allows you to import content to Localazy from anywhere. There are a couple of input fields allowing to customize the import, such as file name, file path, and file extension.

You can also specify the content source in any language that the project has. There are also a couple of options defining whether the new import should override the current translations, pushed to review, and so on. More on that in the documentation.

➡️ Learn more about this Action in the documentation.

Zip files in languages

This Search can be used as a mid-step while creating Zaps. It allows to selectively ZIP project files in languages given by your selection.

On the input, you may provide languages and files of the project you'd like to bundle as a ZIP archive and operate with it in an Action part. It's also possible to select All so that all the files or languages will always be used.

The output fields provide a pointer to the ZIP archive so it can be passed to the Action(s) that follow. Also, the Search provides a current timestamp so the user can optionally use it to specify the time the ZIP archive was created.

➡️ Learn more about this Action in the documentation.

⚡ Example Zaps

Below, you can find two examples of what is possible with Localazy and Zapier.

You can find a complete list of Zap Templates to get inspired on the official website.

Send channel messages in Slack for new comments added in Localazy

This use case integrates Localazy and Slack and provides better notifications for comments, which are crucial for the translator's context. It's pretty simple - adding a comment would trigger the Zap we'll set up in a bit.

Comment added in Localazy trigger provides many output fields that can be used when connecting the action step. Besides containing various information about the project, organization, and languages, there's also basic information about the user who added a comment, the locale to which the comment was added, the link to the comment, and the text of the comment. This way, you can customize your action to your needs.

The image below shows the trigger setup. Search for Localazy App, and the Comment added Event. Then simply connect your project by passing the authentication procedure (yes, the same one you may know from Figma and Strapi integrations).

Next, set up the Send Channel Message in Slack Action. Again, search for the App and select the Event. I chose to send the message to a #zapier-integration-testing channel. There are more options available, so you could, for example, also send a PM to someone directly.

Notice the Message Text. The message was composed so everyone knows what project the comment belongs to, the comment message itself, and the link to Localazy leading directly to the added comment.

Save and turn on the Zap. To test the Zap out, go to Localazy and add a comment to any translation.

The Zap will be triggered, and the message will be instantly sent to the selected channel, as you can see in the animation below.

Upload all files in all available languages to Google Drive when the project is published

Back up your translated files with an automated external option provided by the integration. In this example, I'll show you how to upload project files to Google Drive (although any type of cloud storage can be used).

Start by searching for the Project published in Localazy trigger. Connect your account. Now, as a part of the trigger setup, you'll be requested to provide two input fields - languages and files.

For each field, there'll be a list where you can select multiple options. For our purposes, we just want to select all languages and all files to be uploaded. Also, note that if the All option is selected, you don't have to worry about updating your Zap if another language or file is added - it'll be a part of the upload. The uploaded file is a ZIP file containing an archive of selected files/languages.

Tip: You could also use Convert API to unzip new file archives when uploaded to Google Drive.

Project published in Localazy trigger also contains output fields with information about the project (see the previous example for such fields details). As an extra, there's also the Current timestamp field - thanks to that, you can keep track of previously uploaded versions by optionally adding it to the uploaded file name.

There's also a published tag name provided (helpful in case you are using the Release Tags feature). That may help users to ensure better usability.

To finish the setup, search for the Upload File in Google Drive Action. Connect your account, and select the Drive and destination folder. As a File input field, select the Zipped Files output field. You can alternatively provide a custom file name, as shown in the example below.

Save and activate the Zap.

Go to Localazy and either upload a new file to the project or translate your content. The Project publishing process should start. You can recognize that by the PUBLISHING

state on the top right corner in the Project languages screen.

When the state is changed to a PUBLISHED state, the ZIP archive should upload to Google Drive. The upload process is demonstrated by the animation below. It might take a couple of minutes for the Zap to be triggered and process the files. It's given by the Zapier architecture - so please remain patient.

Tip: add a timestamp to keep track of previous records (upload versions) - or you can simply replace the file (choose different action)

If you don't want to keep track of previous records, you can simply choose the Replace File Action instead of Upload File Action.

💪 Build your own workflows

So now that you see what is possible and how the Localazy integration with Zapier works, do you already have some ideas of your own?

You can read one of the tutorials in the Zapier section on our blog, such as: How to upload rows from Google Sheets to Localazy using Zapier Integration by Localazy

✔️ Conclusion

There are over 5000 apps available on the Zapier platform, and we are curious how you will leverage their potential and combine everything with Localazy! Post your workflows in the comment section!

Top 10 Affiliate Programs for Digital Product Makers To Boost Your Online Income

Localazy Team — Thu, 08 Sep 2022 09:41:59 +0000

Are you looking for some great affiliate programs to increase your recurring income? Great! Let’s find out which affiliate programs could add to your bottom line if your audience cares about their digital products & online presence.

Unique opportunities come just once in a lifetime. There are so many around us that only a few are special enough to pick up on in the busy world. The global language services market is expected to reach over 57 billion USD in 2022. The pie is getting bigger and bigger each year, and now you can earn your share by becoming a Localazy Affiliate Partner!

🙄 TL;DR; Skip the list of best-paying affiliate programs for digital product makers & take a look at what we can offer you at Localazy.

🎯 Straight to the point: Affiliate Partnership with Localazy

We invite you to become an Affiliate Partner of Localazy.com - the new-gen localization platform tearing down language barriers. Our mission is to make language localization easy, fun & accessible. Would you like to help us and create a new income stream for yourself? Read on!

Blind dates are a huge gamble. Let us show you our hand right away to save you time eventually. After our first date, we would love to start easy and help get you a stellar piece of content your audience will love to read. Once we get to know each other better, we will do our best to make you feel loved.

🚩 The growing importance of language localization

Are you serious about meaningful, win-win relationships? Do you love to provide high-value content for your audience? Language localization is a massive topic with a business audience ready to pay for productivity, development & business services. Independent makers, startups, SMBs, and enterprise organizations have one thing in common - they need to improve their language support to fuel their international expansion.

💎 Expert content & added value for your audience

Would you like to fill the language localization topic gap with expert content, attract more users to your website & get paid for it? We all know that great content can convince visitors to become users. On the other side, producing stellar content is a tedious task. Delegate it to the Localazy content team.

We will arrange a great article related to your business & language localization, international expansion, and growth. The only thing we ask you for is a do-follow link with your affiliate tracking code. All above and beyond is to help you get more affiliate commissions faster.

We know that overly promotional content does not work at all. So you can stay assured that our content will be focused on added value, not overselling anything to your visitors. Localazy will be mentioned as a resource of the information included in the article. Plus, the content will be republished with a canonical link to your domain from localazy.com - a domain with AHREFS DR 50 and growing.

Are you interested in getting a high-quality piece of content for free and getting paid for it? Apply for the Localazy Affiliate Partnership and get full support from the Localazy content team to provide carefully tailored content made just for your audience. Visit our blog to check some samples.

📈 Long-term co-marketing support

Moreover, you can enjoy our co-marketing activities by receiving traffic to your website via our social media channels, with thousands of digital makers as our followers. Combined, Localazy now serves over a billion end-users with native language experiences, and you can now become a part of it.

Ready to commit? Submit our partnership form, and let's find out how we could enjoy our journey together. We already have some plans you will most likely enjoy discovering with us!

📌 Conclusion on Localazy Affiliate

10% off for your customers
You will get a 20% commission from every plan sale (for monthly subscriptions applies for up to six months)
The unique, long-form article will be tailored to your audience and support your primary business goal.
Visit our community center to find out what else you can do with us.
And remember - we are not just another bunch of talking heads. We are Localazy, a global team of local folks.

Localazy is a relatively young language localization company compared to industry behemoths. We look for long-term, innovative partnerships towards mutual success and decreased marketing budgets on performance campaigns and huge conference sponsorships. Instead, we are happy to share our revenue from incoming customers who purchase our standard Localazy plans.

Join the Localazy Affiliate Program now.

🧾️ The list

And now, here comes the list of best affiliate programs for entrepreneur audiences.

TweetHunter
Systeme.io
HubSpot
ClickUp
Webflow
Semrush
Shopify
Canva
Podia
Typeform

TweetHunter

Tweet Hunter is an all-in-one Twitter growth tool designed to help you grow and monetize your Twitter audience. Their goal is to make it as easy as possible for you to create high-performing content, build an audience around your topics of expertise, and monetize and attract opportunities.

Whenever you refer a customer to TweetHunter, you will take a 30% commission on all payments that person makes.

Systeme.io

Systeme.io claims to be the world's easiest All-In-One Marketing Platform. The features include sales funnels, email marketing, a website builder, online courses, and, funnily enough, affiliate program management.

Earn 50% lifetime commissions every time your affiliate link is used to purchase a systeme.io subscription or course.

HubSpot

HubSpot is a suite for online inbound marketing, sales, and customer service. Their products and services aim to provide tools for customer relationship management, social media marketing, content management, lead generation, web analytics, search engine optimization, live chat, and customer support.

Partner through HubSpot's Affiliate Program to generate new revenue from your content while helping the SMB community grow better. However, their review process is not trivial, and it is advised to have a marketing-oriented media outlet before application.

The commission is either a recurring rate with a 15% monthly commission (up to 1 year) or a flat rate: 100% of the first month's revenue.

ClickUp

ClickUp is the ultimate productivity tool; someone would say a project management tool of the future. While ClickUp does not come with, let's say, revolutionary features, it is pretty comprehensive & flexible enough to take care of the majority of your company processes.

An amazing fact about ClickUp Affiliate Program is that every day, many businesses are in the market for a proper project management tool, and ClickUp is one of the best ones. It sells itself!

You earn 20% of every transaction from users joining ClickUp through your affiliate link. This means every upgrade and user added during their first year on the platform.

Webflow

Gone are days when one had to know how to code or install WordPress to get started. Remember WYSIWYG editors like Microsoft Frontpage? Do you feel the ironic nostalgia?

Webflow is definitely of the best no-code website builders available online, and you can bet that Webflow affiliate is worth the time invested into an affiliate program. If your audience consists of junior website designers about to start their careers in digital marketing services, Webflow is a great choice.

Whether your referees get a Designer plan or just set up hosting, you'll earn 50% of all payments for 12 months — with no limits.

Semrush

Semrush is a great online marketing analytic tool for every serious online marketer. Their platform allows you to do SEO, content marketing, competitor research, PPC, and social media marketing from just one platform.

What is truly unique about the Semrush Affiliate program is its reward stepping. It speaks for itself. See for yourself:

Earn $200 for every new sale, $10 for every new trial, and $0.01 for every new sign-up. This affiliate commission offer is unique as you get rewarded along the way and don't have to wait until your users make a purchase.

Shopify

New online stores pop up daily, and the market is enormous. Thousands of online entrepreneurs launch their own or dropshipping businesses to earn income. Millions of the world's most successful brands trust Shopify to sell, ship, and process payments anywhere.

Their affiliate program doesn't mention the commission percentage publicly, but it should be well worth it!

If you are the one who helps these people succeed, you can offer Shopify & Localazy in tandem because Localazy can translate Shopify stores as well. A single tutorial can do wonders & earn you twice - once for Shopify & once for Localazy!

Canva

Who doesn't know Canva? It's a great design tool for small entrepreneurs and smart teams. It sells itself & all you need now is to get started & join their affiliate program today.

Earn up to $36 for each new Canva Pro subscriber who signs up with your unique referral link.

Podia

Thousands of people like you use Podia to build websites, sell courses and digital products, and host communities. Podia is free. And when you grow, it has all the tools you'll need along the way.

What else does a starting online entrepreneur needs? It's an easy sell! You'll earn up to 30% every month that your referred customer stays with Podia.

Typeform

There are many tools out there that can help you build smart forms, but nothing beats Typeform regarding user experience. Of course, you can find cheaper alternatives, but sometimes it's just a pity to stay under par if you can get the best solution.

Typeform makes interacting with people feel friendly and personal. We are actively using Typeform at Localazy, and we can only recommend you join Typeform Affiliate Program. Spread the word and receive $20 for each referral when they purchase an annual plan.

✔️ Conclusion

Now, are you ready to start earning your commission? Do you know some other Affiliate programs that are worth mentioning? What is your favorite? Share your thoughts in the comments below.

How to localize & translate your website in three steps with Localazy?

Localazy Team — Mon, 22 Aug 2022 10:18:18 +0000

Learn everything you need to know about website localization in this comprehensive article. While reading, we will walk you through the process, show you some tools to help you and point you in the right direction to successfully launching and maintaining a multilingual website.

The internet has turned the world into an interconnected large city where borders, as we know, do not exist, but language barriers surely still do. Even if global borders truly vanish, languages and cultures are here to stay, and if you don’t deliver your message clearly, it gets lost. 😓

Remember that "Everyone speaks English" is a myth that will cost you money in the long run. Global expansion is the goal of every digital business, and you should be prepared for localization, even if it's not a priority right now.

Whether your audience speaks Swedish, English, Japanese, or another language, each requires content customized to their traditions, symbols, and formats. An app, software, or website which holds your business values should be optimized for the different audiences you are trying to win as customers. There are various ways of preparing a separate version for these web pages.

✔️ Expanding your reach to broader markets is challenging as much as it is worth it. Since you already have such a global vision, the tools and the process is all you need.

So, let's get this show on the road, shall we?! 😉

👁️‍🗨️ Translating your vision

Moving your content into another language means adapting your product or service for a wider clientele. So, before starting, you want to ensure that you have a meaningful and clear ‘why’ in order to stay focused.

What’s the goal you are trying to reach with localized content?
To whom are you trying to speak? 🗣️

Clarifying your needs and goals is important because the entire process costs money, and if you don’t have clear targets that you want to achieve, you’re at risk of burning money without any effect. The creation of a multilingual website involves various additional costs and requires investing in resources that might otherwise go to waste if not built with a purpose.

📍 Are you able to answer these questions?

What’s the main driving factor for adding more languages to your content?
What language deserves more attention to start with?
What would be your ideal cost/value ratio?
Are you capable of providing for the increased international demand?

After answering these questions, get to know what are the major processes your content has to go through to be streamlined in multiple languages. Don’t forget to pay attention to multilingual SEO if you want your website to rank higher. 🤓

🎓 Internationalization - localization - translation

Translation, localization, and internationalization often get confused, but they’re all different processes that aim to make your website multilingual. One doesn’t replace the other, but they work in unison to accomplish this goal.

They’re not to be separated from each other but rather seen independently as complementary parts of the whole product adaption process.

Translation is known as the process of adapting content from one language to another. For businesses or individuals who serve multilingual markets, translation is crucial to reach more people. Different media can be translated: from papers, books, and even street signs. However, the digital landscape and its immense need for content have increased the need for digital translations. This is the type of content we are focused on. 🧑‍💻

Internationalization (i18n) stands for the process of preparing a website, application, or software with the capabilities of adding localized content. The process is usually performed by the client himself instead of the translation provider. It’s a practice that’s kept in mind during the building process and serves the localization or translation teams. The process is focused on adapting the design, code, interfaces, and content for additional languages without having to re-create the product. 🎨

Localization (l10n) is concerned with what happens after the product’s functionality is finalized. It corrects words, phrases, or other interface elements that require adaptation in other languages. These elements are made localizable during the internationalization process. Then, localization is concerned with the actual translation/transcreation and adaptation of the content according to the culture, language, and market jargon used in a certain locale. 📍

🌍 Choose a CMS with proper i18n support

Numerous content management systems exist to assist with the organization of your web content. Each comes with its functionalities and capabilities. Someone interested in building a multilingual website should analyze and pick the one which offers more features that assist the internalization process. 🧑‍💻

These features must match your business needs and not only the translation process. Finding the best CMS depends on the features required for users to navigate your website or perform different actions, such as purchases or information submissions.

When you consider different CMS, keep in mind these questions:

✅ How safe is translated content stored on servers?
✅ Does the CMS assist in the internationalization process?
✅ How upgradeable and scalable is it?
✅ Does it provide forms adaptable for different regions with time zone-aware scheduling?

Remember that our goal is always to find an optimal affordable solution that gets the job done without having annoying bugs pop up every click. The translation is just the tip of the iceberg, while most of the hard work goes into preparing the structure and systems behind it.

So, where do you get started if you want to check the compatibility of your existing CMS? Simple. Search for "i18n plugin for [Name of your CMS]" or "[Name of your CMS] localization plugin," and you’ll see the available plugins to assist in making your website multilingual.

🚩 What CMS can be used to build a multilingual website?

Selecting the right CMS doesn’t have to take hours and hours of searching. We have brought you a list of some of the best content management systems that are popular in the industry. We can categorize them into three types of systems: open-source, headless, and customizable. 🧑‍💻

🕹️ Open-Source CMS

Many businesses prefer to get their hands on the source code to modify it and make changes to their site. Open-source CMS allows anyone to modify, share and optimize the original source code. Here’s a short list of the five best open source platforms.

WordPress

The majority of websites you see online are built on WordPress. WordPress is the powerhouse of content management for 32% of the websites on the internet. Simply by using plugins like WPML, your admins can translate pages, categories, posts, and themes.

Learn more about Localazy integration with WordPress

Drupal

Assistance in content creation, security, and performance rank Drupal among the ideal solutions for large-scale sites. To enable content translation in Drupal, enable the core "Content Translation" module. By using its translation management tool, you can streamline the process of translation and build a dynamic interface with its flexible features.

Craft CMS

Craft users can set up multiple localized sites for Craft to manage their translated content without having to use complicated software. Craft makes translating content with Localazy simple by allowing users to take advantage of the translation API to send the files for translation into Localazy and get the translated versions back.

Django CMS

As the CMS expanded its user base, the interface was enriched with complex tools. Ideal for large-scale projects but not worth considering for small projects like simple blogs for which WordPress fits well. After installing it, it’s ready to adapt the content in multiple languages.

Typo3

TYPO3 is a popular open-source CMS that has been around since 1999. It’s one of the most full-featured CMS solutions available, with an enormous code base that allows it to support any type of website—including multilingual ones—and any level of customization.

🔌 Headless CMS

The way how CMS serve content to users has gone through changes and adaptations. Headless CMS stands as one variation of these changes. A headless CMS has no front-end for displaying content. It functions as a back-end to store and manage content and then presents it using an API. These CMS support specific plugins for multilingual content or can be translated by using the Localazy Translation API.

Let’s explore a few.

💜 Strapi

Based on Node.js, Strapi is a headless CMS that was initially founded as a school project in France. It turned out to be successful and received over a million downloads and 25,000 stars on GitHub. The platform is open-source, giving full freedom to developers to integrate their favorite tools and seamlessly customize their projects.

Strapi also supports multilingual content thanks to its Internationalization plugin that comes pre-installed in Strapi v4. And with the Localazy plugin for Strapi, you can enjoy the seamless translation of your content with unprecedented comfort.

💡 Learn How to automate the localization of your Strapi website with Localazy

Storyblok

Used by over 63,000+ professionals, Storyblok offers a seamless preview that facilitates the work of developers and content editors while creating different platforms, from Corporate sites to mobile applications. It manages multilingual content through a single content tree.

Using Storyblok for your content? No problem. Localazy integrates with Storyblok for a smooth translation process. Learn more.

Contentful

Contentful comes with multiple functionalities, including open-source elements such as field editor libraries and integrations with third-party apps. As a headless CMS, Contentful offers tools for using content from its back-end in several channels and languages with ease.

After selecting our content management systems and starting to fill our website with content, we should start localizing it. Translating a website into multiple languages accurately is no small task, but neither does it have to be a daunting process. We’ve actually broken it down into three easy steps. 😁

👉 The Three-Steps to Translate Your Website

Each CMS has its distinctions when it comes to managing translated content. Users expect readable content that speaks to their needs. The lack of localized content might be the cause of an increase in the bounce rate. Here is our three-step process toward simple localization.

1. Strategize your localization process 🔍

Starting to translate website content immediately without a proper localization strategy in place leads to blind paths.

Localization is concerned with much more than the word-by-word translation of texts into another language. As said earlier, it is the adaptation of the messaging and offerings into the culture of that market. When building a localization strategy, all the distinct features of a culture are taken into consideration: social norms, language nuances, and symbols. 🔣

For your content to reach a maximum number of readers, viewers, or watchers, you should prepare a localization strategy, ideally based on actual data you already have at hand or additional market research.

Layouts can also be an important factor that can change drastically from one culture to another. We are taking 🥤 Coca-Cola as an international brand selling in 200 countries, with localized websites in dozens of them.

Let’s see how the US and Japanese website versions change in layout. 🎨

Elements that you should include in a localization strategy always depend on the behavioral data you’ll collect. Never ignore this data and tune them constantly until you hit that sweet spot of maximal user experience.

2. Choose a translation management system 🗃️

Using automation combined with advanced technologies, a translation management system gives a helping hand to both translators and developers in the translation process. Such a system is integral to assist you to accomplish a project by minimizing the translator’s manual work, organizing tasks, and monitoring the project’s progress. 📊

The main objective is an increase in productivity and efficiency while cutting off the time spent shifting between programs, organizing people, and transferring data.

All Translation Management System tools, such as Localazy, should share three common features:

CAT (Computer-Aided Translation) capabilities to help you translate your content 💻
CMS integrations and workflow automation to minimize manual file exchange 🔁
Central project administration and management (all translation needs in one place) 🗃️

These systems are utilized for large projects. A few might offer minimal features, but most of them consist of a list of powerful features that can help both individuals and large teams facilitate the localization process effectively.

💡 Learn Why Localazy is the best tool for translation management and automation

3. Translate, localize, repeat 🔁

After choosing a TMS, start preparing content for the respective markets and languages selected. We have two ways in which the process is ought to be organized by the majority of the teams:

The translated content is put into the website after the webpage is published. This process is named waterfall localization.
The translated content is added to the website alongside the development process. We’ll call this agile localization.

Agile localization is considered more appropriate and efficient for implementing updates and assisting in the localization workflow. However, the process is walking on thin ice because small mistakes will affect the site almost immediately (but once spotted, it is really quick to fix them!).

The traditional procedures are similar for all projects:

🌐 Prepare the integration: After pondering what TMS suits you best, prepare your project files for translation and upload them or connect your website using an API, CLI, or a localization plugin if there is one.

At Localazy, each one of our tools is built with developers in mind. And the Localazy CLI is the developers' playground where they can upload and download the localizable content fast and reliably and access all features with ease. When you need assistance from other tools, you can easily add other integrations.

🤼‍♂️ Invite your team: Invite reviewers and translators into the project workspace so that you can discuss and work on the project. It’s time to bring everyone together: translators, proofreaders, editors, and developers. Localazy saves the hassle of hiring and managing an external team of language specialists by yourself.

You can outsource this process with Continuous Localization Team services. Localazy offers various localization services, including a human-assisted machine translation, professional translation of your software or app from scratch, or simply a review of crowd-sourced translations.

With Localazy, you can focus on what can’t be automated. 💪

🆙 Localize and update: Update your website with the new translations as soon as you finish. Ensure files are properly updated with the translated content and ideally fit into the interface.

☑️ Completing your localization kit

Choosing a translation management service is important, and it requires a bit of research. We’ve saved hours of searching and listed here five of the most used translation and localization tools to complete your localization kit.

🔷 Lokalise

Well-known brands like Daimler, TESCO, and Headspace have worked with Lokalise to translate and localize their content. The company keeps a stellar spot on the market after all five years of experience and numerous practical features added. Real-time translation, project chats, and inline translation suggestions are three core features worth mentioning.

How Does Lokalise Compare to Localazy?

🔷 Phrase

Phrase has all the essential tools needed for website or software localization and multilingual content management. The platform aims to simplify the collaboration process between team members and content management. The free plan allows only one project and includes up to three users. For more, you have to select from their paid plans starting from 23 dollars per month.

How Does Phrase.com Compare to Localazy?

🔷 Locize

Founded by the creators of i18next, Locize offers multiple features as a translation management tool. Ideal not only for large teams, managers, and translators but also for single developers. Locize supports machine translations together with professional translations, and by using the InContext Editing tool you’re able to translate software from your browser.

How Does Locize Compare to Localazy?

🔷 Transifex.com

Reputable companies such as Trello and Atlassian have trusted Transifex to handle their translation and localization processes. The platform is quite diverse and it offers several tools for support platforms and designers, alongside tools and integrations for developers. Users claim that the platform wonderfully does the job, but it gets expensive fast.

How Does Transifex Compare to Localazy?

🔷 Localazy

Localazy is a highly automated localization platform with a powerful Translation API, CLI tool and a comprehensive list of integrations and localization plugins for various third-party services. Anyone can localize their website conveniently with Localazy.

See the list of available integrations and supported file formats
Learn how to integrate Localazy

Even though website developers might be fairly used to encountering obscure tools and outdated interfaces, we strive to make all of our users feel at home and pay great attention to UX and design our interfaces thoughtfully, so you can invite your content manager as well, and be sure they won't get lost.

To start, you are given free 200 source keys that you can use to translate content for your website. All users have access to all the basic integrations, file formats, and essential translation features, including unlimited machine translation suggestions.

Our pricing policy is transparent, and all the features are laid out for you to see.

⭐⭐⭐⭐⭐ Read verified reviews by our users on G2

✔️ Conclusion

I hope you are now ready to start with the localization of your website. And if you decide to go with Localazy, I am sure the process that might have seemed nearly impossible will get easy and seamless for you and your team.

Do you need help with the localization of your website? We are here to help!

💙 Contact us at team@localazy.com to discuss your needs.

We are ready to help you translate your website and deal with multilingual SEO.

How and why we built our Figma localization plugin

Localazy Team — Mon, 15 Aug 2022 14:20:59 +0000

At Localazy, we love and use Figma, and many of our clients do too. This collaborative design platform, born in 2012 and enjoyed by thousands of users around the world, is the ideal solution to tackle the design process flawlessly.

When looking for new integrations, Figma was a no-brainer. Our team, as well as a bunch of our customers, regularly used it, and the collaboration feels natural. So we wanted to welcome it into our platform.

We started with only our Android integration back in 2020 and many more followed like iOS, PO, SRT Subtitles, Angular, Excel, or JavaScript, to just name a few. Still, most of these are just simple file formats or developer-oriented frameworks. So unlike previous integrations, Figma needed a different approach.

Check Localazy's list of integrations here!

The Figma plugin required a specific design and more work than previous integrations because it needed its own user-facing interface outside of Localazy, the data management is different, and the plugin is required to work both ways. Extracting texts from Figma to a JSON file and uploading it to Localazy wouldn't be too practical for most use-cases.

So in June 2021, our Figma project started. We accepted the challenge, talked to our users, explored the different options available on the market, and got to work. Four months later, we launched the integration. 🎉

Here's how we did it and what you can accomplish with it as a Localazy user.

🤔 Hold on... what is Figma?

Technically speaking, Figma is online prototyping and vector graphics editor that focuses on UI and UX. Plainly speaking, it is a design tool with an easy-to-use, collaborative interface that helps you create stunning visuals and content in your browser with powerful capabilities and countless community-made resources and plugins to enhance and customize your design workflow.

If you've never heard of this tool, you're really missing out! It is an excellent asset for any company interested in creating compelling content presented in an attractive, modern way.

Figma is ideal for prototypes of digital products, such as web and mobile apps. It is also excellent for the design of landing pages, newsletters, and complete websites, but you can use it to create leaflets, presentations, infographics, and much more. We've done it all!

Learn more about Figma on its official website.

✏️ Why do we love it?

Why wouldn't we? Figma really does wonders for design collaboration. For starters, it is a very user-friendly tool that can be learned and managed quickly by entire teams. It streamlines processes and acts as a collaborative hub for all your efforts.

As we outlined earlier, versatility is also plentiful. You can adapt content for different media formats, and it is easily malleable. This means localization and translation can be done flawlessly, as teams can adjust the design to the particularities of every language.

"Many startups use the Localazy + Figma duo to iterate faster and bring new features to the market with decreased effort across their team"
Jakub Dubec, CMO

Figma streamlines processes and acts as a collaborative hub for all your design localization efforts

But there's more! These are other outstanding features that we like over here at Localazy HQ:

Flawless design tools: resizing buttons, toggling, stretching, dynamic overlays, vector pens, mobile edits... Figma offers easy fixes for nearly every design pain point, automating what used to be lengthy manual modifications.
Great for teams: collaborative efforts are really propelled when using Figma. Shared notes and multiple viewing enable to perfect the final result and discussing specific copywriting, localization, or design issues is easier than ever.
Can be used throughout the whole process: the tool is designed to walk teams through every phase of product development. Brainstorming can start in a FigJam workshop and continue on the asset library.⏰
Export options: when the work is done, exporting is super easy, and it is available in different formats, ranging from PDF to PNG, JPG, and SVG. You can also export assets in bulk!
Price: you can use Figma at really affordable rates. Even for free! Different options are offered depending on the size of your company, with plans starting at $12/month per user.

It was love at first sight for our designer, Ondřej Půček. "As an art director, I love that with Figma, I can keep all my visual assets in one place, easily accessible to anyone within our team - even the newcomers - in their browser. I really love the variations feature that was added just recently. It simplifies the work with components and keeps our team library clean and tidy", he explains.

But if he had to choose just one outstanding feature, it would undoubtedly be auto-layout, which allows to "prepare really complex designs that you can reuse in various layouts without the need to align individual parts each time." A real timesaver indeed! ⏰

💭 Why create a Figma plugin?

Our aim was simple: we wanted to make it easier for our customers to translate, edit and implement the content of their Figma designs in the most intuitive way possible.

As our CMO, Jakub Dubec puts it, "many innovative startups use the Localazy + Figma duo to iterate faster and bring new features to the market with decreased effort across their team."

So this was a no-brainer. Many users across all sectors could benefit from it! 👌 And it seems that we were right: so far, our integration has been used, tested, and loved by a wide range of users, including enterprise clients as well as smaller agency teams who use Localazy & Figma to design multilingual products for their clients.

👩‍💻 How did we do it?

Developing, testing, and launching a plugin is an extensive process. Our Figma integration was no exception. So let's hear what our team has to say about it!

💡 The big idea

Naturally, the idea came first. Our Product Manager, Jan Bílek, was instrumental in the process from the first brainstorming sessions. "We wanted to enable users to start their localization process already at the design phase. We encourage teams to agree on the copy as early as possible to prevent unnecessary round trips and speed up the whole development process", he explains.

The result we were looking for was simple: the finalized texts could be used directly in any app, thanks to Localazy and our Figma plugin. The next step was then to develop the plugin.

⚙️ The development process

The process was long but also fun and satisfying when it came to developing the integration. We decided to write the plugin in Vue 3. It took three months to finesse all the integration features.

Our Front End Developer, David Václavek (who did most of the development), sums it up perfectly: "I remember spending late evening hours before sleep just thinking about how to rewrite a piece of code I've just done during the day to make it run faster. I also remember me sitting in the office, being in the zone for a couple of hours, staring into the screen, and then just noticing everyone already went home."

At that time, our team was also developing the Localazy Public API and OAuth for authentication, so we tried it out on the Figma plugin.

Fortunately, David wasn't alone: "The Figma developers community was helpful whenever I asked for advice. They also explained to me some detailed differences in API methods when I reported an issue on GitHub. Basically, when I got through the part of learning the platform, I started enjoying the development more and more".

It took three months to finesse all the integration features. The proccess was long, but also fun and satisfying

From then on, it was trial and error. After conquering the Figma API, our team went through a few UI redesigns, made a few UX-related changes, and tested the plugin extensively.

The release date was postponed several times, but the first official version of the plugin eventually launched in November 2021. Here's a confession from our developer: "Fixing the issues itself and thinking about how to make the plugin simple and fast was challenging but fun. But when you think you're almost at the end of development and you manage to find another issue - that's the biggest mental challenge!".

Learn How to use the Figma plugin in this article.

There were also challenges from the design side. As Ondřej puts it, "we wanted our users to avoid the usual mistakes that can happen while uploading nodes from Figma to Localazy."

This meant that ongoing warnings had to be delivered to ensure the safety of their materials and keep everyone informed on the state of the plugin. It all paid off, as many design and front-end elements have definitely made the localization job easier, solving common pain points. For instance:

No need to manually copy/paste the strings.
No need to hassle with spreadsheet files.
Selective upload/download with per-text design language check.
Continuous design localization problem & keeping track of updates.
Ability to quickly check your design prototypes in more languages.
Having Figma as SoT, you can easily use the uploaded strings in the app code.
People can cooperate at the same time: designer uploads, the translator translates...

...and much more!

Here's a practical example from David: "Imagine you're designing a product with global ambitions and there's no Localazy. You made a great design, and everyone loves it in your country. You did the extra hard work, manually copied/pasted the designs, and translated them into a couple of languages.

But then you realize that you don't have enough space to fit texts in other languages because of the distribution of word lengths. And not only that: there are some right-to-left languages. Designs are ruined, your head is about to explode, you have to redesign it and go through the pain again..."

No string copy-pasting, no spreadsheets, no global downloads: with the plugin you can have your team cooperate at the same time and keep track of multilingual design updates

"With Localazy ready to help, you can start designing, uploading strings continuously, translating your current progress into some languages, downloading it to Figma, adjusting the designs to play well with the translations... Then you continue designing another section and do the same again. How easy is that? 😀 And all of it in just a couple of clicks, almost no manual work needed".

Testing the final product

When the plugin started to take shape, we tested it extensively. Manual tests were performed before release, and we contacted some beta users to check it out. One of them was Michal Kessel Shitrit, an affiliate partner who works as a localization, design, and UX writing expert. The plugin was a godsend for Michal, as collaborative copywriting and design are essential to her job.

"I love how Figma plugins like the Localazy plugin let clients enjoy the best of both worlds. They can keep a tighter link between the design in Figma and the localized strings. And they can easily see and test the localized copy in-context", she says.

The expert tested the plugin in its early stages and liked what she saw. Downloading and uploading processes were straightforward and minimal adjustments were required: "You may need a different or smaller font, or to align your localized copy to the right. But it still saves infinite amounts of time compared to the old copy-and-paste method".

"The plugin lets clients enjoy the best of both worlds. They can keep a tighter link between the design in Figma and the localized strings. And they can easily see and test the localized copy in-context"
Michal Kessel Shitrit, beta tester

Other benefits highlighted by Michal were:

Non-designers don't have to mess with design features.
No strings are left behind when reviewing a project.
The continuous translation is very helpful for big products: there's no need to recreate the project for every new little feature.

When testing, our team of testers also discovered certain features that were overlooked at first. As our PM explains, initially, it was possible to upload only entire documents, and it wasn't allowed to work with selected nodes: "It wasn't overlooked though: we'd intentionally omitted this functionality to simplify the development and user testing. Beta users, however, verified that this functionality was crucial for the general usability of the plugin".

The plugin was an immediate success at Localazy's HQ. Our CMO "immediately wanted to use it and play around because localization at the design phase is important not only for product development but also for brand communication".

"I was really happy because I constantly push our development team to open Localazy to new audiences important to our business. Figma localization plugin is a huge step towards UX, UI and the overall design community".

Nowadays, we have dozens of active users, and we use the integration as well on a daily basis. For instance, we prepare our design files in English with pre-finalized texts, finish the texts and translate them to the languages we want to use in the near future in our platform. Then we download the nodes back to Figma and adjust the design. We also use the plugin to translate our banners and ads to different languages.

🚀 What's next?

Our plugin is up and running, and we couldn't be more pleased. It was approved to be listed in the Figma community in just 5 days! But that doesn't mean our work has finished. Here's an update from our Product Manager, Jan: "We would like to add support for FigJam and solve the issue of importing the design with more developer-friendly keys. We also plan to support upload of languages other than the source language."

Our designer foresees new customizable features, "like avoiding all the nodes with content consisting of purely numerical values, and the introduction of a parser to keep the names of the source keys simple and easy to use in the code as Jan mentioned."

Even more ideas were discussed actually, but I will keep it a secret for now. As always, we will try to improve the experience as much as we can, I can promise you that. 😉

"We would like to add support for FigJam and solve the issue of importing the design with more developer-friendly keys. We also plan to support upload of languages other than the source language."
Jan Bílek, PM

And our star tester adds a suggestion for new integrations: "It would be incredible to have support for Zeplin or Invision. A lot of my clients use it as their SOC for design". Noted, Michal! 📝

Do you have suggestions you would like to share with our team? Feel free to share your ideas with us here or tell us in the comments!

👀 Wanna try it for yourself?

If you've read this far, you definitely have to try our plugin. Designers, marketers, and copywriters are already using Localazy + Figma for their daily efforts.

As our CMO eloquently puts it, "those people are able to create multilingual designs from their favorite design tool without the need of a developer for connection with their i18n/l10n/translation management platform. All they need is to authorize with Localazy and get started."

Check out our Figma plugin workflow guide here and start reaping the benefits of a flawless design localization integration!