Add a progress bar to an Experience Cloud site

Experience Builder uses the site versions of the components from the Avonni Experience Components package, labeled AX - followed by the component name. This tutorial adds AX - Progress Bar to a site page to show how close a fundraising campaign is to its goal.

Before you start, install Avonni Experience Components in your org. If guest users will see the page, give the site’s guest user profile the Avonni Experience Cloud Components permission set; guest access in production orgs is an add-on to the package.

1. From Setup, open Digital Experiences, then All Sites, and click Builder next to your site.
2. Open the page where the progress bar should appear.
3. Open the Components panel and find AX - Progress Bar, or type Progress Bar in the search box.
4. Drag it onto the page.
5. In the property panel, set Label to Spring campaign goal, Value to 72, turn on Show Value, and set Theme to success and Thickness to large.
6. Click Preview to check the page, then Publish. The site keeps the component versions it was published with, so publish again after upgrading the package.

Experience Builder saves the component in the page’s content.json. The Code tab of the example shows a simplified node for reference, with the values Experience Builder presets when the component is dropped (orientation, size, variant…); add components in Experience Builder rather than editing the file:

{
  "attributes" : {
    "label" : "Spring campaign goal",
    "orientation" : "horizontal",
    "showValue" : true,
    "size" : "full",
    "theme" : "success",
    "thickness" : "large",
    "value" : "72",
    "valuePosition" : "top-right",
    "variant" : "base"
  },
  "definition" : "avxp:xpcProgressBar",
  "id" : "ae875560-950f-4851-a185-760ab844b1ee",
  "type" : "component"
}

Some components, such as the rating, the slider or the counter, have no site version. The Playground shows them on the Experience Site platform via Dynamic Component: build them as an Avonni Dynamic Component, as in the tutorial Add an alert to a Lightning record page, then drag AX - Dynamic Component onto the page and pick the component in Component Name. Their Code tab gives the Dynamic Component record and the content.json node. Guest users need the Avonni Dynamic Components User permission set to load a saved Dynamic Component.