Web embeddables - Step-by-Step Guide to Embedding ServiceNow Components

[Preethi Bakthav]

Embedding ServiceNow components into your website involves a structured process to ensure functionality and security. Begin by configuring the component instance within your ServiceNow module. Select the desired component, such as Case Create or Case List, and adjust its properties to match your requirements. Use the preview feature to validate real-time data rendering.

Next, generate the embed code, which includes Global Code and Component Code. The global code initializes the environment for all components and should be added once per site. Component code is specific to each component and defines its unique behavior. Paste both codes into your website’s HTML.

Authentication is critical. ServiceNow supports OpenID Connect (OIDC) for single sign-on, enabling users to log in seamlessly across platforms. Alternatively, JWT tokens can be used for token-based authentication. Configuring CORS rules prevents unauthorized cross-domain requests and maintains secure communication.

Event handling adds interactivity. Components can trigger events based on user actions, such as button clicks or record creation. Developers can use these events to execute custom logic, like redirecting users to detailed views or displaying notifications.

Real-world use case: A retail company embedding Catalog Item on its website can allow customers to request services directly. When a request is submitted, an event handler can redirect users to a confirmation page or display related offers.

By following these steps, you deliver a unified experience where users interact with ServiceNow functionalities directly from your website.