---
schema_version: "1"
id: 33460f48880535a34c0014bdd673fcdc78b035d7eaa7a421047b1d6f79036730
title: Custom LWC Element
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_custom_lwc_element_17587.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_custom_lwc_element_17587.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 74ec94f811ed36f210b4df5bdadd84a83044a4b5cb5ec9073f302363788bf6bb
description: Add a custom Lightning web component that does not extend an Omniscript element component to an Omniscript using the Custom LWC element.
products:
  - Omnistudio
release: "264"
---
# Custom LWC Element

Add a custom Lightning web component that does not extend an Omniscript element component to an Omniscript using the Custom LWC element.

The Custom LWC element supports these two types of custom Lightning web components:

- Components that extend the OmniscriptBaseMixin component. See [Extend the OmniscriptBaseMixin Component](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component_17717.htm&release=264.0.0&type=5 "Enable a custom Lightning web component to interact with an Omniscript by extending the OmniscriptBaseMixin component. The OmniscriptBaseMixin includes methods to update an Omniscript's data JSON, pass parameters, and more.").
- Standalone components that run independently from Omniscript. 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.").

![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

Use Custom LWC Elements in a Step and a non-repeatable Block element that is not nested.

1. From the elements panel, drag a **Custom LWC** element to the canvas.
2. In **Name** and **Field Label**, enter a name and display name for the Custom LWC element.
3. In the **Lightning Web Component Name** field, enter the name of your custom Lightning web component.
4. Select **Standalone LWC** if your custom component does not extend the OmniscriptBaseMixin component.
5. Pass property values into the Omniscript by entering values in these property fields:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d82443e123">
                  <p style="margin-bottom:0;">Property</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d82443e129">
                  <p style="margin-bottom:0;">Description</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d82443e123 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">Property Name</strong>
                  </p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d82443e129 ">
                  <p style="margin-bottom:0;">Enter a property name using the HTML attribute format to pass it
                    into the custom component. For example, the property recordId
                    converts to the HTML attribute record-id.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d82443e123 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">Property Source</strong>
                  </p>
                </td>

                <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d82443e129 ">
                  <p style="margin-bottom:0;">Enter a value to pass in the property. Values may use merge field
                    syntax to pass a JSON node. For example, to pass the JSON node
                    ContextId, enter <kbd>%ContextId%</kbd>. 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 <kbd>%customlwc1%</kbd>.</p>
                </td>

              </tr>
            </tbody>
          </table>

- **[Embed Flexcards in an Omniscript](https://help.salesforce.com/s/articleView?id=xcloud.os_embed_flexcards_in_an_omniscript_24124.htm&release=264.0.0&type=5)**  
    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.