MX Content Component

The Fielo MX Content Component enables administrators to configure and display dynamic content in the front-end experience, driven by program, member segmentation, and time-based visibility rules. The component supports multiple content types while ensuring accessibility, localization, and responsive design across all devices.

📘
Prerequisites
Before installing FieloMXC, make sure you have installed Fielo PLT v2.203.2 or higher. Use the following link to install the current version of the MCX package v1.3:
Install FieloMXC Package

👍
Required Dependency
The Fielo MX - Member Selector LWC (from the FieloPLT package) is a required dependency and must be included on every page where the Fielo MX Content component is used.

Permission Sets

Two permission sets control access to the Fielo MX Content Component. Assign them based on the user's role:

Permission Set	Description
FieloMXC Admin	Grants read, update, and delete permissions to manage content records. Also allows the admin to view and configure content in Salesforce Experience Builder.
FieloMXC Member	Grants read-only access so that member-facing Experience Cloud users can view the appropriate content records in the front end.

🚧
Admin Access Required
Users must have the FieloMXC Admin permission set to create, edit, or delete any content record. Without it, all management actions will be blocked.

Creating a Content Record

To create a new content record, navigate to the Fielo Content tab in Salesforce and click New. Complete the fields described below, then save the record.

Common Fields

The following fields apply to all content types:

Field	Required	Description
Program	Yes	Reference to an existing Program record. All content must be linked to a program.
Name / Title	Yes	Alphanumeric label used for admin identification only. Cannot be empty.
Description	No	Internal description of the content. For admin reference only.
Start Date Time	No	The date and time from which the content will be eligible to display to members.
End Date Time	No	The date and time after which the content will stop displaying. Once passed, status becomes Ended.
Segments	No	One or more active segments from the related program. Controls which members see the content.
Segment Filter	No	Text search filter to narrow the list of available segments. Supports partial and full text matching.
Order / Priority	No	Numeric field used to determine display order for content types such as Carousel.
CSS Class Name Override	No	Overrides the default CSS class applied to the content when rendered. If empty, the system default class is used.
Status	—	Read-only formula field showing the current state: Active, Scheduled, or Ended.
Type	Yes	The content type to create. Determines which additional fields are shown. Cannot be changed after creation.

Status Logic

The Status field is calculated automatically based on the Start and End Date Time values:

Status	Condition	Behavior
Active	No end date, or end date > NOW	Eligible to render if segmentation matches.
Scheduled	Start Date Time > NOW	Not yet visible to members.
Ended	End Date Time ≤ NOW	Not rendered in the front end.

Segmentation Rules

The Segments field controls which members can view the content:

If no segments are selected, all members of the program will see the content.
If one or more segments are selected, a member must belong to at least one of those segments to see the content (OR logic).
Members who do not match any selected segment will not see the content.
Non-members (unauthenticated users) will never see any content regardless of segment configuration.
Admins previewing content in Salesforce Experience Builder will always see the content, regardless of segment settings.

Content Types

When creating a content record, the Type field determines which additional configuration fields are presented. Each type is described below.

Single Image

Displays a single image with optional click actions.

Field	Required	Description
Content Source	Yes	Upload (hosted in Salesforce) or URL (externally hosted; must be whitelisted in CSP Trusted Sites).
Image Caption	No	Alt text for the image used for AODA/WCAG accessibility compliance. Strongly recommended.
Action	No	None (default) or Redirect. If Redirect is selected, Redirect Target and URL Redirect become required.
Redirect Target	Conditional	Same Tab, New Tab, or New Window. Required when Action = Redirect.
URL Redirect	Conditional	The destination URL. Required when Action = Redirect.

Banner

Displays a full-width banner image with optional title, description, button, and click actions.

Field	Required	Description
Content Source	Yes	Upload or URL (must be whitelisted in CSP Trusted Sites).
Image Caption	No	Alt text for accessibility compliance. Strongly recommended.
MX Title	No	Overlay title displayed to members on the front end. If empty, no title is shown.
MX Description	No	Overlay description displayed on the front end. If empty, no description is shown.
Button Text	No	Label for the call-to-action button. Required if Clickable Area = Button.
Action	No	None (default) or Redirect. If Redirect, Redirect Target and URL Redirect are required.
Redirect Target	Conditional	Same Tab, New Tab, or New Window.
URL Redirect	Conditional	The destination URL for the redirect action.
Clickable Area	No	Any (default, full banner is clickable) or Button (only the button triggers the action). Not available if Action = None.

🚧
Button Text Required for Button Clickable Area
If Clickable Area is set to Button, the Button Text field cannot be empty. Ensure button text is populated before saving.

Rich Text

Displays formatted HTML content using Salesforce's rich text area field.

Field	Required	Description
Content	Yes	Rich text editor field. Supports standard formatting, links, lists, and images.
Action	No	None (default) or Redirect.
Redirect Target	Conditional	Same Tab, New Tab, or New Window. Required when Action = Redirect.
URL Redirect	Conditional	The destination URL. Required when Action = Redirect.

📘
Embedded Links in Rich Text
Links placed directly inside the rich text content will remain functional regardless of the Action setting. Avoid setting Action = Redirect if the content contains its own navigation links, as this may interfere with member navigation.

HTML (Iframe)

Embeds external content within a defined iframe container.

Field	Required	Description
Content Source	Yes	URL to external content. Must be whitelisted in CSP Trusted Sites.
Height	Yes	Pixel height of the iframe on desktop.
Height Mobile	Yes	Pixel height of the iframe on mobile devices.
Allow Full Screen	No	Checkbox, true by default. Allows members to expand the iframe to full screen.

🚧
CSP Trusted Sites Required
The iframe source URL must be added to the CSP Trusted Sites list in Salesforce Setup before the content can render. Contact your Salesforce administrator to whitelist the domain.

Video

Displays a hosted or external video with optional thumbnail and playback controls.

Field	Required	Description
Content Source	Yes	Upload (hosted in Salesforce) or URL (external; must be whitelisted in CSP Trusted Sites).
Thumbnail	No	None (default), Upload, or Thumbnail URL. Sets a preview image shown before the video plays.
Thumbnail URL	Conditional	Required when Thumbnail = Thumbnail URL. Must be whitelisted in CSP Trusted Sites.
Allow MX Playback Control	No	Checkbox, true by default. When enabled, members control playback. When disabled, video plays automatically.

Carousel

Cycles through a collection of non-carousel content records in a slideshow format.

Field	Required	Description
Content Selection	Yes	Select one or more existing non-carousel content records to include as slides.
Slide Order	No	Admins can reorder slides using drag-and-drop directly on the record.
Carousel Delay (seconds)	No	Duration each slide displays before advancing. Default is 5 seconds.
Allow MX Controls	No	Checkbox, true by default. Allows members to manually navigate between slides. When false, slides advance automatically only.
Behaviour	No	Restart When Reaching the End (default) — loops back to the first slide. Stop When Reaching the End — stays on the last slide.

📘
Carousel Nesting Not Supported
Carousel records can only contain non-carousel content types. Nesting one carousel inside another is not supported.

📘
Setting Slide Order
Use the drag-and-drop reordering interface on the carousel record to set the exact display sequence. The Order / Priority field on each child content record also influences sequence.

🚧
External URLs Require CSP Whitelisting
All external URLs used in content types, must be added to the CSP Trusted Sites list in Salesforce Setup before the content can render correctly.

Salesforce Experience Builder Configuration

The Fielo MX Content Component is a Lightning Web Component (LWC) that can be placed on any Experience Cloud page via the Experience Builder. Configure the following attributes in the property panel:

Field	Required	Description
Content ID	Yes	The Salesforce record ID of the content record to display. If invalid or not found, an error message appears in the component.
Text Orientation	No	Controls reading direction: Left to Right (default) or Right to Left (for Arabic or other RTL languages).
Custom CSS Class	No	Overrides the CSS Class Name Override set on the content record. Applies custom styling to the root element.
Custom CSS File	No	Path to a custom CSS file (relative or absolute) to apply additional styling to the component.

📘
CSS Precedence
If both a Custom CSS Class is set on the Experience Builder component and a CSS Class Name Override is set on the content record, the component-level value takes precedence.

When the Content ID is invalid, the following error message is displayed in the component:

Invalid Content ID: The Content ID provided does not match any existing content record. Please verify the ID and update the component configuration.

Accessibility & Compliance

All front-end content rendered by the Fielo MX Content Component must comply with AODA and WCAG 2.1 Level AA standards:

Keyboard navigation must be fully supported for carousel components, including forward and backward slide navigation without a mouse.
All interactive and clickable elements must have visible focus states.
Appropriate ARIA roles must be applied per content type to ensure screen reader compatibility.
Image Caption fields on Single Image and Banner types must be populated with descriptive alt text.

📘
Accessibility Validation
Use the Siteimprove accessibility tool to validate WCAG 2.1 Level AA compliance before publishing content to production.

Localization & RTL Support

The Fielo MX Content Component is designed to support multilingual and RTL environments:

All component labels use Salesforce Custom Labels to ensure they are fully translatable. No text is hardcoded.
Content can be configured to display Left to Right (LTR) or Right to Left (RTL) using the Text Orientation attribute in Experience Builder.
All content types integrate with Fielo Translations to support multilingual program experiences.

Responsive Design

All content types rendered by the Fielo MX Content Component are fully responsive and adapt to both desktop and mobile screen sizes. The Iframe content type includes a separate Height Mobile field to define iframe dimensions on smaller viewports.

Admin Best Practices

Always populate the Image Caption field on image-based content types for accessibility compliance.
Use the Segment Filter field to quickly locate the correct segment when a program has many active segments.
Use the drag-and-drop interface on Carousel records to set precise slide order rather than relying solely on the Order / Priority field.
Whitelist all external URLs in Salesforce CSP Trusted Sites before creating URL-based content records.
Test scheduled content using the Experience Builder preview mode before the Start Date Time is reached.
Avoid setting Action = Redirect on Rich Text content types that contain embedded links, as this may interfere with navigation.