I have implemented a custom "Translate" button in Confluence using UI Fragments (Web Items). When clicked, the button triggers a REST endpoint, which:
- Fetches the page content
- Sends it to an external translation API
- Receives the translated content in JSON format
- Displays the translated content
Currently, clicking the button opens a new tab that returns a JSON response. Instead, I want the translation to:
- Replace the existing text dynamically on the same page
- Format the translated content in HTML rather than returning raw JSON
Implementation Approach
I plan to use AJAX to call the REST API asynchronously and update the page’s DOM without requiring a page reload. My questions are:
- Where should I place the AJAX request?
- Should it be inside the Web Item's JavaScript or somewhere else? Because i couldnt find any place to write javascript here.
- How do I modify the page content dynamically?
- Should I replace the entire body using
innerHTML
, or is there a better way to handle translations efficiently?
- How can I ensure that the Confluence editor retains the original content (i.e., does not permanently override it)?
Current Setup
- Web Item (UI Fragment) → Calls REST API
- REST API fetches page content and sends it to a translation service
- Response is currently displayed as JSON in a new tab
I want the button to consume the REST endpoint dynamically and apply the translation directly to the page’s body/content instead of redirecting to a new tab.
Or do I have to instead go with macros?
Would appreciate any insights or best practices on handling this in Confluence! 🚀