---
schema_version: "1"
id: 3ab621206d9af990d7f48b8a8d50183aa754a8229a0feb20b8238e4c33aec79f
title: Flexcard Designer (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_flexcard_designer.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_flexcard_designer.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: b730ce6b85170ced51ccf1557f213bddf8981d41608a5665f1ecd409e59b60a9
description: For the managed package runtime, the Flexcard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy to build user interface (UI) Lightning web components without code. Build interfaces rich in information and with actions relevant to your customer's context. You can also create the look and feel of your Flexcard by styling individual elements from graphic user interfaces (GUIs) built into the designer.
products:
  - Omnistudio
release: "264"
---
# Flexcard Designer (Managed Package)

For the managed package runtime, the Flexcard Designer is a declarative tool with a drag interface and WYSIWYG editing that makes it easy to build user interface (UI) Lightning web components without code. Build interfaces rich in information and with actions relevant to your customer's context. You can also create the look and feel of your Flexcard by styling individual elements from graphic user interfaces (GUIs) built into the designer.

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

<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="d24603e46">
              <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="d24603e46 ">
              <p style="margin-bottom:0;">Available beginning with Vlocity Insurance and Health Summer '20.</p>
            </td>

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

![FlexCards overview diagram](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/flexcards_overview_diagram.png)

## Flexcard Designer Highlights

With the Flexcard Designer, you can:

- Build your Flexcard on a wide and adjustable Canvas.
- Drag customizable elements from the Build panel onto the Canvas.
- Adjust the width of any element along a 12-column horizontal grid.
- Use the Action element to launch an Omniscript or Flyout, and trigger Custom or Pubsub Events, and more.
- From the Style panel, customize the look and feel of your Flexcard. Style elements using a GUI to choose the colors of texts, borders, and backgrounds, change the size of fonts and entire elements, and make elements responsive.
- Create a new Flexcard and configure your data source with a step-through wizard.
- Use In-Product Help to learn about a property or an element without leaving the Designer.
- Configure Flexcard-wide settings from the Setup panel, such as required permissions, event listeners, session variables, and more.
- Configure metadata values for your generated LWC and update its component SVG icon with the **Publish Options** feature.
- Download on and off-platform Flexcard LWCs.
- Debug your Flexcard by viewing its data JSON and the response and request logs for its actions and events.
- Run Flexcards outside of Salesforce with OmniOut for Flexcards.

## What’s Next

Explore the Flexcard Designer. See [Get to Know the Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_get_to_know_the_flexcard_designer.htm&release=264.0.0&type=5 "For the managed package runtime, get to know how the different parts of the Flexcard Designer work to build rich interfaces relevant to your customer's context.").

- **[Get to Know the Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_get_to_know_the_flexcard_designer.htm&release=264.0.0&type=5)**  
    For the managed package runtime, get to know how the different parts of the Flexcard Designer work to build rich interfaces relevant to your customer's context.
- **[Build a Flexcard with the Flexcard Designer (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_build_a_flexcard_with_the_flexcard_designer.htm&release=264.0.0&type=5)**  
    For the managed package runtime, with the Flexcard Designer create, build, design, test, and activate a Flexcard before publishing it to a Lightning or Experience page. Use a drag interface with WYSIWYG editing to preview while you build dynamic context-specific user interfaces for customer interactions.