Create a New Experience

Create a New Experience



After configuring the target pages, click Create Experience to define what visitors should see.

Enter Experience Name :
Provide a name for the individual experience variation.
Use a name that clearly identifies the audience or purpose of the experience.

Examples:
  • Targeted experience for social media visitors
  • Returning visitor discount banner
Add Description :
Enter a short description explaining what changes are being made in this experience.
This helps teams quickly understand the purpose of the experience.

Examples:
  • Show a discount banner for visitors from Facebook campaigns
  • Display premium plan messaging for returning users
Click Save to continue.

Configure Audience

After saving the experience details, PageSense redirects you to the audience configuration section.
This determines which visitors will see the experience.
Custom Audience
Preset Audience
Custom Audience
Create audience conditions manually based on specific visitor attributes.

You can define rules using conditions such as:
  • Device type
  • Location
  • Traffic source
  • Campaign source
  • New vs returning visitors
  • Custom visitor attributes
  • User behavior conditions
Example:
Show a personalized offer only to mobile visitors from paid campaigns.


Preset Audience
Preset audiences allow you to quickly target commonly used visitor groups without manually building conditions.

Examples include:
  • New visitors
  • Returning visitors
  • Visitors from specific campaigns
  • Visitors from specific devices
This helps speed up audience configuration.

Once the audience rules are configured, click Create Experience. 

Create Experience

After configuring the audience, click Create Experience to define how the personalized experience should be delivered to visitors.
PageSense provides two experience types:
  • Edit with Visual Editor – Modify the existing webpage experience
  • Redirect URL – Redirect visitors to a different webpage

Edit with Visual Editor

This is the default experience type that allows you to modify your webpage without changing the source code.
Once selected, PageSense opens the Visual Editor, where you can directly click and modify webpage elements.

Style Editor
The Style Editor allows you to modify the visual appearance of elements using CSS properties such as colors, fonts, spacing, and layout. It helps maintain design consistency without editing code directly.
Example: Change a button’s background color, adjust padding, or update font styles across a section.

Insert
The Insert option lets you add new elements or content to the webpage at specific positions. This is useful for introducing banners, messages, or new components.
Example: Insert a promotional text block or image banner above a product section.

Edit
Edit allows you to modify existing elements on the page, including text, links, or HTML structure. It is commonly used to update content without changing layout.
Example: Change a headline, update CTA text, or modify a link destination.

Ask Zia
Ask Zia provides AI-powered assistance to generate or improve content directly within the editor. It helps you quickly create variations or refine messaging.
Example: Rewrite a CTA to make it more engaging or generate alternate headline ideas

Move
Move lets you reposition elements within the page layout. This helps in rearranging content for better visibility or user experience.
Example: Move a CTA button above the fold for higher engagement.

Hide/Show
Hide or Show allows you to control the visibility of elements for specific experiences. This is useful for removing distractions or highlighting key content.
Example: Hide a navigation bar for a landing page experience or show a special offer banner.

Remove
Remove permanently deletes an element from the experience variation. This is useful when certain elements are not relevant for a specific audience.
Example: Remove a footer section or unnecessary content block from a campaign page.

Select Container
Select Container helps you choose the parent element instead of individual elements, allowing broader changes to layout sections. This is useful when working with grouped content.
Example: Select a full section (div or body) to apply background or spacing changes.

Chrome Extension
The Chrome Extension enables you to load and edit live webpages, including pages behind login. It ensures accurate previews and real-time editing.
Example: Personalize a logged-in dashboard page that is not accessible publicly.


JavaScript (JS)
JavaScript allows you to add custom logic and behavior to your experience. It is used for advanced interactions and tracking beyond basic editing.
Example: Trigger a popup after a user scrolls halfway down the page.

Device Toggle (Desktop/Mobile/Tablet)
This option lets you switch between desktop,tablet and mobile views to optimize experiences across devices. It ensures your changes look correct everywhere.
Example: Adjust font size or reposition elements specifically for mobile users.

Global Code (JS/CSS)
Global Code lets you apply CSS or JavaScript across the entire experience instead of individual elements. It is useful for consistent styling or behavior.
Example: Apply a global font style or add tracking scripts across all pages.

Edit Mode
Edit Mode allows you to actively modify elements on the page. This is the default mode used when making changes.
Example: Click and edit text, images, or buttons directly on the page.

Interact Mode
Interact Mode lets you use the webpage normally without editing, helping you access hidden or interactive elements.
Example: Open a dropdown menu or navigate to a different section before editing it.

NotesNote: Only when you click Save will the modifications made in the visual editor and the experiences you created be stored. Unsaved changes will be discarded.

Redirect URL

Instead of modifying the existing webpage, you can choose Redirect URL to send visitors to a completely different page.
This option is useful when you want specific audience segments to land on an alternate webpage without making visual changes to the current page.

How it works :
Enter the destination URL where eligible visitors should be redirected.
When visitors match the configured audience conditions and land on the original page, PageSense automatically redirects them to the specified URL.
Example :
Suppose visitors from a paid social campaign land on:
You can redirect them to a dedicated campaign landing page such as:
This allows you to show campaign-specific pricing offers without changing your original pricing page.

Additional use cases
  • Redirect returning visitors to loyalty offers
  • Redirect visitors from specific campaigns to custom landing pages

Save Experience

Once your visual changes or redirect configuration is complete:
  1. Click Save
  2. Then click Next to proceed to goal configuration.





We’ve designed this documentation to guide you every step of the way. If you need further assistance or have any questions, don’t hesitate to contact us at support@zohopagesense.com - we’re always here to help!