--- schema_version: "1" id: bd631c4256163e50d3bda5aa7513d61f438e9bc348e19293530a3831d4faf9b9 title: Embed Flexcards in an Omniscript collection: admin version: current locale: en-us portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_embed_flexcards_in_an_omniscript_24124.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_embed_flexcards_in_an_omniscript_24124.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: b428f9ec990e6310314aacf2941405350c009d338f3a3945df3441c58d94eb44 description: Embed a Flexcard Lightning Web Component in an Omniscript by using the Custom LWC element. Flexcards can receive data from the Omniscript and perform any action available in the Flexcard. products: - Omnistudio release: "264" --- # Embed Flexcards in an Omniscript Embed a Flexcard Lightning Web Component in an Omniscript by using the Custom LWC element. Flexcards can receive data from the Omniscript and perform any action available in the Flexcard. Before You Begin 1. Ensure your Flexcard includes Omniscript support. 2. (Optional) Configure a Flexcard to receive data from Omniscript. 1. From the elements panel, drag the **Custom LWC** element into a step. 2. In the properties panel, in the element's Lightning web component name, enter the Flexcard component's name and prepend cf to the beginning of the name. For example, a Flexcard named Account Card must be entered as cfAccountCard. 3. In **Property Name**, enter a property that the Flexcard expects to receive by converting the property to an HTML attribute format. Three options enable you to pass data into the Flexcard from your Omniscript. Each data option requires you to pass data as an HTML attribute. For example, if a Flexcard receives the property recordId, you must enter record-id in the property name field to pass the property correctly.

Property Name Option

Description

record-id

Pass a record id into a Flexcard using the record-id property. Flexcards use record ids to perform data queries.

parent-attribute

Pass a parent object containing parent attributes such as Parent.id into the Flexcard. Use merge fields in Flexcard queries and fields.

parent-data

AND

records

Map data to Flexcard fields directly without running a query. The parent-data property is a boolean that Flexcards uses to determine whether to run a query or parse over a set of records.

listen-os-data-change

Update the Flexcard whenever the passed-in Omniscript data changes.
4. In **Property Source**, using merge field syntax, enter one of these options based on your property name:

Property Name

Property Source

record-id

Enter a JSON node that contains an object. For example, to pass a record ID stored in the ContextId node, enter %ContextId%. To avoid Flexcard loading issues, don’t use the merge field syntax to reference a custom LWC. For example, if the name of the LWC is customlwc1, don’t use %customlwc1%.

parent-attribute

Enter a JSON node containing an object.

parent-data

AND

records

Set parent-data's property source to true.

Set records equal to an object containing a record or an array of records. Flexcards parses over these records and maps the nodes to Flexcard fields.
listen-os-data-change

Enter true to update the Flexcard whenever the passed-in Omniscript data changes.
5. (Optional) Rerender and refresh the Flexcards save state whenever a user navigates to the step by: 1. In the Flexcards Designer, disable Omniscript support. 2. In the Omniscript Designer, open the Custom LWC element and check **Standalone Mode**. For information on Standalone Custom LWCs, see [Create a Standalone Custom Lightning Web Component](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_standalone_custom_lightning_web_component_18102.htm&release=264.0.0&type=5 "Enable custom Lightning web components to act independently from an Omniscript by adding it to the Omniscript as a standalone component. Standalone custom Lightning web components cannot extend any Omniscript element component or the OmniscriptBaseMixin component. The standalone component supports custom functionalities, but cannot interact with an Omniscript or the Omniscript's data JSON."). 6. (Optional) Beginning with Summer '21, provide Selectable Items in your Omniscript using Flexcards. See [Set Up Card Actions to Update a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_card_actions_26671.htm&release=264.0.0&type=5 "Configure actions that users can trigger and that affect a record on a Flexcard or the Flexcard itself. For example, let users arrange a records view to suit their personal preference."). 7. To pass the Flexcard data to the parent Omniscript, see [Update an Omniscript's JSON Code from a Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_update_an_omniscript_from_a_flexcard_27677.htm&release=264.0.0&type=5 "Specify the JSON node that Omnistudio updates in response to a user action on the Flexcard by embedding the Flexcard in the Omniscript as a custom Lightning web component."). 8. Save and Activate the Script. 9. Preview the Omniscript. ![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 Omniscripts using custom Lightning web components must be active to preview the Omniscript. - **[Pass Data from an Omniscript to an Embedded Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_pass_data_from_an_lwc_omniscript_to_an_embedded_flexcard_41656.htm&release=264.0.0&type=5)** To populate data fields and perform actions on a Flexcard embedded in an Omniscript, you can pass data from an Omniscript's data JSON to the Flexcard. Embed a Flexcard inside an Omniscript with the Custom Lightning Web Component element. - **[Pass Data from a Flexcard to an Omniscript By Using a Custom JSON Data Source](https://help.salesforce.com/s/articleView?id=xcloud.os_pass_data_fc_to_os_custom_json.htm&release=264.0.0&type=5)** To pass data from a Flexcard’s data JSON to an Omniscript, embed the Flexcard as a custom Lightning web component (LWC) inside the Omniscript.