Experience Sites Integration

Overview

Your Dynamic Components work on Experience Cloud sites just like they do on internal Lightning pages. You build your component in the Dynamic Component Builder, activate it, then add it to your site pages through the Experience Builder.

---

How to Add Dynamic Components to Your Site

1

Build and activate your component

Create your Dynamic Component in the Component Builder, save it, then click Activate. Without activation, it won't appear in the Experience Builder.

2

Add it to your site page

1. Open your Experience Cloud site in the Experience Builder

2. Navigate to the page where you want to add your component

3. In the Components panel (left side), find "AX - Dynamic Component" under the Custom section

4. Drag it onto your page

For Legacy Package Installations

If you installed the legacy standalone Dynamic Components package (instead of the Avonni Experiences Components package), look for "Avonni Dynamic Component" in the component list, not "AX - Dynamic Component."

3

Choose which component to display

Select the component you just placed on the page. In the Properties Panel on the right, you'll see:

Component Name: Select which Dynamic Component you want to display from the dropdown. If your component doesn't appear, make sure it's activated in the Component Builder.

Record ID: On record detail pages (like Case Detail or custom object pages), enter {!recordId} to pass the current record's ID to your component automatically. Your component can then use $Component.recordId to display the correct data.

Object Name: Enter {!objectApiName} to pass the object's API name to your component, giving it additional context about the page.

Two Ways to Use Avonni in Experience Cloud

Dynamic Components (what this guide covers)

Build complex, custom solutions—like a filterable data table, Kanban board, or metrics dashboard—then place the entire custom component on your site page. Best for advanced, interactive use cases.

Pre-Built Experience Site Components

Use our library of 40+ individual components (Map, Gallery, Image List, etc.) that you can drag directly onto pages. Best for simpler needs where you want a quick, pre-made element.

You can use both on the same site! Use pre-built components for simple tasks and Dynamic Components for custom, complex experiences.

---

Visibility Rules on Experience Cloud

Visibility rules work on Experience Cloud pages the same way they work on internal Lightning Pages. Any condition you set up in the Component Builder (based on record data, variables, formulas, or device type) applies at runtime on your site, for both Aura and LWR sites.

This matters because Salesforce's built-in Audiences feature controls visibility at the page or component level, but only using broad criteria such as profile, location, or record type. If you need finer control — showing a section only when a field has a specific value, or hiding a form until the user clicks a button — Audiences won't get you there.

With Dynamic Components, you define those conditions directly in the Component Builder using the Set Component Visibility property. The rules run on the client side at page load and update as the user interacts. No need to create separate page variations or duplicate components for different audiences.

This applies to every component inside your Dynamic Component, including embedded Flows (via the Flow component) and custom LWCs (via the LWC Container).

For a full walkthrough of visibility rules, see Component Visibility.

---

Aura vs. LWR: what to know

Both site types are supported. A few differences worth noting:

	Aura sites	LWR sites
Dynamic Components	Supported	Supported
Visibility rules	Work identically	Work identically
Record ID on non-record pages	Not auto-populated. Use {!recordId} in the component properties, or the builder derives it from context via an Apex call	Auto-populated
Lightning Locker	Standard behavior	More restrictive. Some features (like the Language Selector's window object access) require Locker to be disabled
Slots	Not available	Available

If you're on an Aura site and your Dynamic Component doesn't display record data on a non-record page, check that you've passed {!recordId} in the component properties. This is the most common issue we see.