How to Set Up Custom Translation on a Chatbot

In today's multilingual world, the ability to interact with users in their native language is a key feature for any chatbot.

Botpress offers automatic translations for your chatbot in over 100 languages — but if you're interested in setting up custom translation capabilities, we can help you do it.

In this article, we’ll dive into the specific coding inputs needed to customize your translation.

How does chatbot translation work?

Our strategy revolves around intercepting messages from users, identifying their language, and translating these messages to and from the bot's operating language. 

This process entails:

• Storing the detected language
• Translating the user's message to the bot's language
• Processing the message, and then
• Translating the bot's response back to the user's language

For instance, if a user sends a message in Spanish, the bot will store "es" as the language variable. The software will translate the message to English for the bot, and then translate the bot's response back to Spanish before sending it to the user.

Pick your tools

Our setup will employ the DeepL Translation service, known for its accuracy and efficiency.

We'll demonstrate this integration with a simple echo bot that responds to users by mirroring their messages. We’ll use Axios for our API calls, since it’s an automatic integration of Botpress.

‍

‍

Create the needed variables

Firstly, we need to introduce a user variable named `language` to store the initial or detected language. 

DeepL facilitates this process by detecting and returning the language of the input text, simplifying our task to a single API request.

Create interception hooks

Before incoming message hook

To intercept and translate the user's message before it reaches Botpress, we introduce a "Before Incoming Message" hook. We will name this hook "Translation-In," which is responsible for translating the incoming message into English and overriding the original message, allowing Botpress to process it as if it were in English.

Here's how the code for this hook looks:

await axios
    .post(
      'https://api-free.deepl.com/v2/translate',
      {
        text: [event.preview],
        target_lang: 'EN'
      },
      {
        headers: {
          Authorization: 'DeepL-Auth-Key {{your key here}}',
          'Content-Type': 'application/json'
        }
      }
    )
    .then((response) => {
      event.payload.text = response.data.translations[0].text
      event.preview = response.data.translations[0].text
      event.state.user.language = response.data.translations[0].detected_source_language
    })
    .catch(function (error) {
      // Error handling
    });

IMPORTANT NOTE: Always use Botpress Configuration Variables when incorporating your API Key.

Before outgoing message hook

For the "Before Outgoing Message" hook, we’ll name it "Translation-Out.” It will intercept the bot's response to translate it back into the user's language, ensuring the conversation remains in the user's preferred language.

The implementation involves overriding the outgoing message with its translated counterpart:

await axios
    .post(
      'https://api-free.deepl.com/v2/translate',
      {
        text: [outgoingEvent.preview],
        target_lang: event.state.user.language
      },
      {
        headers: {
          Authorization: 'DeepL-Auth-Key {{your key here}}',
          'Content-Type': 'application/json'
        }
      }
    )
    .then((response) => {
      outgoingEvent.payload.text = response.data.translations[0].text
      outgoingEvent.preview = response.data.translations[0].text
    })
    .catch(function (error) {
      // Error handling
    });

Getting started

One of the prominent benefits of using an AI chatbot is its multilingual ability. With platforms like Botpress, you can quickly set up your chatbot to engage with users in over 100 languages. 

If you want an accessible and user-friendly chatbot, you can seamlessly integrate any translation service with Botpress. With our channel integrations, you can then deploy your chatbot across WhatsApp, Facebook Messenger, or your website. 

Get started today. It’s free. 

Further references

• Config Variables
• DeepL Translate API
• Axios NPM
• Axios Handling Errors
• Botpress YouTube channel

Create AI Chatbots

Build your own AI chatbot for free

Start now

No credit card required