ℹ️ Read this page for instructions on using and customizing the Translation template!
Click Activate then choose a default language and click Finish Activating.
.png)
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.
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 View translation
You can do this one of two ways:
.png)
You may want to customize this mod to make adjustments or add more functionality. Common customizations include:
❗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.
Now you're ready to make customizations to your translation mod! Pick one (or more) customization option and follow the instructions.
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 Handle pbwelcome_translate:translate mod component, click + button below the Google Translate brick
b. From the brick add modal, search for the HTTP Request brick and click Add
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.
.png)
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 @document.output and @input.event.targetLanguage respectively to match what we've done in the Google Translate brick. You can also check the values in the Google Translate brick for consistency.
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 Update any references to the translation in the Brick Actions Pipeline following your new HTTP brick
a. Update the Save detected language... brick below your HTTP brick. Update value to reflect the path from your API response.
b. Update the Save input language... brick below your HTTP brick. Update value to reflect the path from your API response.
c. Update the Convert HTML to Text for Insert at Cursor brick to reflect your path from your API response in the Document property.
d. Update the Return translatedText... brick with the html value to reflect your path from your API response.
e. Remove the original Google Translate brick above your HTTP request brick.
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.
If you have any issues, click the live chat button on the bottom of this page to get help!
