ℹ️ Read this page for instructions on using and customizing the Translation template!

1. Activate the Template
2. Try the template
3. Customize the template
   REQUIRED: Copy the template
   (optional) Replace Translation API

1. Activate the template
‍

‍

Click Activate then choose a default language and click Finish Activating.

If you don't already have a PixieBrix account, you'll be prompted to create an account and install the Chrome Extension. PixieBrix will redirect you back to this page with activation options in the Sidebar.

>> ✅ Check your steps

You're ready to move to the next step once the sidebar shows a message that the [Template]: Translation is ready to use.

2. Try the template

Once you've activated, it's time to try it out.

2.1 Highlight text on the page

You can triple click this paragraph:

Het was een heldere winterochtend, de lucht was gevuld met de frisse geur van sneeuw. Peter liep langzaam door het park, zijn schoenen knarsten op de ijzige grond. Met zijn handen diep in zijn jaszakken genoot hij van de serene stilte die alleen een sneeuwdag teweeg kon brengen. Terwijl de vlokjes snel naar de grond dwarrelden, wist hij dat er niets mooiers was dan de eenvoudige schoonheid van de natuur

2.2 Open the Translation Sidebar

You can do this one of two ways:

• Press cmd/ctrl + m to open the Quick Bar and choose 🌍 Translate Text.
  OR
• Click the PixieBrix icon to the right of your URL bar. Don't see it?

>> ✅ Check your steps

When opening the Sidebar, you should see the original text in an input box and the translated text below with a button to Copy to Clipboard.

3. Customize the template

You may want to customize this mod to make adjustments or add more functionality. Common customizations include:

• Replacing the Translation API with another tool
• Automatically extract text from a page
• Add a button to inject translated text in a field

❗Before customizing, you'll need to copy the template. Follow the steps below.❗

1. Open the Page Editor
2. In the first panel on the left, select the [Template] Translate mod
3. Click the three dots to the right of the [Template] Translate title
4. Click the Make a copy action
5. You may be prompted to create an alias; think of this as a username
6. (Optional) Change the mod id and description if desired.
7. Click Create
8. (Optional) Remove the template mod by selecting the [Template] Translate mod, clicking the three dots, and choosing Remove.

Watch the GIF below to view this step-by-step process.

>> ✅ Check your steps

You've successfully copied a mod when you see [Template] Translation Copy (or whatever you renamed your mod) in the first panel on the left of the Page Editor. 🙋 If you need help copying mods, click the purple chat icon on the bottom left of this page and reach out to the PixieBrix team.

‍

Now you're ready to make customizations to your translation mod! Pick one (or more) customization option and follow the instructions.

[optional] 3.1 Replace Translation API

This mod is built using Google Translate's API, but you may prefer to swap it out for another API that translates text.

3.1.1 Replace Translate brick with HTTP Request

Follow the steps below to find the add an HTTP Request brick below the Translate brick.

a. In [Event] Translate mod component, click + button below the Translate brick

b. From the brick add modal, search for the HTTP Request brick and click Add

‍c. Click the original Translate brick, then click the trash can icon at the top of the Brick Actions pipeline (second panel) to remove

3.1.2 Configure the HTTP Request per API documentation

Once you've added the HTTP Request brick to your mod, you'll need to follow the API Documentation for the Translation API of your choice. The screenshot and example steps below use DeepL as an example.

a. Specify the endpoint for your API. DeepL's is: https://api-free.deepl.com/v2/translate

b. Set method to required type. DeepL's is post

c. Click X at the end of the Search Parameters or JSON Data to pass text to translate. Read your API's docs for details. DeepL requires Search Parameters with a text property and target_lang property. Those can be set to @input.event.originalText and @input.event.language respectively

d. Click the X at the end of Headers to create an Authorization property. This will also vary by API. DeepL requires an Authorization property with DeepL-Auth-Key [yourAuthKey]

3.1.3 Confirm your response

Test your new integration to confirm you receive a response. Watch the GIF and follow the steps below to accomplish this.

a. Test the mod by selecting text on the page and clicking the Translate button in the sidebar

b. From the Output tab in the far right panel, click the carets to open up the response object and confirm there the translated text is available

c. Click the copy icon next to text to copy the path, which will be used in the next step

3.1.4 Create an object with the response

Lastly, create a object that stores the translated text so it can be referenced without making modifications to other mod components. The following image and steps explain how to do this.

a. Click the + button below the HTTP Request brick in the Brick Actions pipeline to add the Identity Function brick

b. Replace the default value property with translatedText. This is what the Sidebar panel references to display the translated text

c. Set the Value of translatedText to the copied path of the text from the response. In the DeepL example, the path is @resopnse.translations[0].text

3.1.5 Run the mod to confirm the translation appears in Sidebar

Run the mod by selecting text and clicking the Translate button in the Sidebar, then confirm you see the translated text appear in the SIdebar.