---
schema_version: "1"
id: e67fb7a5c69c78c677b759ac94d0614062e7d5d71d59d111950e5bec91b816f3
title: Extend an Omniscript Element's Lightning Web Component (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_extend_an_omniscript_element_s_lightning_web_component.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_extend_an_omniscript_element_s_lightning_web_component.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 6b60f46da4c360fc93408913895ca95f72b0863005cfd68d80a1961835fdd242
description: For the managed package runtime, add custom behavior and styling to an Omniscript element while maintaining its core functionality. Replace an Omniscript element’s Lightning web component with a component that re-creates its properties and adds new ones.
products:
  - Omnistudio
release: "264"
---
# Extend an Omniscript Element's Lightning Web Component (Managed Package)

For the managed package runtime, add custom behavior and styling to an Omniscript element while maintaining its core functionality. Replace an Omniscript element’s Lightning web component with a component that re-creates its properties and adds new ones.

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

A Lightning web component provides the HTML, JavaScript, XML, and CSS files for an Omniscript element. For example, a Text element has an extendable component named omniscriptText.

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

Custom Lightning web components built outside of the package can't use any Salesforce Lightning web component that uses Salesforce resources or affects the component at runtime. For more information, see [Salesforce Modules](https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_salesforce_modules).

To extend an Omniscript element's Lightning web component:

1. Set up Visual Studio Code on your computer and install the Salesforce Extension Pack. See [Set Up Lightning Web Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_set_up_lightning_web_components.htm&release=264.0.0&type=5 "For the managed package runtime, to manage and develop Omnistudio Lightning web components, use Visual Studio Code with Salesforce DX or IDX Workbench. Both development approaches have source control. Salesforce DX integrates with Visual Studio Code. IDX Workbench lets you deploy components from one sandbox or dev org to another, such as a production org, and compare source and target files.").
2. In Visual Studio Code, type Command-Shift-P (Mac) or Ctrl-shift-P (Windows) to open the command palette, and use the **SFDX: Authorize an Org** command to log into your org.
3. In Visual Studio Code, use the **SFDX: Create Project** command to create a project, which includes an lwc folder.
4. Create a subfolder of lwc named lwcName.
    
    For example, create a subfolder named customText.
5. In the new subfolder, create a file named lwcName.js.
    
    For example, create a file named customText.js.
6. Paste this code into the JavaScript (JS) file, substituting the indicated values.
    
    ```
    import OmniscriptText from 'namespace/omniscriptText';
    import tmpl from './customText.html';          
    export default class customText extends OmniscriptText {
        render() {
            return tmpl;
        }
    }
    ```
    
    - Use the namespace of your org for namespace. For Omnistudio for Managed Packages, the namespace is either `vlocity_cmt` or `vlocity_ins`.
    - Use the name of the Omniscript element's LWC for OmniscriptText and omniscriptText.
    - Use the name of your new component for customText.
7. In the subfolder, create a file named lwcName.js-meta.xml.
    
    For example, create a file named customText.js-meta.xml.
8. Paste this code into the XML file, substituting the namespace of your org for `namespace`.
    
    ```
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="omniscript">
        <apiVersion>60.0</apiVersion>
        <isExposed>true</isExposed>
        <runtimeNamespace>namespace</runtimeNamespace>
        <masterLabel>Custom LWC test</masterLabel>
    </LightningComponentBundle>
    ```
9. Download the LWC ZIP file from the appropriate link in the table of Lightning web components.
10. Unzip the downloaded file and locate its folder that contains the Lightning web component for the Omniscript element you want to extend.
    
    For example, locate the folder named omniscriptText.
11. Copy the HTML file from the Omniscript element's folder to the subfolder in your Visual Studio Code project.
12. Rename the file lwcName.html.
    
    For example, rename the file customText.html.
13. To edit the HTML file:
    1. Open the file in your browser.
    2. Right-click the blank content area.
    3. Select **View Page Source**.
    4. Copy all content from the file.
    5. Paste the content into a text editor.
14. In the HTML file, change every instance of `c-` to `namespace-`, substituting the namespace of your org for namespace.
15. To extend and customize the Omniscript element's functionality, edit the HTML file.
16. To change the element's styling, add an lwcName.css file.
    
    For example, add a CSS file named customText.css.
17. To deploy the custom component to your Salesforce org, right-click the subfolder and select **Deploy Source to Org**.
    
    For more information about deploying Lightning web components, see [Deploy Lightning Web Components (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_lightning_web_components.htm&release=264.0.0&type=5 "For the managed package runtime, deploy new Lightning web components or change existing components from your local development environment with Visual Studio and Salesforce DX or IDX Workbench.").
18. Add the custom component to an Omniscript in one of these ways:
    
    - Override an individual element by using **LWC Component Override**.
    - Map all Omniscript elements of the type you're extending to the custom component.
    
    For more information about adding custom Lightning web components to an Omniscript, see [Add Custom Lightning Web Components to an Omniscript (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_add_custom_lightning_web_components_to_an_omniscript.htm&release=264.0.0&type=5 "For the managed package runtime, after you create a custom Lightning web component for an Omniscript, apply the component’s new behavior by adding it to an Omniscript.").