---
sourceDocument: Brazil ServiceNow AI Platform user interface
sourceDocumentLink: https://www.servicenow.com/docs/r/platform-user-interface

 Release :

    - brazil

ft:locale :

    - en-US

ft:publication_title :

    - Brazil ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Create a Service Portal widget with embeddables

# Create a Service Portal widget with embeddables {#ariaid-title1}

Release version: Brazil  
Updated September 25, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read  
Create a Service Portal widget that displays an embeddable component. Add the component to the widget HTML and then call the embeddable APIs in a widget client script.

## Before you begin

Role required: admin

## Procedure

1. In the widget HTML template file, add the embeddable component using its tag name.  

       <case-list data-test-id="case-list" data-filter-config="$ctrl.filters"></case-list>

2. Replace `case-list` with the tag name of your embeddable component.
3. In your widget client controller, inject the `spEmbeddables` service.  
   For example:

       app.controller('caseListWidget', function($scope, spEmbeddables) {
         // Widget logic here
       });

4. Call the `getEmbeddables()` method to retrieve the component data by tag name.  
   For example:

       app.controller('caseListWidget', function($scope, spEmbeddables) {
         spEmbeddables.getEmbeddables(['case-list']).then(function(components) {
           $scope.caseList = components['case-list'];
         });
       });

5. **Optional:** Register event handlers.  
   For example:

       $scope.setupEvents = function() {
         var caseListElement = document.querySelector('case-list');
         spEmbeddables.setEvents(caseListElement, {
           onSelect: $scope.onCaseSelect,
           onUpdate: $scope.onCaseUpdate
         });
       };

       $scope.onCaseSelect = function(caseId) {
         spUtil.addInfoMessage('Case ' + caseId + ' selected');
       };

6. **Optional:** Use the `setProperties()` method to dynamically change component properties.  
   For example:

       $scope.updateFilter = function(newFilter) {
         var caseListElement = document.querySelector('case-list');
         spEmbeddables.setProperties(caseListElement, {
           filterConfig: newFilter
         });
       };

7. Add the widget to a Service Portal page.  
   For more information, see [Create and edit a page using the Service Portal Designer](https://www.servicenow.com/docs/3Q1~efo_1EM7WoKE8B61cA#t_ConfigureAPage "Create or edit a page and use layouts to organize the columns that house the widgets.").
8. Load the portal page in a browser and verify that the embeddable component displays and functions as expected.

## Result

Your Service Portal widget displays and interacts with the embeddable component.