In the Frosmo Platform, a modification is a real-time change on a web page designed to personalize or otherwise improve the user experience or usability of a website and guide visitors to complete a conversion. In technical terms, a modification is a managed piece of code that changes the content, appearance, or behavior of a page directly in the visitor's browser. Personalized modifications are based on the visitor attributes that can be either rule-based (segmentation) or data-based (machine learning algorithms). You can also use modifications to collect usage data from the site.

Here are examples of common modifications:

  • Modify existing content, such as banners.
  • Show personalized content based on the visitor's behavior or context.
  • Add new content, such as product recommendations or content generated from data feeds.
  • Remove unnecessary content, such as distracting elements, site navigation elements in shopping carts, or surplus elements in mobile-optimized layouts.
  • Test the layout and styling of and element or a page.

You define modification content (HTML, CSS, JavaScript) in the Frosmo Control Panel. The only tool you need is a browser running the Control Panel. You can create content templates that allow you to define content once and then reuse that content across multiple modifications. Optionally, you can customize the content for each modification based on content options defined in the templates.

Before you start working with modifications, see:

How modifications work

A modification configuration defines all the settings for a modification. The configuration determines the who, where, what, and when of displaying a modification.

The main parts of the configuration are:

  • Segments. Rules for determining who should see the modification. For example, you can define that the modification is available only to visitors who have visited the site three times within the past week, and have viewed product pages for coffee makers. You can create a segment combination using as many segments as you want. You can also forgo segments and define that the modification is available to all the visitors on the site.
  • Placement. Rules for determining where on the site in which the modification is placed. For example, you can define that the modification is placed after a specific element on all category pages of the site. Every modification is attached to a single placement.
  • Content. The code that the modification adds to the page to change the contents, appearance, or behavior of the page. The code can consist of HTML, CSS, and JavaScript, in any combination. Depending on your use case, you can create several variations of the same modification. A given visitor ever only sees one variation. You can define how the variations get distributed among all visitors.

The configuration can also have additional conditions, such as:

  • Schedule. Rules for determining when the modification is available. For example, you can define that the modification is available only on Fridays, Saturdays, and Sundays, from 6 PM to 12 PM.
  • Advanced settings. Rules for further defining how and when the modification is available. For example, you can define:
    • Device types on which to show the modification
    • Display delay and interval
    • Maximum number of times the modification is shown to a visitor

Modification flow

This is how modifications work in the visitor's browser:

  1. The visitor navigates to a page.
  2. The browser starts loading the page.
  3. The browser loads the Frosmo scripts, allowing the Frosmo Platform to interact with the page.
  4. The platform checks if there are any valid placements for the page.
  5. If there are valid placements, the platform checks if the placements have modifications assigned to them and whether those modifications are valid for the current visitor.
  6. If the placements have valid modifications, the platform retrieves the content of the modifications (either from the back end or directly from the custom script) and then renders the content to the page.
  7. The browser finishes loading the page.

Figure: Frosmo Platform interaction with a website

In the page code, the content of a modification gets rendered as follows:

  • HTML is rendered inside a Frosmo-specific <div> element. The element is placed based on the rules defined in the placement. In the source code, message stands for a modification, and position stands for a placement.

  • CSS is rendered inside a Frosmo-specific <style> element, which is placed inside the <head> element.
  • JavaScript is not rendered to the page, but instead executed immediately.

Where to go next