---
schema_version: "1"
id: 26179e3ef5af1cccc226ab3b8297c390d633f3f499e20d63e7a0ed37f70f6db8
title: Custom LWC Element (Managed Package)
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.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_custom_lwc_element.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e38af0263dd27b649b6f3bb2a052c9c1055e84495225d4f039d3750a3a79dc51
description: For the managed package runtime, 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 (Managed Package)

For the managed package runtime, add a custom Lightning web component that does not extend an Omniscript element component to an Omniscript using the Custom LWC element.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note

Use Custom LWC Elements in a Step, and, beginning with Vlocity Insurance and Health and Vlocity CME Summer '20, a non-repeatable Block element that is not nested.

Before You Begin

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

- Components that extend the **OmniScriptBaseMixin** component. For more information, see [Extend the OmniScriptBaseMixin Component (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_the_omniscriptbasemixin_component.htm&release=264.0.0&type=5 "For the managed package runtime, 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. For more information, see [Create a Standalone Custom Lightning Web Component (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_standalone_custom_lightning_web_component.htm&release=264.0.0&type=5 "For the managed package runtime, enable custom Lightning web components to act independently from an Omniscript by adding it to the Omniscript as a standalone component.").

1. In an Omniscript, add the Custom LWC element.
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. (Optional) Check **Standalone LWC** if your custom component does not extend the OmniScriptBaseMixin component.
5. (Optional) 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="d157591e137">
                  <p style="margin-bottom:0;">Property</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d157591e143">
                  <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="d157591e137 ">
                  <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="d157591e143 ">
                  <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="d157591e137 ">
                  <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="d157591e143 ">
                  <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>
6. (Optional) Activate and preview the Omniscript to view your custom Lightning web component.