# 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**
{% stepper %}
{% step %}
#### 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.
{% endstep %}
{% step %}
#### 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
{% hint style="warning" %}
#### **For Legacy Package Installations**
If you installed the legacy standalone Dynamic Components package (instead of the [**Avonni Experiences Components package**](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840\&channel=recommended\&other_source=AppExchange+Recommended)), look for **"Avonni Dynamic Component"** in the component list, not "AX - Dynamic Component."
{% endhint %}
{% endstep %}
{% step %}
#### **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.
{% endstep %}
{% endstepper %}
## **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**](/experience-cloud/welcome.md) (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**](/dynamic-components/components/flow.md)) and custom LWCs (via the [**LWC Container**](/dynamic-components/components/lwc-container.md)).
For a full walkthrough of visibility rules, see [**Component Visibility**](/dynamic-components/core-concepts/component-visibility.md).
***
## 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.avonnicomponents.com/dynamic-components/core-concepts/experience-sites-integration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.