---
schema_version: "1"
id: 3fd610c4e26bb562d3bc6340b3f47f1491471afc31fbca91d6e9616702c96dd2
title: Extend the 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_omniscriptbasemixin_component_vlocity.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_extend_omniscriptbasemixin_component_vlocity.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 42a6bae18f78fc8ccdd40c25bb933126066565cc386ee1355044ffc33c9e1ddb
description: For the managed package runtime, learn how a custom Lightning web component extends the OmniScriptBaseMixin component to wrap a Salesforce Lightning Element.
products:
  - Omnistudio
release: "264"
---
# Extend the Component (Managed Package)

For the managed package runtime, learn how a custom Lightning web component extends the OmniScriptBaseMixin component to wrap a Salesforce Lightning 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).

In this code example, replace the **NS** variable in the code example with the namespace of the Vlocity package that you use.

```
import tmpl from './customLightningElement.html';
import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from 'NS/omniscriptBaseMixin';

export default class customLightningElementWithMixin extends OmniscriptBaseMixin(LightningElement) {
    handleBlur(evt) {
        this.omniUpdateDataJson(evt.target.value);
    }

    render() {
        return tmpl;
    }
}
```