Apply style changes to cross-origin iframe pages

What problem does this feature request solve?
The inability to make changes to elements of an embedded agent in a cross-origin iframe.

What is the use case for this feature?
When a client makes a request or there is a need to change the color of an element like a “Next” button on a block to match other vibe designed block buttons or remove the attachment button on the Chat Block SendMessage component, this would provide that ability.

Please describe the functionality of this feature request.
By adding a Long form text field to the “Runtime” section of an Agent it would allow the ability to inject code at the bottom of the <head> area of all iframe pages - or select block pages - so a developer can apply CSS styles to affect the display of the components of the page(s).

This would provide the ability to make quick changes as needed.

Is there anything else we should know?
This is a common useful field found in other Saas products to affect iframed embed pages to get around the cross-origin issues.

Though this use case is only referring to CSS it could also be used to inject code like javascript to affect functionality or presentation. This will open it up to potential added support but also added power.

Other companies I have worked with added both a “header” and “footer” field to better control when the new code is loaded - just an FYI.