Workspace / Components

IFrame

Used to define and configure customer features, applications, or components that are not built using the Now® Experience UI Framework so that agents and customers can use them within a workspace or portal.

Overview

  • Release version
    Yokohama
  • Available sinceQuebec
  • A11Y WCAG 2.1 AA

An iFrame is a container that allows you to embed external web content within your UI.

ServiceNow link
IFrame code documentation

UIB and developer guidance

Figma link
IFrame Figma component

Figma library with components for designing Workspace.

Loading playground

When to use

Use iFrames to embed content third-party features, applications, or components.

When not to use

Don't use iFrames for content you control or can integrate directly.

Anatomy

An iFrame is a container for externally sourced content.

  1. iFrame container: Container on a page that displays externally sourced content.

Usage

iFrame is used to display relevant web-based content.

Configurations

Learn how to customize iFrame by configuring the available properties.

Title

Name for your iframe content title. Default is “Wikipedia home page.”

Source

URL for your external content. The default is ”https://wikipedia.com.”

Sandbox

By default, scripts are allowed, but other restrictions exist. You can select to disable the sandbox, which removes the restrictions to forms, modals, popups, and such.

Data

If you want to send messages to the iframed document, use the “data” property to post the contents immediately.

Target origin

Use the target origin to securely specify the required origin of the recipient window for the “data” message.

Size

You can specify the dimensions of iFrame by configuring the height and width.

Width

The default iFrame width is 400 pixels, but you can change it to suit your needs. Width is in CSS units or number of pixels.

Height

The default iFrame height is 300 pixels, but you can change it to suit your needs. Height is in CSS units or number of pixels.