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:

  1. Create the placement.
  2. Create the modification.

Creating a React component placement

To create a placement for a React component:

  1. Log in to the Frosmo Control Panel, and select your site.
  2. In the sidebar, select Modifications.
  3. Select the Placements tab.
  4. Click Create placement.
  5. Define the following settings:

    Creating a React component placement

  6. 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.


  7. Click Save.

You have created the placement.

For more information about placement settings, see Creating and editing a placement#Placement settings.

Creating a React component modification

To create and activate a modification for a React component:

  1. In the Control Panel, on the Modifications page, select the Overview tab.
  2. Click Create modification.
  3. Enter a descriptive name for the modification, select the modification case, and click Create.

    Creating a React component modification

    The Basic settings view opens.

  4. Select the placement for the modification:
    1. In the Placement section, click Select placement.

      Creating a React component modification

    2. Select the placement you created above.

      Creating a React component modification

    3. Click Save.
  5. 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.

    1. In the Content section, depending on the modification case you selected, either create a new variation or click the name of the existing variation.
    2. Define the content type and content settings for the variation.
    3. When you're done, click Save.
    4. In the Content section, click the quick menu button for the variation, and select Activate.
    5. Optionally, create and activate additional variations for the modification.
  6. Optionally, define any additional settings that are required to implement the display rules for the React component. For example:
  7. Activate the modification:
    1. At the bottom of the Basic settings view, click Activate.
    2. To confirm, click Activate.

You have created and activated the modification. The display rules and content of the modification are now reflected in the associated FrosmoPlacement component.

For more information about modification settings, see Creating and editing a modification.