FrosmoPlacement component requires a placement and at least one modification to provide the display rules and content for the wrapped React components. The association between the placement and the
FrosmoPlacement component relies on a shared ID, which you must use both as the target element selector of the placement and as the
id prop value of the
FrosmoPlacement component. You create the placement and modifications in the Frosmo Control Panel. For more information about the
FrosmoPlacement component, see Using the FrosmoPlacement component.
The React Connector currently supports only basic modifications.
To provide the display rules and content for a React component:
To create a placement for a React component:
Define the following settings:
Target element: Select CSS selector, and enter the shared ID as the selector name. The ID can be any string that is a valid React prop value, such as "frosmo-placement" or "123456".
Make sure the ID is unique to this placement, so that no other placement is associated with the same
Optionally, if you want to limit the modification to only certain pages of your site, create the appropriate URL matcher rules for those pages.
Leave the remaining placement settings (trigger, custom renderer, CSS classes, CSS code) undefined. The React Connector ignores these settings, so you cannot use them.
You have created the placement.
For more information about placement settings, see Creating and editing a placement#Placement settings.
To create and activate a modification for a React component:
Enter a descriptive name for the modification, select the modification case, and click Create.
The Basic settings view opens.
In the Placement section, click Select placement.
Select the placement you created above.
Optionally, define the content for the modification:
You only need to define the content if you want it hosted in the Frosmo Platform. If the content is hosted in a CMS or in the React application, skip this step.
You have created and activated the modification. The display rules and content of the modification are now reflected in the associated
For more information about modification settings, see Creating and editing a modification.