Theming of remote oEmbed / iFrame
We are adding the ability to publish eEmbed / iFrame functionality from CiviCRM to remote sites. (https://github.com/totten/civicrm-core/blob/master-oembed/ext/oembed/README.md#issues--todos). The backend CiviCRM site is a provider or publisher of content, typically forms. We're going to call front end sites that consume this content consumer sites.
Two prototypical use cases are:
- An organization uses a Standalone backend CiviCRM instance to publish public facing pages on their public WordPress site (contribution page, newsletter subscription page, event registration pages) which is the only consumer site.
- An organization publishes some content that it encourages aligned partners to display on their sites, e.g. a FormBuilder based petition that needs to appear on many consumer sites with different themes including colour schemes, fonts, etc.
In both cases there is a need to make the content inside the oEmbed/iFrame look okay or even good on the consumer sites.
There is a need to develop approaches to theming the content that will be presently remotely on consumer sites.
In case 1, it may be reasonable for the organization to create a theme on the backend publisher site that matches the front end theme. However, the backend CiviCRM publisher may be a locked down site like Spark which does not provide this level of access.
As of March 1, 2024 it is possible on backend site to select a site-wide theme, and for parameters in the oEmbed/iFrame requests to include width and height for the window of content.
@kcristiano has had success in using css on a consumer site to theme the content inside an iFrame (target the selectors).
Many sites that publish pages in iFrames for remote consumption allow small theming choices to be made, eg foreground and background colour, etc.
As of March 1, 2024, selected content on a CiviCRM site can expose urls for oEmbed and iFrame references to that content.
It might be desirable to have a consumer choose to make some small theming adjustments to the CiviCRM content that will be rendered on their site, adjusting the url for the oEmbed or iFrame. The url could get key-value pairs for the theming adjustments or perhaps they could be stored in a record in a database or used to create a css file on disk that would be requested with a single key-value pair in the url.
What are the considerations and desiderata for providing a simple usable approach to end users to get an iFrame reference that provides some theming of the content? For example, what is a reasonable set of end user oriented settings that are not overwhelming that could be made available? Foreground colour, background colour, font, etc?
Should there be a different set that would make available a fairly full set of tags for CiviCRM forms, including h1, h2, etc all the way to styling of selects, buttons, checkboxes, etc.?