---
schema_version: "1"
id: 62147bb55c3c75b403e81fc17a53e8f13ebb858beb42179962356312fbf840db
title: Add a Flexcard LWC 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_a_flexcard_lwc_to_omniout.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_add_a_flexcard_lwc_to_omniout.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e7ad3c4f77c032b3c092c68808b4a4e41464af1ef9f69d0efecbfa0b5293314a
description: For the managed package runtime, download and configure a Flexcard to use it off-platform in your OmniOut project. Download your Flexcard LWC from the Flexcard Designer, add the component folder to the OmniOut project, and configure files for HTML and CSS.
products:
  - Omnistudio
release: "264"
---
# Add a Flexcard LWC to OmniOut (Managed Package)

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

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

If your Flexcard has a datasource, you must initialize a datasource when building a connection in your app as outlined in Step 11 in [the workflow to run Flexcards off-platform](https://help.salesforce.com/s/articleView?id=xcloud.os_omniout.htm&release=264.0.0&type=5 "For the managed package runtime, run LWC Omniscripts and Flexcards off-platform on third-party websites with OmniOut for Omniscripts and OmniOut for Flexcards. Display Omniscripts and Flexcards and connect to Salesforce from a content management system's (CMS) external website. Run an Omniscript or Flexcard on your external site by adding the component to the OmniOut project, integrating OmniOut into your application, and deploying your application to your CMS."). The step directs you to [Create a Connection Object in OmniOut for Flexcards (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_connection_object_in_omniout_for_flexcards.htm&release=264.0.0&type=5 "For the managed package runtime, send and receive data to and from Salesforce by creating a connection object. A connection object must be present for every type of connection, including when a proxy is present. The connection object exposes the instance URL, namespace, and request function.") to connect your app using the `initializeDatasourceSdk` and `setConnection` methods.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d140463e72">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d140463e72 ">
              <p style="margin-bottom:0;">Available beginning Summer '21.</p>
            </td>

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

Before You Begin

- 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.")

1. Open a Flexcard from Omnistudio Flexcards home tab in your Salesforce org, and click **Activate** from the submenu.
2. Click the down arrow next to **Activate**, and click **Download Off-Platform LWC**.
3. Click **Done**.
4. Copy the component in the **c** folder of your downloaded file into the **./src/modules** folder of your OmniOut project, or subdirectory such as **./src/modules/flexcards**.
5. In Visual Studio Code, open the **./src/index.html** file add the Flexcard component tag. For example, if the name of your component folder is flexaccountproducts and is placed inside the **./src/modules/flexcards** directory, your component tag can look like `<flexcards-accountproducts run-mode="localScriptDef"></flexcards-accountproducts>`.
6. To import and define your component, open the **./src/index.js** file and take these steps:
    
    1. Import your component from your component's file path.
        
        ```
        import FlexCardProducts from 'flexcards/accountproducts';
        ```
    2. Configure the Flexcard for HTML by defining a custom element and connecting it to your component.
        
        ```
        customElements.define('flexcards-accountproducts', buildCustomElementConstructor(FlexCardProducts));
        ```
7. (Optional) In the Flexcard component tag, remove the `run-mode="localScriptDef"` attribute to check if the Flexcard 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
    
    If `run-mode` isn’t present, a connection is made to retrieve the custom labels.
8. (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">
    ```
9. In **Index.html**, include the SLDS styles even when using Newport styles, if the Image element exists in your Flexcard.
    
    <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="d140463e273">
                  <p style="margin-bottom:0;">Element</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d140463e279">
                  <p style="margin-bottom:0;">Style Sheets</p>
                </th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d140463e285">
                  <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="d140463e273 ">
                  <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="d140463e279 ">
                  <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="d140463e285 ">
                  <p style="margin-bottom:0;">OmniOut supports image uploads up to 30 MB.</p>
                </td>

              </tr>
            </tbody>
          </table>
10. Save your file.
11. To restart the server and view your Flexcard locally, 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.").