Reference Stylesheet Names in an Omniscript's JSON (Managed Package)

For the managed package runtime, apply CSS changes to an Omniscript using SLDS or Newport styling by referencing a CSS file static resource in your Omniscript's JSON properties. For example, a CSS sheet can change the text color for every Number element in an Omniscript without using custom Lightning web components to override the Number element.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Required Versions
Available beginning with Vlocity Insurance and Health Spring '20 and CME Fall '20.

Before You Begin

Choose SLDS or Newport as the Omniscript theme.
View the Omniscript's original CSS by inspecting the element's on the page in console tools or by downloading the CSS files for LWCs in the Omniscript. Download.
Create a CSS style sheet with custom CSS.
In Salesforce, add the CSS file as a static resource. See Using Static Resources (Salesforce Documentation).

Note

Beginning with Vlocity Insurance and Health Summer '20, Multi-Language Omniscripts provide beta support for right-to-left languages.

In Omniscript, go to Setup or Script Configuration and click Edit as JSON.
In the JSON properties, find the node named style sheet:
```
"stylesheet": {
  "newport": "",
  "lightning": ""
}
```

Add the name of the static resource as a value to newport or lightning.

"stylesheet": {
  "newport": "",
  "lightning": "myCustomOmniScriptStyles"
}

(Optional) Available beginning with Vlocity Insurance and Health Summer '20. Add the name of the static resource as a value to newportRtl or lightningRtl to display the styling for right-to-left languages. If you are updating an existing Omniscript, add newportRTL and lightningRtl manually.
```
"stylesheet": {
  "newport": "",
  "lightning": "",
  "newportRtl": "myRtlNewportStyles",
  "lightningRtl": ""
}
```
Activate and preview the Omniscript to view your custom styling.