---
schema_version: "1"
id: 99407bb957ad189ac98be12f2cead5fceb5f9b2bdc7c273e3060bf97b4f7f100
title: Apply Global Branding to Omniscripts (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_apply_global_branding_to_omniscripts.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_apply_global_branding_to_omniscripts.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: a24c45e2328cdbfd659e0009e17d4d0b08ab5ae6043a1e33625a4b2d74aa4341
description: For the managed package runtime, apply global style changes to Omniscripts by using the Newport Design System, which you can download and use to edit and override existing Newport CSS styling.
products:
  - Omnistudio
release: "264"
---
# Apply Global Branding to Omniscripts (Managed Package)

For the managed package runtime, apply global style changes to Omniscripts by using the Newport Design System, which you can download and use to edit and override existing Newport CSS styling.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d302442e46">
              <p style="margin-bottom:0;">Required Versions</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Required Versions" class="slds-cell-wrap" style="vertical-align:top;" headers="d302442e46 ">
              <p style="margin-bottom:0;">Available beginning with Vlocity Insurance and Health Summer '19 and CME
                Fall '19.</p>
            </td>

          </tr>
        </tbody>
      </table>

Before You Begin

If you are unfamiliar with using command-line interfaces, see [Command Line 101](https://www.git-tower.com/learn/git/ebook/en/command-line/appendix/command-line-101) (git-tower documentation).

System Requirements:

- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) (git-scm documentation)
- [nodeJS v12.0 or higher](https://nodejs.org/en/download/package-manager/) (Node documentation)
- Gulp CLI: `npm install --global gulp-cli`

1. Download Node.js. Ensure that Node.js is installed on your local computer according to the npm documentation at [https://www.npmjs.com/get-npm](https://www.npmjs.com/get-npm). If you don’t have Node.js download it from [https://nodejs.org/en/download/](https://nodejs.org/en/download/).
2. Download the package **npm-install** from: the docs.npmjs.com site.
3. Clone the Newport Design System (vlocityinc/newport-design-system) from [https://github.com/vlocityinc/newport-design-system](https://github.com/vlocityinc/newport-design-system) using a command-line interface. To see which components are provided by Newport, look at the `UI/components` directory.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)
    
    Note
    
    If you cannot use a file from GitHub, download the Newport Design System [here](https://volt.my.salesforce.com/sfc/p/o0000000IKm8/a/3m000000nYPd/QKUI5z3WBm6uS66cGLqil6FZsBlfIbysDqSDMbx6yHA). Newport Design System branches are common to all packages.
4. From the [GitHub](https://github.com/vlocityinc/newport-design-system) page, perform the latest steps to install the correct dependencies.
5. After installation is complete, launch the Storybook.js preview by issuing the command `npm start`.
6. Review the documentation in the Storybook preview.
7. Add customizations to your theme. See [Customize Omniscripts and Flexcards with the Newport Design System (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_customize_omniscripts_and_flexcards_with_the_newport_design_system.htm&release=264.0.0&type=5 "For the managed package runtime, to customize the appearance of your Omniscripts or Flexcards, edit the CSS and HTML files in the UI subdirectory of the directory where you cloned Newport.").
8. Apply the Omniscript to individual Omniscripts or override the Newport theme for the entire org. See [Deploy and Apply Global Styling Changes using the Newport Design System (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_deploy_and_apply_global_styling_changes_using_the_newport_design_system.htm&release=264.0.0&type=5 "For the managed package runtime, apply modifications to the Newport design system by adding a Static Resource that overrides the Newport theme wherever it is available. Once uploaded, the Newport changes are applied to any Omniscripts using Newport.").
9. Preview the changes in your Salesforce org by using the Newport Player in the Omniscript Designer Preview.