Embed Flexcard in Custom LWC

After you create and activate a Flexcard, you can use the `lightning-omnistudio-flexcard` component to display your Flexcard in your custom LWC component.

The `lightning-omnistudio-flexcard` component is a wrapper for the Flexcard component that's available for use in Lightning App Builder and Experience Builder Aura sites.

To use a Flexcard in your custom component, pass in the Flexcard's unique name.

<lightning-omnistudio-flexcard
  flexcard-name="somecard"
></lightning-omnistudio-flexcard>

This example shows how to display account information based on a specific record ID.

<lightning-omnistudio-flexcard
  flexcard-name="AccountSummaryCard"
  record-id="{accountRecordId}"
  object-api-name="Account"
>
</lightning-omnistudio-flexcard>

LWR Compatibility

To use a Flexcard on a Lightning Web Runtime (LWR) site for Experience Cloud, include the `lwr` attribute like this:

<lightning-omnistudio-flexcard flexcard-name="somecard" lwr></lightning-omnistudio-flexcard>

This example shows how to use an LWR-compatible flexcard with record data:

<lightning-omnistudio-flexcard
     flexcard-name="ContactCard"
     lwr
     record-id={contactRecordId}
     object-api-name="Contact">
 </lightning-omnistudio-flexcard>

This example shows how to add data to the records parameter.

//Js
export const SAMPLE_DATA = [
  {
    _id: "6862285777cfe51e4826909e",
    isActive: true,
    balance: "$3,249.31",
    age: 36,
    name: "Williamson Hyde",
    email: "williamsonhyde@dancity.com",
  },
  {
    _id: "68622857aa535d207b9e5a41",
    isActive: false,
    balance: "$1,291.33",
    age: 27,
    name: "Lakeisha Holland",
    email: "lakeishaholland@typhonica.com",
  },
  {
    _id: "68622857eb29c6a3762725b8",
    isActive: true,
    balance: "$1,558.63",
    age: 22,
    name: "Patel Green",
    email: "patelgreen@endipine.com",
  },
];

import { SAMPLE_DATA } from "./data.js";

export default class TestComponent extends LightningElement {
  constructor() {
    this.sampleData = SAMPLE_DATA;
  }
}

Pass the data to the `records` attribute in your component.

//html
<template>
  <lightning-omnistudio-flexcard
    flexcard-name="testComponent"
    parent-data
    records="{sampleData}"
  ></lightning-omnistudio-flexcard>
</template>

Usage Considerations

When you add a Flexcard name that doesn't match any of your active Flexcards, an error is shown only when you preview the custom LWC project at runtime. In this case, you don’t see an error during deployment. Before you deploy your component to an org, verify the name of the Flexcard and that the Flexcard is active.