Standard Components for LWR Templates

Actions Bar

Help users act on Salesforce records from your LWR site. Add a custom set of actions, choose the number of actions in the bar, and customize how more actions appear in the dropdown menu. Individual action button styles are inherited from site branding settings. See Actions Bar Considerations in LWR Sites.

Banner

Create a banner layout on your site using images, text, and buttons. Use data binding in this component to dynamically populate content from Salesforce CMS and other data sources.

Button

Use buttons as calls to action linking to external pages or pages in your site. Nest the Button component inside other components, such as Banner and Tile, to add calls to action in any region of the page.

Card

Use this flexible container to add content in a rectangular card. You can specify the card’s height, width, and background color, and you can customize image settings.

Embedded Messaging

To modernize how you communicate with customers, add Messaging for Web to your Experience Builder site. See Configure a Messaging for Web Deployment in an Experience Builder Site

Flow

Automate business processes with the Flow component. Add screen flows to your pages so that you can capture information, take customers through workflows, and use the flexibility of Flow Builder to your advantage. Flows that use Aura components aren’t supported.

Grid

Use the Grid component to show collections or list views in LWR sites. Select a data source, layout, and pagination option to show content saved in Salesforce. In non-enhanced LWR sites, the Grid component shows object list views. In enhanced LWR sites, the component can display object list views or CMS collections created in enhanced workspaces. When you select the Show pagination option, you can customize how you want users to navigate through content on your site.

Note In commerce stores, the grid component has a third data source, Nested Expression. With the Nested Expressions data source, you can bind data nested in the top-level data source. Nested Expressions gives you more flexibility to show data that hasn’t been put into list views.

Horizontal Line

Add a horizontal line to visually separate elements on the page. Choose the line’s weight, width, and style.

HTML Editor

Use the HTML Editor component to create and edit custom content in HTML. In orgs with at least 1 active community license, this component can use data binding to dynamically populate content from Salesforce CMS and other data sources on record and CMS detail pages.

Image

Use the image component to add images to your page. Add the image URL and alt text for screen readers. This component can dynamically populate content from Salesforce CMS and other data sources when used on CMS or record detail pages.

List

Create lists that dynamically populate with CMS or CRM data based on your site’s needs. Control the look and feel of the list data with ease from the property panel.

Navigation Menu

Design a separate navigation menu for the desktop and mobile version of your site. Customize the Navigation Bar for desktop screens and Mobile Navigation for mobile screens. A tablet held in landscape view shows the desktop navigation, and one held in portrait view shows mobile navigation. You can add menu items of these types: External URL, Menu Label, Salesforce Object, Site Page.

Note We recommend against using custom CSS with the Navigation Menu component because the CSS can fail. See Override Component Branding in LWR Sites with Custom CSS in the LWR developer guide.

Overlap

Overlap content components on the page. Overlap an image with content components, such as Text Block and Button, for a layered look.

Record List (LWR)

Help visitors view, search, and sort accounts, cases, and other data in your LWR site. The component displays only the data users are permitted to view, based on access settings defined by your admin. Customize the component’s appearance with properties for styling and layout, including support for custom CSS. The responsive design ensures a seamless experience across desktop, tablet, and mobile devices. It offers a clean, professional data display that aligns with ‌your brand and website design.

Note The Record List component doesn't support the Task object. Hence, it is not available in the object selection dropdown in Experience Builder.

Results Layout

Add the Results Layout component, along with the Search Bar component, so that your site visitors can view search results. The Results Layout component is available only after you create a standard Search page. See Set Up CMS Content Search in an LWR Site and Set Up CRM Search in LWR Sites (Beta).

Rich Content Editor

Use the Rich Content Editor component to add formatted custom text to your site pages, along with images and videos. To add alt text to an image, make sure that the component is in edit mode, then right-click the image. In orgs with at least 1 active community license, this component can use data binding to dynamically populate content from Salesforce CMS and other data sources on record and CMS detail pages.

Note Branding changes that you make using the Themes tab and branding design tokens don’t apply to the Rich Content Editor component.

For best results, when you update the content in this component, make your changes in Experience Builder, rather than by using Experience Bundle or Digital Experience Bundle.

Search Bar

Add the Search Bar and Results Layout components so that visitors can search for CMS content and CRM records. When you add the Search Bar component to the header section, search is available across all site pages. See Set Up CMS Content Search in an LWR Site and Set Up CRM Search in LWR Sites (Beta).

Site Header (Beta)

Create headers for specific site pages. The site Header comes with components for a logo, navigation menu, and button. Add or delete components based on your site’s needs. Responsive properties work only in enhanced LWR sites. To use Site Header in a microsite, in Settings | Theme, create a theme layout using the Simple Theme Layout option. Assign the new layout to the pages where you want the new site header to appear, delete the default header from those pages, and replace it with Site Header.

Note

The Site Header component is a pilot or beta service that is subject to the Beta Services Terms at Agreements - Salesforce.com or a written Unified Pilot Agreement if executed by Customer, and applicable terms in the Product Terms Directory. Use of this pilot or beta service is at the Customer's sole discretion.

Tabs

Add up to 5 horizontal or vertical tabs and control the way they look on your site. Drop any content component into a tab region. You can use a data-bound component to show products in one tab, a button to contact support on another tab, and a list of your product’s features on a third.

Text Block

Add text to the page. Text formatting, such as heading tags and font size, is inherited from site branding settings.

Tile

Create a tile layout on your site using images, text, and buttons. Use data binding in this component to dynamically populate content from Salesforce CMS and other data sources.

Tile Menu

Add an intuitive and visually stunning navigation experience to your site.

Video

Use the Video component to add videos to your page. Add the video embed URL and settings such as aspect ratio, width, and horizontal alignment. Use data binding in this component to dynamically populate content from Salesforce CMS and other data sources.

Available in Orgs That Have at Least One Active Community License

Biometric Login Button

Use the Biometric Login Button component to create a button that triggers the login prompt for face or fingerprint recognition on a mobile app. This component is supported only on the login page of Mobile Publisher for Experience Cloud apps configured with User Opt-In Biometric Login. Mobile Publisher for Experience Cloud LWR sites supports only the Build Your Own (LWR) template.

Columns

Add up to 6 columns of content components to your page. Customize the column structure by selecting the Column Layout icon. Resize the columns by using the handles between the columns. To delete a column, click beneath it.

Contact Support Form

To enable users to contact support and generate a case from your site, add the Contact Support Form component. Several preconfigured component fields streamline the collection of information from the user to get their support request submitted and resolved quickly. The component contains several custom fields that you can configure to your company’s preferences.

Flow Orchestration Work Guide

Use the Flow Orchestration Work Guide component so that credentialed site visitors can complete work items assigned to them by an orchestration.

Knowledge Article

Use the Knowledge Article component to show site visitors knowledge articles in LWR. Salesforce admins can toggle between field labels and field sections and adjust the style of the knowledge article title. Mandatory field labels, such as URL Name, that your site visitors don’t need are also hidden.

Knowledge Article List (Beta)

Use the Knowledge Article List (beta) component to show knowledge articles that belong to the same data category on LWR sites. You can also control how knowledge articles are sorted on the page for more customization opportunities.

Language Selector

Allow users to choose their own site language. After configuring translations, add the Language Selector component to your page to provide a language selection dropdown menu.

Note In a site that has only one language, you can drag the Language Selector onto a page, but the component is disabled and unavailable. None of the customizations you make in the component property panel are saved.

Lead Form

Route leads gathered in your site to the Leads object in Salesforce. Using preconfigured mappings, you can transfer your lead data without tedious background setup.

Marketing Cloud Engagement Form

Send contact information directly from your LWR sites to Marketing Cloud Engagement data extensions. Create data extensions from the Form component with one click and then start gathering customer info.

Page Refresh

On the Too Many Requests page, the Page Refresh component automatically refreshes the page for your customers. The Page Refresh component is built into the body of the Too Many Requests page, so there’s no need to manually add it to the page.

Record Detail

View and edit records in your LWR site. In the component, users see the page layout that’s assigned to their profile. The component inherits formatting, such as font and color, from your site’s branding settings. The Record Detail panel doesn’t show in the list of available components if it’s not available for the object, even if Show All Components is checked. For example, Note, Report, ServiceReport, and Task are a few of the objects that aren’t available for use with the Record Detail component in LWR sites.

Site Logo

Personalize the pages on your site with your logo. The Site Logo component replaces the Community Logo component as of Summer ’23. Sites created before Summer ’23 continue to use the Community Logo. To use Site Logo, delete the Community Logo and drag the Site Logo component to the page. Site Logo is also incorporated into the Site Header (beta) component.

To learn more about how to dynamically populate data in LWR templates, watch: