Accessing an article's Content ID from within a Custom Embed (Power Up)'s iframe?

[markplewis]

We're building a Power Up that requires access to the parent article's Content ID. Unfortunately, the iframe Communication Protocol doesn't pass along any information about the article, and the cross-origin policy blocks access to properties in the parent window, such as window.parent.location.pathname.

Is there any way to achieve this or should we tell users to manually copy the content ID from the Composer page's URL and paste it into a form field within the Power Up's iframe?

In the future, would Arc consider passing the content ID to the iframe as a URL query string parameter, or perhaps allow Power Ups to request the article's content ID via window.parent.postMessage? Or are content IDs too sensitive and exposing them may introduce security vulnerabilities?

Relevant documentation: https://dev.arcxp.com/composer/developer-docs/technical-specifications-for-custom-embeds-power-up-in-composer/

[denisemrivera]

Hi @markplewis could you share a bit more about your specific use case and what would be rendered from the power-up? That’ll help us better understand your setup and goal.

[markplewis]

Hi @denisemrivera. We want to pass the article's content ID to an API, which will return an AI-generated summary that we'll save into the ANS via the Power Up.

Side note: we realize that Arc is creating a built-in AI summary tool but I don't believe it allows us to use our own API/model, so we're planning to use a Power Up instead.

[radominchev]

👋 @markplewis — from what I understand, you’d like your Power Up to access the story ID so you can trigger a backend workflow that retrieves the article’s content, sends it to your AI model for processing, and then returns the result to the Power Up UI.

Since the story ID isn’t currently passed to the Power Up iframe, one possible path might involve handling that logic server-side (for example, through IFX or another integration). However, I’d love a bit more detail about your exact workflow — what the user is doing in Composer when the Power Up runs, and what data you need from the story. That’ll help us explore potential options or workarounds on our side.

Rado

[markplewis]

Hi @radominchev. The workflow will be as follows:

1. User begins writing an article and saves it (without necessarily publishing)
2. User opens the Power Up
3. Power Up fetches the article's data via the Draft API and displays it within the iframe
4. Power Up passes either the article's content ID or its body text to our API, which returns an AI-generated summary
5. User reviews the summary, comparing it side-by-side with the source article, edits it as required, then saves their edits and closes the Power Up
6. The edited AI summary is saved into the article's ANS

From here, the user may continue editing the article, saving and/or publishing, and may re-open the Power Up at any time. Each time it opens, the Power Up will fetch the latest draft and generate a new AI summary which the user can compare with their previously-saved summary and make edits as desired.

Hopefully that helps clarify things. Thanks!

[markplewis]

We've already built a prototype and all of the above is currently working. The only inconvenience is that users must tell the Power Up which article to fetch by manually copying and pasting the content ID from the parent page's URL. Fortunately, they're only required to do this once, since the content ID gets saved into the ANS along with the human-edited-AI-generated summary, so the Power Up is able to re-identify the article the next time that it opens. It would be nice to eliminate this point of friction though.

[radominchev]

@markplewis, Thanks for sharing it! The easiest way would be to deploy the Power-Up under the same domain origin as the Composer:
e.g. deploying it: /resources/plugins/composer/embeds/<your-embed>/<panel>.html

// Example: parse last path segment from the Composer URL
const regex = /[^/]+(?=\/?$)/;
const match = window.parent.location.href.match(regex);

if (match) {
  console.log("Story ID", match[0]);
} else {
  console.log("No match found");
}

I suppose you are under different domain, in that case you may use IFX integration and handle the save story event and from there trigger downstream processing and have your Power UP pull the result.

[markplewis]

Thanks, @radominchev. Our Power Up is currently deployed via GitHub Pages.

[radominchev]

@markplewis Apologies for the late reply — I was thinking you could potentially use IFX to deploy your own integration that triggers when the user saves the story. That way, you’d have access to the storyId at that point, allowing you to process your workflow and chain it to your own API for further handling. You could then store the output in an external store and have your Power-Up query that data when needed.