---
schema_version: "1"
id: 193746d111dd2426d1ff5b5df30269bbbb924516616e39cac3fed6b85e8d1bc9
title: Embed a Custom Lightning Web Component
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_29568.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_embed_a_custom_lwc_inside_a_flexcard_29568.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 3b2be7f370fedd88a526bbf246d727d20d22c40ff6c6f7235117a3de0a689fc5
description: Embed components to which you add custom styling and functionality. For example, embed an existing carousel component in a Flexcard and then configure its attributes.
products:
  - Omnistudio
release: "264"
---
# Embed a Custom Lightning Web Component

Embed components to which you add custom styling and functionality. For example, embed an existing carousel component in a Flexcard and then configure its attributes.

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_important.png)

Important

Don’t embed the same component in multiple Flexcards.

1. From the App Launcher, find and select **Flexcards**.
2. Expand a Flexcard and select a version.
3. If needed, deactivate the Flexcard for editing the Flexcard.
4. Drag a **Custom LWC** element from the elements panel to the canvas.
    
    Custom Lightning web components render only when you preview the Flexcard.
5. Set the component in the Custom LWC Name field depending on the component type:
    
    - Custom Lightning web component: Select a component that you created or that comes with Omnistudio. You can also enter the name of a component from the Lightning Component Library.
        
        For example, you can enter `lightning-map`. The names of some custom Lightning web components include the prefix `cf`.
    - Omniscript created in Omnistudio: Enter `omnistudioStandardRuntimeWrapper`, a Lightning web component wrapper that you configure in the next step.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio-264-0-0-production-enus/f526eaa8-ae05-487a-8944-4bb99b0b78ac/images/icon_note.png)
    
    Note
    
    You can't add Flexcards created in Omnistudio or Omnistudio for Managed Packages as a custom LWC in the standard runtime. You also can't add Omniscripts created in Omnistudio for Managed Packages as a custom LWC in the standard runtime.
6. Add the component’s attributes and values:
    - Use the HTML attribute format for the attribute name. For example, to use the `recordId` property, enter `record-id` for the attribute name.
    - For Omniscripts created by using Omnistudio, add the type, subtype, and language attributes to apply to the Lightning web component wrapper. At runtime, Omnistudio generates the Omniscript, and the wrapper loads it.
    - The attribute value can be a merge field such as `{Number}` or a supported context variable such as `{Session.number}`. The attribute value can also be plain text or a concatenated string that consists of plain text and a merge field such as `{Parent.parentPath}>{Parent.type}>{Name}` for a breadcrumb path.
7. Enter the remaining information as needed.