Enter a name for the placement.

Select the type of page on which the placement is used. The page types available for your site depend on the site's vertical.

If the placement is used on multiple types of pages, select Other.

Define the web page element or elements in relation to which the placement and thereby the modification content are to be placed in the page code.

To define the element:

1. Select the type of selector you want to use for identifying the element(s). You can use either CSS selectors or, if your site has the jQuery support module enabled, jQuery selectors.
2. Enter the selector(s) for the element(s). The maximum length of the selector string is 512 characters.

Here are a few example CSS selectors:

• body (HTML document body)
• div.input (all <div> elements with the class input)
• #content (element with the ID content)
• .section (all elements with the class section)
• .section > p (any <p> element that is the direct child of an element with the class section)
• em, strong (all <em> and <strong> elements)

Select how the placement and thereby the modification content are placed in relation to the target element in the page code:

• Replace content

  The modification content replaces the original content of the target element.

• Replace element

  The modification content completely replaces the target element, not just its content.

  When using this display method, the target element is deleted. Use this method with caution.

• Hide & replace original

  The target element is first hidden, its original content is then replaced by the modification content, and finally the target element is displayed again.

  The target element is initially hidden even if there are no modifications using the placement. This can cause a slight lag in displaying the content when the page is loaded.

  Be careful when using this display method with a trigger, since the trigger is only evaluated after the target element is hidden. This may cause visitors to miss important content.

  This display method only works when the Frosmo scripts are placed before the target element in the page code.

  You cannot use this display method with a jQuery selector.

• Before element

  The modification content is placed immediately before the target element.

• After element

  The modification content is placed immediately after the target element.

• Before content

  The modification content is placed inside the target element, before the content of the target element.

• After content

  The modification content is placed inside the target element, after the content of the target element.

If you do not want to add the placement and thereby the modification to every page of your site, create one or more URL rules that together resolve into the set of pages where you want to use the placement. A URL rule defines a comparison between a part of the URL and a string value that you expect that part to match. For example, you might check whether the protocol part of the URL matches "http" or "https".

If you define no URL rules, the placement is valid for all pages of your site (unless you select a trigger for the placement that only fires on specific URLs). Any modification that uses the placement is therefore potentially used on every page of the site.

To create a new rule:

1. Click Add new rule.
2. Select the part of the URL to use for the match. For more information about the options, see the descriptions below.
3. Select the type of the match.
4. Enter the string to match.

You have the following options for selecting the part of the URL:

• URL

  Match the full, absolute URL of the page.

• protocol

  Match the protocol used in the URL. The possible values are http and https.

• domain

  Match the domain name part of the URL. For example, in http://www.example.com/index.html, the domain is www.example.com.

• path

  Match the URL path after the domain. For example, in http://www.example.com/index.html, the path is /index.html.

• anchor

  Match the anchor part of the URL. The anchor is always appended to the URL with a hash (#). For example, in http://www.example.com/index.html#about, the anchor is about.

• query selector

  Match a query parameter value in the query string part of the URL. Enter the name of the parameter whose value you want to match, select the type of the match, and enter the parameter value to match.

  

  In the URL, the query string is preceded by a question mark (?) and consists of one or more query parameters. A parameter consists of a name and a value, which are separated by an equals sign (=). Multiple parameters are separated by an ampersand (&) or a semicolon (;). For example, http://www.example.com/index.html?preview=enable contains a single parameter with the name preview and the value enable, while http://www.example.com/index.html?preview=enable&user=12345 contains two parameters, preview=enable and user=12345.

If you create multiple rules, select how you want to combine the rules:

• AND

  Only match URLs that fulfill all the defined rules.

• OR

  Match URLs that fulfill any of the defined rules.

You can create as many rules as you need.

If you want to control when the placement and thereby the modification content get added to a page, select a trigger for the placement. With a trigger, the placement is added to the page only when the trigger fires.

You can only select a single trigger, but you can freely change the selected trigger, and you can remove the trigger if you no longer need it.

If you define both a URL matcher and a trigger, the placement is added only to pages that match the URL rules and only when the trigger gets fired. For example, if you define a URL rule that matches the path contact and a trigger that fires once the DOM is ready, the placement is added to the page only if the page URL contains the path contact and only after the browser has finished building the DOM tree for the page.

Selecting a trigger

To select a trigger:

1. Click Select trigger.

2. Select an existing trigger, or create and select a new trigger by clicking Create trigger. For instructions on how to create a trigger, see Creating and editing a trigger.

   

3. At the bottom of the view, click Select.

Changing the trigger

To change the selected trigger:

1. Click the trigger name.

   

2. Select another existing trigger, or create and select a new trigger by clicking Create trigger. For instructions on how to create a trigger, see Creating and editing a trigger.

   

3. At the bottom of the view, click Select.

Removing the trigger

To remove the selected trigger:

1. Click the trigger name.

   

2. In the Selected trigger section, click ✕ for the trigger.

   

3. At the bottom of the view, click Select.

Enter the name (without the namespace) of the custom renderer function that you want to use for this placement. You can use a custom renderer to change default placement functionality or add new functionality.

The maximum length of the function name is 64 characters.

Enter the names of the CSS classes that you want to use to style the placement and thereby the modification content. If you use multiple classes, separate the names by spaces.

The maximum length of the string of class names is 256 characters.

section

section alert frosmo

The class names are added to the class attribute of the placement <div> element.

Enter the inline CSS code that you want to use to style the placement and thereby the modification content.

The maximum length of the code is 255 characters.

color: orange; font-size: 2em; margin-left: 20px;

The code is added to the style attribute of the placement <div> element.

Enter the absolute URL of a page where you can preview modifications assigned to the placement.

If you've defined URL rules for the placement, the preview URL must match those rules, meaning the placement must be valid for the page designated by the preview URL.

The Control Panel uses the preview URL for launching variation previews from the modification UI.