Salesforce’s Omnistudio and Lightning Web Components (LWC) are powerful tools designed to improve user experience and optimize business workflows. Integrating custom LWCs into Omniscripts is an effective way to enhance functionality and build dynamic user interfaces. In this blog, we’ll guide you through the process of calling an LWC from an Omniscript and seamlessly handling user input.

Use Case:
In this example, we’ll focus on a custom Account Information scenario. Users will enter their name, and the LWC will process the input, sending the data back to Omniscript to display a personalized message.”

Steps 1

Create the LWC
Below is the HTML template for the LWC:

<template>
<lightning-layout horizontal-align="spread" multiple-rows>
<lightning-layout-item padding="around-small" size="6">
<lightning-input type="text" label="Full Name"></lightning-input>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="6">
<lightning-button
variant="brand"
label="Print"
title="Primary action"
onclick={handleClick}
class="slds-m-left_x-small">
</lightning-button>
</lightning-layout-item>
</lightning-layout>
</template>

The LWC will collect user input and interact with Omniscript through the omniApplyCallResp method. Below is the JavaScript code for the custom LWC

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from 'omnistudio/omniscriptBaseMixin';
export default class LWCFromOmniscript extends OmniscriptBaseMixin(LightningElement) {
handleClick() {
const data = {
customer: {
fullname: this.template.querySelector('lightning-input').value,
},
};
// Sends data to Omniscript
this.omniApplyCallResp(data);
}
}

OmniscriptBaseMixin: Provides essential methods for integrating with Omniscript.
omniApplyCallResp: Facilitates data exchange between the LWC and Omniscript.

Define XML Metadata

To make your LWC accessible across Salesforce environments, configure the metadata file using the following steps:

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>61.0</apiVersion>
<isExposed>true</isExposed>
<runtimeNamespace>omnistudio</runtimeNamespace>
<targets>
<target>lightning_AppPage</target>
<target>lightning_HomePage</target>
<target>lightning_RecordPage</target>
<target>lightningCommunity_Default</target>
<target>lightningCommunity_Page</target>
<target>lightningCommunity_Page_Layout</target>
</targets>
</LightningComponentBundle>

This configuration ensures that your LWC is available across App Pages, Record Pages, and Community Pages, making it easily accessible within various Salesforce environments.