# Add Components to Experience Cloud site

## 1. Drag and drop a component

1. Identify the **Components button** in the builder sidebar (Figure 1) and click on it.
2. After clicking on the **Components button**, the **Components dialog** appears. At the bottom of this dialog, you can see the **Custom components list** (Figure 2), you can identify the Revenium ACM components by our **HC** logo.
3. Select a component, drag and drop it into the page (Figure 3). Once you have dropped the component, it will be shown in the selected page section.

![Figure 1. Components button.](https://2470865788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSUfCzMW8qWeXstipFXEh%2Fuploads%2Fgit-blob-056968dba1fc91fbfcd667c1bd25d29a048b4ee3%2Fcomponents-button.png?alt=media)

![Figure 2. Custom Components list.](https://2470865788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSUfCzMW8qWeXstipFXEh%2Fuploads%2Fgit-blob-027c4201c3251eb7d952142a6727a20dcf70820b%2Fcustom-components-list.png?alt=media\&token=dfa08fde-8c25-4a03-8036-e244bb56e83a)

![Figure 3. Drag and drop Component.](https://2470865788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSUfCzMW8qWeXstipFXEh%2Fuploads%2Fgit-blob-151b424718f4a13146a9ecb820c54e0c38830f7f%2Fdrag-drop-component.png?alt=media\&token=e711dd64-d4ea-4c21-a11c-84d2d5707211)

## 2. Component configuration dialog

1. When the component is dropped into the page, click on it to open the **Configuration dialog** (Figure 4).
2. You can use the **Configuration dialog** to set the Component's customizable properties, this properties vary from component to component.

![Figure 4. Component's configuration dialog.](https://2470865788-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSUfCzMW8qWeXstipFXEh%2Fuploads%2Fgit-blob-fd9cffcd158cf6efbd98d7e3a711204efba7cdac%2Fcomponent-configuration-dialog.png?alt=media\&token=a130acca-0b9e-4980-9e4b-cc85bb13fe6b)