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

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

   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.