Skip to main content
Skip table of contents

LWC- Donations


The Donations Lightning Web Component (LWC) in Experience Builder is purpose-built to enable association constituents to make a one-time donation to support the association’s cause. They also have the option to dedicate their contribution ‘in honor of’ or ‘in memory of’ someone.

You can also use the component to build a visually appealing Donations listing page to offer your constituents choices while making the contribution.

Configuration Options

Learn more about Experience Builder here.

From the components list, select the Donations component and drag it onto the site page. 

On the page, click within the Donations component to bring up the Property editor.

Figure 1. Donations LWC with configuration properties




Details of the specific product to display on the LWC. Enter one of the options below:

  • Use {recordId} to dynamically display the details of the current donation product

  • Use the pattern '{url.<parameter name>}' to dynamically display the details of a product specified in the URL parameter. For eg. use '{}' to pull the id from a URL ending in “?id=”

  • Use a Salesforce record ID when you want to display the details of a specific product. For eg. if you want to promote a specific donation product on an experience builder page, you can add this LWC to that page and add the Salesforce record ID of the donation product.


Select from one of the layout options below:

Wide: Use this view when you want to display the details of a donation product utilizing the width of the page.

Compact: Use this view when you want to display the details of a donation product in a vertical format.

Image fit

Select from one of the options below to fit the image within the container:

  • Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit

  • Contain: The image keeps its aspect ratio, but is resized to fit within the given dimension

  • Fill: The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit

  • None: The image is not resized

  • Scale-down: The image is scaled down to the smallest version of none or contain


Figure 2. Donations page when Wide layout is used in configuration

Figure 3. Donation page when Compact layout is used in configuration

Use other LWCs from the Component list to create an impactful page for your constituents. For eg. use the ‘Rich Content Editor’ to add supporting information about the donation and the specific cause your constituents would be supporting. For detailed steps on how to access and use Experience Builder, visit Experience Builder Overview (

See Also

Donations in Experience Cloud

Lightning Web Components Library

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.