This example shows you how to add a simple text banner to the header of every page on a site. The banner is displayed to all visitors who visit the site at least two times within 7 days.

Home page of a retail website without the banner Home page of a retail website with the banner

Figure: Home page of a retail website without the banner (left) and with the banner (right) (click to enlarge)

To create the modification:

  1. Select the modification case.
  2. Define the segment.
  3. Define the placement.
  4. Define the content.
  5. Preview the modification.
  6. Activate the modification.

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

Selecting the modification case

To select the modification case:

  1. In the Frosmo Control Panel, select Modifications > Overview.
  2. Click Create modification.
  3. Enter a descriptive name for the modification, such as "Site Banner", and select Personalization as the modification case.
  4. Click Create.

Selecting the modification case

The modification is created.

Defining the segment

You can either combine existing segments, or create and combine new segments. In this example, use the segment you created in Creating your first segment.

To define the target segment:

  1. In the Basic settings view, click Define segments.
  2. Click Select segments, select the segment from the list, and click Select.

    Defining the segment

  3. Click Save.

Defining the placement

You can either select an existing placement, or create and select a new placement. In this example, use the placement you created in Creating your first placement.

To define the placement:

  1. In the Basic settings view, click Select placement.
  2. Select the "Site banner - All pages before content" placement.

    Defining the placement

  3. Click Save.

Defining the content

Since the modification case is Personalization, the modification can only have a single content variation. The variation is automatically created with the modification, but you must separately define the content for the variation. In this example, you define your own custom code as the content.

To define the content for the variation:

  1. In the Basic settings view, click the variation name.
  2. In the variation settings, click Select type.
  3. In the Content templates list, select Custom content, and click Select.
  4. In Content, enter the following code:

    <h1>My banner</h1>
        div.frosmo {
            background: #ffa415;
            text-align: center;
        div.frosmo > p {
            color: #ffffff;
            display: inline-block;
            font-family: "Source Sans Pro", sans-serif;
            font-size: 30px;
            font-weight: bold;

    The above code contains CSS to define the background color and text style for the banner. The final appearance of the banner depends on the styles defined for the site, as they may override the styles defined in the modification code.

    To create a very simple banner, you can leave out the CSS part (the style element and everything in it). You can also create your own HTML and CSS code.

    Defining the content

  5. Click Save.
  6. In the Basic settings view, click the quick menu button for the variation, and select Activate.

    Activating the variation

Previewing the modification

Previewing a modification requires that you have defined a preview URL for the associated placement. For more information, see Creating your first placement.

To preview the variation:

  1. In the Basic settings view, click the quick menu button for the variation, and select Preview.

    Previewing the variation

    Depending on your browser settings, the preview page opens in the same or a new tab. To open the page on a new tab in Chrome, in the Control Panel, right-click the Preview option and select Open link in new tab.

  2. Preview the modification.

Activating the modification

To activate the modification:

  1. At the bottom of the Basic settings view, click Activate.
  2. To confirm, click Activate.

After you activate the modification, the visitors in the selected segment (who are not in the comparison group) see the banner.