A dynamic region is an element on your website that you'd like Persosa to swap out automatically when a visitor meets specific segment conditions. A region can be plain text, HTML, or an image. Any
<img> , etc can be turned into a region.
Persosa will track visitors across your site and, as they fall into experiences you define, will change the content shown in these regions. This allows the visitors to feel a more personalized experience that's targeted to them specifically.
Create a dynamic region
Choose Personalize > Dynamic Regions from the navigation, then + REGION in the top-right. In the modal, enter a region name and the CSS selector that Persosa can use to identify the region. For example, if the region has an ID of "my-element" on your site (
<div id="my-element"> ), the selector would be
You may also choose for this region to be active only on specific pages. Read more about using regular expressions to personalize content on specific pages.
Manage Region Modifications
After creating the region, you'll be taken to a list of modifications for the region, each tied to an existing experience.
To configure the modifications for an experience, click Edit next to the experience you wish to manage. From the "Add a Modification" dropdown, choose the type of content you wish to add. If the type is "Attribute", enter the attribute name and value you wish to add/modify on the region, otherwise use the text box to search your Library for the appropriate piece of content to use.
To remove a modification, hover over it and click the trash can icon on the right.
When you're finished editing, click "Save" to save all changes for that experience.
When creating an HTML modification, you must choose how you'd like Persosa to use the HTML snippet from the library, before choosing it:
Replace the entire inside contents of the region with the HTML content item. Uses the
Replaces the entire region with the HTML content item. Similar to jQuery's
Appends the HTML content at the end of all child elements inside the region:
Prepends the HTML content before all child elements in the region:
Inserts the provided HTML before the current region as a sibling:
Inserts the provided HTML after the current region as a sibling:
Each variation will be tied directly to an experience, so the order of priority will match that of the experiences. The order in which you see them in the interface will match the priority they'll be evaluated in.
Implement a dynamic region
Reference an existing element
You may reference an existing element on your website by its CSS selector. Here, you'll see we reference a region by
h1 , which will show dynamic content in any region that matches that selector on any page. To narrow it down further, we set the regular expression
^/$ to apply this region only on the home page.
Insert a unique tag
If you wish, you may insert a custom element on your page rather than referencing an existing one by a CSS selector. In this case, create a dynamic content region and leave the CSS Selector field blank.
To get the element to insert, click Actions > View Code. You'll be shown a modal that contains the HTML to include on your site anywhere you'd like content to be dynamically shown by Persosa. You'll notice that there is no default HTML inside of the tag. Be sure to include some default content within your CMS or nothing will show for visitors not in an experience.
In our example, the code looks like this:
Although Persosa provides generic code to use for content regions, all that really matters is the
hyver-region-id attribute. You may include this on any existing HTML element on your website and it will still function the same. In our case, we've changed it to an H1 tag:
<h1 persosa-region="123">Increase ROI by targeting your website visitors</h1>