> ## Documentation Index
> Fetch the complete documentation index at: https://doc.codecode.me/llms.txt
> Use this file to discover all available pages before exploring further.

# WhatsApp Translator

> Translate messages on WhatsApp Web.

## Options Page

### Pop-up Settings

Click the extension icon in your browser toolbar to open the pop-up settings for WhatsApp Translator. From here, you can quickly enable or disable the translator, choose your preferred target language, and access additional settings.

<Note>
  Use the pop-up for quick changes without opening the full options page.
</Note>

<img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/1.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=8264fb6ae0f5568dd3438f50e63ad58b" alt="WhatsApp Translator Pop-up Settings" width="994" height="1084" data-path="assets/1.png" />

### Full Options Page

Right-click the extension icon and select "Options" to access the full settings page. This page provides more detailed configuration options for WhatsApp Translator.

<Note>
  The full options page is recommended for first-time setup or advanced
  configurations.
</Note>

<img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/2.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=c59a7e0d71e2a3545a71b3163ba7fe9f" alt="WhatsApp Translator Options Page" width="2606" height="1512" data-path="assets/2.png" />

## Auto Translation

<Steps>
  <Step>
    ### Click the Extension Icon

    Click the extension icon in the browser toolbar to open the pop-up settings for WhatsApp Translator.

    <Note>
      Make sure WhatsApp is open in your browser for translation features to work.
    </Note>
  </Step>

  <Step>
    ### Enable Auto Translate

    Turn on the "Auto Translate" option to automatically translate incoming messages in WhatsApp to your chosen target language.

    <Note>
      Select a language that matches the primary language of your native language for best results.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/3.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=fd8605a3420b1b0ce5d984a198ed4805" alt="" width="988" height="1084" data-path="assets/3.png" />
  </Step>

  <Step>
    ### Overview

    <video autoPlay muted loop playsInline controls className="w-full" src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/wt/videos/p1.mp4?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=b77d08f3a2ebbf71074e974c897f7eae" data-path="assets/wt/videos/p1.mp4" />

    <Note>
      Watch the video for a quick demonstration of auto translation in action.
    </Note>
  </Step>
</Steps>

## Button Translation

<Steps>
  <Step>
    ### Open WhatsApp Web

    Navigate to [WhatsApp Web](https://web.whatsapp.com/) and open a chat where you want to translate messages.
  </Step>

  <Step>
    ### Click the Translate Button

    Click the "Translate" button that appears next to each message to translate it into your selected target language.

    <Note>
      You can translate multiple messages individually by clicking the button for each one.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/wt/images/1.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=1a83fc0120bbf73c438b80d7d2d9f9ac" alt="" width="1686" height="382" data-path="assets/wt/images/1.png" />
  </Step>

  <Step>
    ### Overview

    <video autoPlay muted loop playsInline controls className="w-full" src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/wt/videos/p2.mp4?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=028358347430483e428ca604448dea34" data-path="assets/wt/videos/p2.mp4" />

    <Note>
      The video shows step-by-step usage of the translate button feature.
    </Note>
  </Step>
</Steps>

## Quick Input Translation

<Steps>
  <Step>
    ### Enable Quick Input Translation

    Open the pop-up settings and enable the "Quick Input Translation" option.

    <Note>
      This feature is useful for translating messages as you type.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/4.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=74431b44b8653c75d6723151fdc84df7" alt="" width="986" height="1084" data-path="assets/4.png" />
  </Step>

  <Step>
    ### Select an End Symbol

    Choose a symbol that will trigger the quick input translation when typed.

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/5.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=47e5a0d48eca70628740c0181adaecdd" alt="" width="986" height="1090" data-path="assets/5.png" />
  </Step>

  <Step>
    ### Use Quick Input

    ```
    Input Content: Nice to see you
    End Symbol: /
    Language Code: ko

    Full Input:
    Nice to see you /ko
    ```

    <Note>
      Type your message followed by the chosen end symbol to automatically translate it.
    </Note>

    <Note title="Language Code Reference">
      [Search for language codes in the list here.](https://hellohelloworld.notion.site/1458c9d5e4968007bbf8e0eddad702c7)
    </Note>
  </Step>

  <Step>
    ### Overview

    <video autoPlay muted loop playsInline controls className="w-full" src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/wt/videos/p3.mp4?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=c737ede5f3107d8b5942a3c3d4fe37c2" data-path="assets/wt/videos/p3.mp4" />

    <Note>
      The video demonstrates quick input translation in real-time.
    </Note>
  </Step>
</Steps>

## AI Translation Service Settings

<Steps>
  <Step>
    ### Open the Options Page

    Right-click the extension icon and select "Options" to open the full settings page.

    <Note>
      This step is required to configure AI translation services.
    </Note>
  </Step>

  <Step>
    ### Select the Service Tab

    Navigate to the Service tab to manage AI translation services.

    <Note>
      You can add, edit, or remove services from this tab.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/6.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=419d67e2172561e209462a39a318522a" alt="" width="2618" height="1522" data-path="assets/6.png" />
  </Step>

  <Step>
    ### Edit an AI Service

    Click the "Edit" button next to the AI service you want to configure.

    <Note>
      Make sure your API key and endpoint are correct to avoid connection errors.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/7.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=71477a6b3c11136d4f6565e4c9516af9" alt="" width="862" height="466" data-path="assets/7.png" />
  </Step>

  <Step>
    ### Add a New AI Translation Service

    Click "Add OpenAI-Like Service" to create a new AI service entry.

    <Note>
      This allows you to use multiple AI services for translation.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/8.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=a68667927821a1b3fc45ae066f0a82b8" alt="" width="878" height="714" data-path="assets/8.png" />
  </Step>

  <Step>
    ### Configure the AI Service

    Fill in the required fields to set up your AI translation service properly.

    <Note>
      Double-check your configuration before saving to ensure translations work smoothly.
    </Note>

    <img src="https://mintcdn.com/codecodeme-68fc018e/DhAeXmEkPOdSRoVD/assets/9.png?fit=max&auto=format&n=DhAeXmEkPOdSRoVD&q=85&s=d3882f47e3ce07e59262923c934e46c3" alt="" width="1668" height="1292" data-path="assets/9.png" />
  </Step>
</Steps>