Experience Sites Integration

Overview

You can deploy the powerful, custom components you build with the Avonni Dynamic Component Builder directly onto your Experience Cloud site pages. This allows you to create rich, interactive, and data-driven experiences for your customers, partners, and external users, going far beyond standard Experience Builder components.

---

How it Works

When you work in the Experience Builder, you won't see each of your creations listed in the component panel. Instead, you'll use a single, generic component named "Avonni Dynamic Component". This component acts as a container on your page. You then configure this container to display the specific, activated Dynamic Component you want to show.

Step-by-Step Guide

Step 1: Build and Activate Your Dynamic Component

Before you can add a component to an Experience Cloud site, you must first build and test it within the Avonni Dynamic Component Builder.

• Ensure the component is saved.

• Crucially, you must click Activate. Activation makes your component available for selection within the Experience Builder.

Step 2: Add the Container to Your Experience Cloud Page

1. Navigate to your Experience Cloud site and open the Experience Builder.

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

3. Open the Components panel (usually on the left).

4. Find the component named "Avonni Dynamic Component" (it may be under a "Custom" section) and drag it onto your desired location on the page.

Step 3: Configure the Container's Properties

Select the "Avonni Dynamic Component" container you just placed on the page. The property editor on the right will appear with the following key settings:

• Component Name: This dropdown list displays all activated Avonni Dynamic Components. Select the specific component you want to display in this container. If your component is not appearing in the list, return to the builder and ensure it has been activated.

• Record ID: This is essential for making your component context-aware on a record detail page within your site (e.g., a Case Detail or custom object page). Enter {!recordId} into this field to automatically pass the ID of the current record being viewed into your component. Your component can then use this ID (via $Component.recordId) to fetch and display the correct data.

• Object Name: Similarly, on a record or object page, you can pass the object's name into your component by entering {!objectApiName}. This provides further context about the page the component is operating on.

---

Understanding Your Avonni Options for Experience Cloud

It's helpful to know there are two ways to use Avonni components in Experience Cloud, each designed for different needs:

• Avonni Dynamic Components (This Guide): Use this approach when you need to build complex, custom, multi-part solutions. It's ideal for creating advanced, interactive use cases—such as a card with a filterable data table, a Kanban board, a multi-step process, or a metrics dashboard—and then placing that entire custom-built solution onto a site page.

• Pre-Built Avonni Components for Experience Sites: Our other package provides a library of over 40 individual, pre-built components (like a simple Map, Gallery, or Image list) directly available in the Experience Builder. This is ideal for simpler, more direct needs where you want to add a pre-made element to a page quickly.

You can use both solutions together on the same site! Use the pre-built components for simple tasks and use the powerful Dynamic Component container for your more advanced, custom-built experiences.