---
schema_version: "1"
id: be10191629226413ba1f99ee9c6639b238a6e77fd068a7fcf6e9a18425c32d7f
title: Embed a Custom Lightning Web Component, a Flexcard, or an Omniscript in a Flexcard (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_embed_a_custom_lwc_inside_a_flexcard.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_embed_a_custom_lwc_inside_a_flexcard.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: cd34e7f84de9286147d2b55d9b76c996ff1ab81c57c61cf490a6e726074b129e
description: For the managed package runtime, embed a custom LWC, a child Flexcard, or an Omniscript in a Flexcard, and add custom styling and functionality. For example, if you have a carousel component, you can embed it in a Flexcard and then configure its attributes.
products:
  - Omnistudio
release: "264"
---
# Embed a Custom Lightning Web Component, a Flexcard, or an Omniscript in a Flexcard (Managed Package)

For the managed package runtime, embed a custom LWC, a child Flexcard, or an Omniscript in a Flexcard, and add custom styling and functionality. For example, if you have a carousel component, you can embed it in a Flexcard and then configure its attributes.

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

Before You Begin

Create and activate a [Flexcard](https://help.salesforce.com/s/articleView?id=xcloud.os_create_a_flexcard.htm&release=264.0.0&type=5 "For the managed package runtime, configure basic settings and data source options when creating a Flexcard in the Flexcard Designer. After creating a Flexcard you can update additional options and start building your user experience."), a [custom LWC](https://help.salesforce.com/s/articleView?id=xcloud.os_extend_vlocity_lightning_web_components.htm&release=264.0.0&type=5 "For the managed package runtime, customize the behavior and styling of an application by extending Vlocity Lightning web components. For example, override properties, add other components, or insert HTML.") component, or an LWC Omniscript to generate a Lightning web component to embed in your Flexcard state. See [Create an LWC Omniscript (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_an_lwc_omniscript.htm&release=264.0.0&type=5 "For the managed package runtime, create an LWC Omniscript to use custom Lightning web components and functionality exclusive to LWC Omniscripts.") or [Create an LWC Omniscript in the LWC Omniscript Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_create_an_lwc_omniscript_in_the_lwc_omniscript_designer.htm&release=264.0.0&type=5 "For the managed package runtime, create an LWC Omniscript to build a script in the LWC Omniscript Designer.").

![Important](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_important.png)

Important Don’t embed the same component in multiple Flexcards.

1. In the Flexcard designer, open a Flexcard and drag a **Custom LWC** element from the Build panel into the Flexcard.
2. In the Properties panel, you can enter an optional element name.
3. For Custom LWC Name, select the custom LWC to embed.
    - The custom LWC element renders in Preview only.
    - The names of custom LWCs created in the Flexcard designer have the prefix `cf`. For example, if your Child Flexcard name is AccountCases, the custom LWC element name is cfAccountCases.
4. Set the component’s attributes.
    1. Click **+Add** next to Attributes, and enter a name such as thumbnaillimit.
        
        The name of a custom LWC attribute must match the element's markup name. For example, for the targetType attribute from the Navigate Action LWC, enter target-type.
    2. For Value, select a merge field such as {Number}, a supported [context variable](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_context_variables.htm&release=264.0.0&type=5 "For the managed package runtime, global and local context variables are available to a Flexcard to provide context to data sources, actions, and other components. All variables are case sensitive.") such as {Session.number}, or text.
        
        Pass concatenated strings by combining plain text and supported merge fields. For example, pass a breadcrumb path such as {Parent.parentPath}>{Parent.type}>{Name}.
5. To display or hide data based on the value of a data field, add conditions to an element of your Flexcard.
6. To style your element, click **Style**.
    
    You can configure the look and feel of a Flexcard by styling individual elements, fields inside elements, and entire states.
7. Preview your Flexcard.

- **[Flexcards Custom LWC Properties (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_flexcards_custom_lwc_properties.htm&release=264.0.0&type=5)**  
    For the managed package runtime, custom LWC element properties are configurable in the Property Panel when you select a Custom LWC element in the Flexcard Designer. With Custom LWC element, embed an LWC Omniscript, a generated Flexcard LWC, or a custom LWC, inside a Flexcard state.