Why Omniscript Not Showing on Experience Cloud?

Question

I have added an Omniscript to an Experience Cloud page, but it is not rendering. The Omniscript contains a Lightning Web Component (LWC), and when I place it on the site, nothing appears on the page.

Here is my LWC code:
HTML

<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>

JavaScript

import { LightningElement } from 'lwc';

export default class BookingNavigation extends OmniscriptBaseMixin(LightningElement) {

    showbooking = false;

    openbooking() {
        this.showbooking = true;
    }

    get targetUrl() {
        return 'https://abcd28-dev-ed.my.site.com';
    }
}

XML (Meta Configuration)

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <runtimeNamespace>omnistudio</runtimeNamespace>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

What could be the reason that the Omniscript is not visible on the Experience Cloud page?

Answer

There are several reasons why your Omniscript is not rendering on the Experience Cloud page. Below are possible causes and their solutions:

1. Missing Import Statement for OmniscriptBaseMixin

One of the most common reasons for this issue is that the OmniscriptBaseMixin is not properly imported in your JavaScript file. This mixin is required for integrating the Omniscript framework into your LWC.

Your current JavaScript file does not include this import. You need to add the following line at the top of your JavaScript file:

import { OmniscriptBaseMixin } from 'omnistudio/omniscriptBaseMixin';

After adding this import, your JavaScript should look like this:

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from 'omnistudio/omniscriptBaseMixin';

export default class BookingNavigation extends OmniscriptBaseMixin(LightningElement) {

    showbooking = false;

    openbooking() {
        this.showbooking = true;
    }

    get targetUrl() {
        return 'https://abcd28-dev-ed.my.site.com';
    }
}

Without this import, the Omniscript features will not be available, and the script will fail to load.

2. Missing lightning__CommunityPage in XML File

Your XML meta-configuration file does not include Experience Cloud (Community) pages as a target. Since you are trying to place the Omniscript on an Experience Cloud page, you need to explicitly specify that it can be used there.

Modify your XML file to include:

<target>lightning__CommunityPage</target>

Your updated XML file should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>62.0</apiVersion>
    <isExposed>true</isExposed>
    <runtimeNamespace>omnistudio</runtimeNamespace>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__CommunityPage</target>
    </targets>
</LightningComponentBundle>

This XML file ensures that your OmniStudio-based LWC can be used in various Salesforce Lightning environments, including Experience Cloud. If the component is not showing, check that lightning__CommunityPage is included, and verify that your component is correctly implemented and deployed.

3. Permission Issues for Omniscript and Data Services

Even if the Omniscript is properly placed on the page, users might not have the necessary permissions to access it. In Experience Cloud, permissions are controlled through profiles and permission sets.

• For Guest Users: If the Omniscript is on a public page, ensure that the Guest User Profile has the required access to view the Omniscript and any associated DataRaptor or Integration Procedures.
• For Authenticated Users: If the Omniscript relies on authenticated data, ensure that the user’s profile or permission set includes access to Omniscripts, DataRaptors, and Integration Procedures.

To check permissions, navigate to:

1. Setup → Users → Profiles (or Permission Sets)
2. Find the relevant profile or permission set
3. Ensure they have access to the Omniscript component, DataRaptors, and Apex classes

If the user does not have access to the Omniscript’s data source, it may not load correctly on the page.

4. Cross-Origin Resource Sharing (CORS) Issues

If your Omniscript is fetching data from an external source or even from another Salesforce domain, the browser might block the request due to CORS restrictions.

To resolve this, go to:

1. Setup → CORS
2. Add the Experience Cloud site’s domain (e.g., https://abcd28-dev-ed.my.site.com)
3. Save the settings

This ensures that the Omniscript is allowed to make cross-origin requests without being blocked.

5. Cache Issues in Experience Cloud

Sometimes, the Omniscript might not appear due to aggressive caching in Experience Cloud. If you have recently updated the component, permissions, or configuration, try the following:

1. Clear the Cache
   Go to Experience Builder → Publish the site again
   In your browser, clear the cache or try loading the page in Incognito Mode
2. Disable Secure Static Resources
   Go to Setup → Security → Session Settings
   Uncheck Enable secure and persistent browser caching to improve performance

If your Omniscript is not visible on the Experience Cloud page, the most likely reason is a missing import statement for OmniscriptBaseMixin, incorrect XML targets, or permission issues. Ensure that you have:

1. Added the required import statement for OmniscriptBaseMixin.
2. Updated the XML file to include <target>lightning__CommunityPage</target>.
3. Granted the correct permissions for users to access Omniscripts and related services.
4. Configured CORS settings if external data is being accessed.
5. Cleared the cache in Experience Cloud to reflect recent updates.
6. After making these changes, your Omniscript should render properly on the Experience Cloud page.

Real-Time Project-Based Salesforce Training to Kick Start Your Career

Our Salesforce Course is meticulously designed to provide a deep understanding of the Salesforce platform, equipping you with the essential skills to excel in the CRM industry. The program includes vital modules such as Salesforce Admin, Developer, and AI, combining theoretical insights with hands-on training. Through practical assignments and real-world projects, you’ll gain the expertise to solve complex business challenges using Salesforce solutions. Our experienced instructors ensure you acquire both technical proficiency and industry-specific knowledge to succeed in the Salesforce ecosystem.

In addition to technical training, our Salesforce Training in Australia offers dedicated mentorship, certification guidance, and interview preparation to enhance your career prospects. You’ll have access to detailed study materials, live project experience, and continuous support throughout your learning journey. By the end of the program, you’ll be well-prepared for certification exams and possess the practical problem-solving skills that employers seek. Take the first step in your Salesforce career today and unlock limitless opportunities. Enroll for a Free Demo now!