Why is my OmniScript not visible on the Experience Cloud page?

Question:

I added a Lightning Web Component (LWC) to an OmniScript and placed the OmniScript on an Experience Cloud page. However, when I preview the page, the OmniScript does not appear. What could be causing this issue, and how can it be resolved?

Answer:

The most likely reason for this issue is a missing import statement in your Lightning Web Component’s JavaScript file. OmniScripts require the omniscriptBaseMixin to function properly in such scenarios. Without this mixin, the OmniScript may not render as expected.

CRS Info Solutions provides top Salesforce Course for Beginners with real-time projects, certification guidance, interview coaching, and a practical, job-ready approach.

To fix the issue, add the following import statement to the top of your LWC JavaScript file:

import { OmniscriptBaseMixin } from 'omnistudio/omniscriptBaseMixin';

is an ES6 JavaScript import statement used in Lightning Web Components (LWC) to include and use the OmniscriptBaseMixin class provided by Salesforce’s OmniStudio framework.
Here is a detailed breakdown of the code:

import Keyword:

The import keyword allows you to bring external functionality or definitions into your JavaScript module. In this case, it imports a mixin class named OmniscriptBaseMixin.

{ OmniscriptBaseMixin }:

The curly braces indicate a named export. This means OmniscriptBaseMixin is explicitly exported by the module located at the specified path, and it is being imported as-is.

from 'omnistudio/omniscriptBaseMixin';:
This specifies the module path where the OmniscriptBaseMixin is defined.

The omnistudio namespace corresponds to the OmniStudio framework provided by Salesforce.

The omniscriptBaseMixin file within this namespace contains the OmniscriptBaseMixin class.

What is OmniscriptBaseMixin?

The OmniscriptBaseMixin is a mixin provided by Salesforce OmniStudio. A mixin is a design pattern in JavaScript that allows you to extend the functionality of a class by combining it with additional features from another class. This mixin provides all the necessary functionality and lifecycle methods to enable the Lightning Web Component (LWC) to interact with OmniScripts seamlessly.

When you apply this mixin to your LWC class, it extends the behavior of your component by:

1. Enabling it to communicate with and control the OmniScript runtime.
2. Providing pre-built methods for interacting with OmniScript data.
3. Handling OmniScript-specific configurations or lifecycles.

Example Usage:

When you apply the OmniscriptBaseMixin to your component class like this:

export default class MyComponent extends OmniscriptBaseMixin(LightningElement) {
    // Component logic here
}

It combines the OmniscriptBaseMixin behavior with the base LightningElement class (the core class for LWCs). Your component now inherits functionality from both.

Why is it necessary?

OmniScripts have specific runtime requirements and lifecycle hooks to work correctly. Without including OmniscriptBaseMixin, your Lightning Web Component will not integrate with the OmniScript engine, leading to issues such as:

1. The OmniScript not rendering on the page.
2. Missing or malfunctioning data-binding and event-handling capabilities.

By including this mixin, you ensure your component can properly interact with the OmniScript, making it an essential addition for OmniStudio-enabled LWCs.

Kick start your salesforce training with us, enroll here: Salesforce training in India

Here’s an example implementation:

<template>
    <lightning-card title="Book your appointment">
        <lightning-button 
            variant="base" 
            label="Click to book appointment" 
            onclick={openbooking}>
        </lightning-button>
        <template if:true={showbooking}>
            <iframe 
                width="300px" 
                height="400px" 
                src={targetUrl}>
            </iframe>
        </template>
    </lightning-card>
</template>

Code Explanation

This HTML template represents a simple Lightning Web Component (LWC) user interface. Here’s a breakdown of each part of the code:

1. <template>: This is the root tag of an LWC template, which contains all the HTML cod
2. <lightning-card>: A base Lightning component used to create a styled card layout. It includes a title attribute set to “Book your appointment,” which appears as the card’s heading.

        <lightning-button 
            variant="base" 
            label="Click to book appointment" 
            onclick={openbooking}>
        </lightning-button>

<lightning-button>: A base Lightning button component.

1. variant="base": Specifies the button’s style variant. The “base” variant is a simple button without additional styling.
2. label="Click to book appointment": Sets the button’s label text.
3. onclick={openbooking}: Associates the button’s click event with the openbooking function in the JavaScript file of the LWC. When clicked, this function is executed.

        <template if:true={showbooking}>
            <iframe 
                width="300px" 
                height="400px" 
                src={targetUrl}>
            </iframe>
        </template>

1. <template if:true={showbooking}>: A conditional rendering directive. The content inside this tag is displayed only if the showbooking property in the JavaScript file evaluates to true.
2. <iframe>: Embeds another webpage or resource within this component.
i- width="300px" and height="400px": Define the iframe’s size.
ii- src={targetUrl}: Dynamically sets the iframe’s source URL using the targetUrl getter from the JavaScript file.

    </lightning-card>
</template>

Closing Tags: End the <lightning-card> and <template> elements to complete the structure.

How It Works:

1. The component displays a card with a button labeled “Click to book appointment.”
2. When the button is clicked, the openbooking method in the associated JavaScript file is invoked. This method sets the showbooking property to true.
3. If showbooking becomes true, the conditional template renders the <iframe> element, displaying the embedded webpage or resource from the URL provided by targetUrl.

<template>
    <lightning-card title="Book your appointment">

Summing Up

To resolve the issue of an OmniScript not appearing on an Experience Cloud page, it is essential to ensure that all required dependencies, such as the omniscriptBaseMixin, are properly included in your Lightning Web Component (LWC). This mixin establishes critical functionality that allows the OmniScript to integrate and render correctly within the Experience Cloud framework. Without it, the OmniScript may fail to load, leaving the page incomplete. By adding the omniscriptBaseMixin import in the LWC JavaScript file and ensuring the component is deployed correctly, you can restore functionality.

In addition to verifying the mixin, check that the OmniScript is activated, deployed, and has appropriate permissions configured for the Experience Cloud site. The site’s guest and authenticated users must have access to the OmniScript and related metadata. Reviewing the LWC’s structure and ensuring proper conditional rendering, such as using state variables like showbooking, can also prevent unintended issues. These steps collectively address the root causes of the problem, ensuring a seamless user experience.

Empower Your Career with Salesforce Training in India

Elevate your professional journey with CRS Info Solutions’ top-rated Salesforce training, crafted to provide the skills and expertise required to excel in the ever-evolving Salesforce ecosystem. Our industry-focused courses span Salesforce Admin, Developer, and AI modules, blending in-depth theoretical knowledge with hands-on experience through practical, real-world projects. Whether you’re new to Salesforce or a seasoned professional, our well-structured program ensures you master the tools and techniques needed to stand out.

With a strong emphasis on practical application, Salesforce training in India we offer personalized mentorship, detailed study resources, and expert-led certification preparation to fully equip you for success in interviews and beyond. Gain the confidence and skills to thrive in your Salesforce career.

Don’t wait—join our free demo class today and take the first step toward a rewarding future! Enroll now for a free demo!!!

Related Posts :

Guide to Salesforce Vlocity(Industries) and Omni Studio
Salesforce OmniStudio Developer Interview Questions