Configure the ServiceNow component instance

Configure the component instance so that your user can embed the components onto their website to access component-related data in real-time.

Before you begin

You must have the following setup to configure ServiceNow component instance:

• Enable Web Embeddables in your instance. For more information, see Activate Web Embeddables
• Set up a custom URL as the instance URL
• Authenticate the ServiceNow components using OpenID Connect (OIDC) or non OIDC authentication. For more information, see Authenticate the ServiceNow components using OIDC and Non OIDC authentication for ServiceNow components.

Role required: sn_embeddable_core.emb_admin

About this task

This procedure outlines the high-level steps that you must follow to set up Web Embeddables component instance.

Procedure

1. Navigate to All > Web Embeddables > Homepage.
2. In the Homepage, select Create module or use the existing module.
   For more information on how to create a new module, see Create a module.
3. On the module page, in the Components tab, create a group and add a component instance.
   For more information on how to create a group and then add a component instance, see Create a group and add a component instance.
4. Optional: Toggle the Show static preview option to see a visual representation of a component when a live preview isn’t available.
   Note:

   The Show static preview option isn’t available for Data visualization component.
5. Configure the component instance properties.
   The Preview tab displays real-time data according to choices set in the component properties.
6. Select the CORS rules tab to configure the CORS rules.
   For more information about configuring CORS rules, see Configure CORS (Cross-Origin Resource Sharing) rules before embedding ServiceNow components.
7. Select Component tab.
8. Select Get embed code.
   A pop-up window appears to display both Global code and Component code.
9. In the Global code tab, review the generated code and select the Copy global code.
   The global code must be added once to your third-party website.
10. In the Component code tab, review the generated code and select the Copy component code.
11. Optional: In the Component Code tab, slide the Enable event handler toggle switch to handle events triggered by the user interactions on the webpage.
    Note:

    Enabling the event handler also modifies the component code.

Result

The global and component codes are ready to be shared with the third-party admin to embed component instance on their third-party webpage.

What to do next

Embed ServiceNow components instance on the third-party website