---
schema_version: "1"
id: d9b4e940b7ca3887282b187dfa20ff0fc7dbe04db209bf8876da9373a579a948
title: Add a Flexcard to an Experience Cloud Page
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_a_flexcard_to_an_experience_page_25183.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_flexcard_to_an_experience_page_25183.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 8aaf304c5c094f5098c753857202ed96fb64892bcefe23d710c7b3f5524afead
description: After creating and activating your Flexcard, publish the generated component to an Experience Cloud page from the Experience Builder.
release: "264"
---
# Add a Flexcard to an Experience Cloud Page

After creating and activating your Flexcard, publish the generated component to an Experience Cloud page from the Experience Builder.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)

Note

Beginning Summer '22, add a standard Flexcard component to an Experience Cloud page. See [Add a Flexcard to an Experience Builder Page](https://help.salesforce.com/s/articleView?id=xcloud.os_activateconfigureand_publish_flexcards_24744.htm&release=264.0.0&type=5 "Add a Flexcard that you created or an existing Flexcard to the pages of Experience Builder sites.").

Before You Begin

- Activate your Flexcard. See [Activate a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_activate_a_flexcard_24808.htm&release=264.0.0&type=5 "Activate a Flexcard to generate an LWC and publish it to a Lightning page or Experience Builder site. Activating a Flexcard disables editing capabilities. You can’t add or edit elements on an active Flexcard.").

1. To access the Experience Builder, see [Navigate Experience Builder](https://help.salesforce.com/s/articleView?id=experience.community_designer_ui.htm&type=5&language=en_US).
2. Click the lightning bolt icon to open the Components pane.
3. From the list of **Custom Components** in the Components pane, find the name of your generated Flexcard LWC and drag it to the canvas area.
    
    ![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_important.png)
    
    Important
    
    If you don't see your Flexcard, confirm that it is active and available to Experience Builder sites by selecting the appropriate **Target**. See [Define Metadata Values from the Flexcard Designer](https://help.salesforce.com/s/articleView?id=xcloud.os_define_metadata_values_from_the_flexcard_designer_24983.htm&release=264.0.0&type=5 "Define the metadata values for the generated Flexcard LWC from the Flexcard Designer. When your Flexcard is active, use the Publish Options feature to configure API Version, Targets, Description, and other metadata values from a GUI or code editor.").
4. To view record data on a Flexcard that uses the `{recordId}` context variable to pass the ContextId to a data source, enter {!recordId} in **recordId**. See [Access the ContextId of a Flexcard on an Experience Site](https://help.salesforce.com/s/articleView?id=xcloud.os_access_the_contextid_of_a_flexcard_on_an_experience_site_42057.htm&release=264.0.0&type=5 "Most Flexcards use a ContextId, represented by the {recordId} context variable in an Input Map, to retrieve data from an Apex Remote, Omnistudio Data Mapper, or Integration Procedure data source. For a Flexcard to use the {recordId} context variable on an Experience site, you must add and configure a RecordId property. Add this property to your Flexcard's configuration, then configure the property on the Experience page.").
5. (Optional) Beginning Winter '22, if your Flexcard defines an attribute that creates a public property, set the public property value from the properties pane in the Experience Builder. For example, if the attribute defined in the Flexcard is `AccountRecordLimit`, and the **Label** is Record Limit, look for **Record Limit** in the Experience Builder properties pane. See [Create a Public Property for a Flexcard LWC in the Flexcard Designer](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_public_property_for_a_flexcard_lwc_in_the_flexcard_designer_41483.htm&release=264.0.0&type=5 "In the Flexcard Designer, define an attribute that creates a public property whose value is set in the Lightning App Builder and Experience Builder. Call the attribute within the Flexcard as a session variable ({Session.AttName}) where merge fields are supported, such as in a Text element and a data source parameter.").
    
    Beginning Summer '22, if you're adding a standard Flexcard to an Aura-based Experience Cloud page and need to define the value of a public property, use **Exposed Attributes**. See [Add a Flexcard to an Experience Builder Page](https://help.salesforce.com/s/articleView?id=xcloud.os_activateconfigureand_publish_flexcards_24744.htm&release=264.0.0&type=5 "Add a Flexcard that you created or an existing Flexcard to the pages of Experience Builder sites.").
6. To preview, click **Preview**. See [Preview Your Experience Builder Site](https://help.salesforce.com/articleView?id=community_designer_preview.htm&type=5&language=en_US).