I need to know how can I call and a Response of rest end point after clicking on web item ?

[Talha J]

I have implemented a custom "Translate" button in Confluence using UI Fragments (Web Items). When clicked, the button triggers a REST endpoint, which:

1. Fetches the page content
2. Sends it to an external translation API
3. Receives the translated content in JSON format
4. 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:

1. 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.
2. 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?
3. 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! 🚀