---
schema_version: "1"
id: 6601406425114e62e70add4039f60e9efd8d79c6c44e242aa386e64f8e254ca9
title: Add an Omniscript Lightning Web Component to OmniOut (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_add_an_omniscript_lightning_web_component_to_omniout.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_an_omniscript_lightning_web_component_to_omniout.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 423f4a492a8401b2af5d72516d80210b32a73687edabc968097de151e7344a6d
description: For the managed package runtime, download and configure an Omniscript to use it off-platform in OmniOut. Download your Omniscript LWC from the LWC Omniscript Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.
products:
  - Omnistudio
release: "264"
---
# Add an Omniscript Lightning Web Component to OmniOut (Managed Package)

For the managed package runtime, download and configure an Omniscript to use it off-platform in OmniOut. Download your Omniscript LWC from the LWC Omniscript Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.

Before you begin:

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

1. Install OmniOut's required dependencies. See [Install OmniOut Dependencies (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_install_omniout_dependencies.htm&release=264.0.0&type=5 "For the managed package runtime, configure and install the OmniOut dependencies using a command-line-tool. Install the tools necessary to build your OmniOut app and view it locally.")
2. (Optional) Configure Omniscript to include nested custom Lightning web components in OmniOut. See [Include Nested Custom LWCs in Your OmniOut Omniscript (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_include_nested_custom_lwcs_in_your_omniout_omniscript.htm&release=264.0.0&type=5 "For the managed package runtime, map nested custom Lightning web components in your Omniscript to include them in your OmniOut project. Lightning web components that override or map to an Omniscript element are automatically downloaded with the off-platform Omniscript LWC.").

To add an Omniscript Lightning Web component to OmniOut:

1. Open an Omniscript in your Salesforce org, and click **Activate**.
2. Click the **Download Off Platform LWC** button and uncompress the downloaded file.
    
    ![The Download Off-Platform LWC button's location in the LWC OmniScript Designer.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/download_off_platform_button.png)
    
    ![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
    
    If your Omniscript includes Custom LWCs from a managed package, the Custom LWCs may not work. Custom LWCs that exist in a managed package only work if they’re off-platform compatible.
3. Copy the component in the lwc folder of your downloaded component into the **./src/modules/vlocityomniscript** folder of your **OmniOut LWC** project.
4. In an Omniscript Designer, copy the Omniscript tag using one of these options:
    
    - In the LWC Omniscript Designer, click the dropdown menu, click **How To Launch**, and copy one of the component tags.
        
        ![Embed component tags for LWC OmniScripts in the LWC OmniScript Designer](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/two_omniscript_component_tags.png)
    - In the Classic Designer, copy the LWC Omniscript component tag from the Script Configuration properties.
        
        ![Embed component tag for LWC OmniScripts in the Classic Designer's Script Configuration section](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/classic_component_tag.png)
    - In the Classic Designer, copy the LWC Omniscript component code from one of the examples found in the **How to Launch activated script section** of the Omniscript.
        
        ![Embed component tags for LWC OmniScript components in the Classic Designer.](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/classic_lwc_embed.png)
5. In Visual Studio Code, open the **./src/index.html** file and replace the component tag with your Omniscript component tag.
6. Edit your component tag by replacing `c--` with `vlocityomniscript-` and save the file.
    
    ![OmniScript component tag example in an index.html file](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/component_tag_omniout.png)
7. To import and define your component, open the **./src/index.js** file and take these steps:
    
    1. Replace the sample component import with your component's file path.
        
        ```
        import VlocApp from 'vlocityomniscript/typeExampleSubtypeExampleEnglish';
        ```
        
        ![image](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/omniout_import_component.png)
    2. Replace the sample component tag with your modified component tag and remove the closing tag and angle brackets.
        
        ```
        customElements.define('vlocityomniscript-type-example-subtype-example-english', buildCustomElementConstructor(VlocApp));
        ```
        
        ![OmniOut Component Tag](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/omniout_component_tag.png)
8. (Optional) In the Omniscript component tag, remove the `run-mode="localScriptDef"` attribute to check if the Omniscript is active in Salesforce.
    
    ![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
    
    When running a multi-language Omniscript, the `run-mode="localScriptDef"` attribute forces the Omniscript to use the locally defined custom labels. If `run-mode` isn’t present, a connection is made to retrieve the custom labels.
9. (Optional) In the Omniscript component tag, add `dir="rtl"` to force the Omniscript styles to load right-to-left regardless of the Omniscript language. Without this attribute, right-to-left languages still load with right-to-left styling. Omniscript provides beta support for right-to-left styling.
    
    ```
    <vlocityomniscript-type-example-subtype-example-english run-mode="localScriptDef" dir="rtl">    </vlocityomniscript-type-example-subtype-example-english>
    ```
10. (Optional) In **Index.html**, uncomment the Newport style sheets to apply Newport styling.
    
    ```
    <link rel="stylesheet" type="text/css" href="/newport/assets/styles/vlocity-newport-design-system.min.css">
    ```
11. In **Index.html**, uncomment the appropriate Script file for each of these elements that exist in your Omniscript:
    
    <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="d326437e321">
                  <p style="margin-bottom:0;">Element</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d326437e327">
                  <p style="margin-bottom:0;">Script File</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e321 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">PDF Action</strong>
                  </p>
                </td>

                <td data-label="Script File" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e327 ">
                  <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>&lt;script src="/vlocityresources/javascript/VlocityPdf.js"&gt;&lt;/script&gt;</code></pre>
                </td>

              </tr>
              <tr class="">
                <td data-label="Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e321 ">
                  <p style="margin-bottom:0;"><strong class="uicontrol">Type Ahead Block</strong> using Google Maps</p>
                </td>

                <td data-label="Script File" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e327 ">
                  <p>Uncomment this file, and in the <strong class="uicontrol">key</strong>
                    parameter, enter your API key.</p>
                  <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>&lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY_HERE}&amp;libraries=places"&gt;
&lt;/script&gt;</code></pre>
                </td>

              </tr>
            </tbody>
          </table>
12. In **Index.html**, include the SLDS styles even when using Newport styles, if these elements exist in your Omniscript:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col>
              <col>
              <col>
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d326437e405">
                  <p style="margin-bottom:0;">Element</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d326437e411">
                  <p style="margin-bottom:0;">Style Sheets</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d326437e417">
                  <p style="margin-bottom:0;">Note</p>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Element" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e405 ">
                  <p style="margin-bottom:0;">
                    <strong class="uicontrol">File</strong>
                  </p>
                </td>

                <td data-label="Style Sheets" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e411 ">
                  <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>&lt;!-- SLDS styles --&gt;
&lt;link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css"&gt;
&lt;link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css"&gt;</code></pre>
                </td>

                <td data-label="Note" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e417 ">
                  <p style="margin-bottom:0;">LWC OmniOut supports file uploads up to 30 MB.</p>
                </td>

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

                <td data-label="Style Sheets" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e411 ">
                  <pre class="line-numbers slds-box slds-box_x-small slds-theme_shade slds-m-top_medium slds-m-bottom_medium slds-scrollable_x"><code>&lt;!-- SLDS styles --&gt;
&lt;link rel="stylesheet" type="text/css" href="/slds/assets/styles/salesforce-lightning-design-system.css"&gt;
&lt;link rel="stylesheet" type="text/css" href="/vlocityresources/slds/styles/OmniLwcUtilsCss.css"&gt;</code></pre>
                </td>

                <td data-label="Note" class="slds-cell-wrap" style="vertical-align:top;" headers="d326437e417 ">
                  <p style="margin-bottom:0;">LWC OmniOut supports image uploads up to 30 MB.</p>
                </td>

              </tr>
            </tbody>
          </table>
13. Save your file.
14. To restart the server and view your Omniscript, run the command `npm run watch` in your terminal console.

What’s next: [Create a Connected App for OmniOut (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_connected_app_for_omniout.htm&release=264.0.0&type=5 "For the managed package runtime, enable the external connection to interact with Salesforce by configuring a Connected App in Salesforce. Create a Connected App to make external calls from OmniOut. Connected Apps provide OmniOut with an access token that enables proxies and login authentication to work.").