constellation web embed styling

Pega web embeds shows a case or landing page in a container. This container is, by default, gray, shows an icon and a title.

In our project we only want to show the case/landing page .

What are the options?

@JanJaapZ16729327 - To get the application skin to your landing page , follow below steps:

  • In the web embed code add theme attribute

  • In app explorer search for “rule-ui-theme” and open the instance list

  • Open the skin rule which is required and copy the json data

  • Add that json data to the theme attribute

Refer below link for more details.

Pegasystems Documentation

@Priyanka Boga my question is not about the styling of the embedded page itself but about the styling of the web embed wrapper. In the example below the web embed wrapper is gray, shows an icon and is using margings. We only want to show the embedded page here..

@JanJaapZ16729327

They grey area with icon shown in your screen shot is not a Web Embed wrapper, it is part of the Constellation UI landing page that you are showing through the Web Embed. If you log into a standard Constellation user portal which has this landing page I think you would see the same.

@Marc Alderman You are right that this is part of the Constellation UI landing page. Is it possible to configure this in such a way that the web embed only shows the contents of the landing page and not the icon and the title of the landing page?

@Marc Alderman or others: Do you have an update about this? Is it possible to configure this in such a way that the web embed only shows the contents of the landing page and not the icon and the title of the landing page?

@JanJaapZ16729327

I don’t think it is possible, but I am not 100% sure on that and would need to do some testing myself to find out.

@JanJaapZ16729327

It is not possible with OOTB authoring options as the title and icon are both required by all the default page templates that are provided.

You could achieve this by creating your own DX Component page layout for use as a temple for the landing page.

The Constellation DX components (pega.com) documentation explains about this and there are some videos, and tutorials that you can review to get started. There is a tutorial on creating a layout type component here:

Layout Template component (pega.com)

There is also some information in the Extending Constellation UI options | Pega Academy module which is part of the larger Constellation Adoption | Pega Academy mission.