---
sourceDocument: Australia Customer Service Management
sourceDocumentLink: https://www.servicenow.com/docs/r/customer-service-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Configure the Data visualization component instance

# Configure the Data visualization component instance {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes to read

Configure the Data visualization component instance so that your users can embed it on their website to display information in the form of single score, pie chart, donut chart, or semi-donut chart directly from any ServiceNow table.

## Before you begin

You must have the following setup to configure the Data visualization component instance:

* Enable Web Embeddables in your instance. For more information, see [Activate Web Embeddables](https://www.servicenow.com/docs/SncFxfwSEtIvlpyyqmxz2Q "You can enable the ServiceNow Components for Customer Service (sn_cx_components), Web components for Guest Embeddables (sn_guest_component), and Web Embeddable Core (sn_embeddable_core) to enable Web Embeddables on your instance. The application establishes related plugins if they aren’t already installed.").
* [Set up a custom URL as the instance URL](https://www.servicenow.com/docs/AUV_G7eDelxzB0TOTC77XQ "Add a custom URL to your instance configuration to use instead of your ServiceNow URL. This custom URL ensures that embedded components remain accessible in your browser, even when third-party cookies are turned off.").
* Authenticate the ServiceNow components using OpenID Connect (OIDC) or non OIDC authentication. For more information, see [Authenticate the ServiceNow components using OIDC](https://www.servicenow.com/docs/2qubcZxyeA~7lMiUblY_1A "Set up auto-login and log out using OpenID Connect (OIDC) authentication to enable single and simultaneous login and logout in your website and embedded components.") and [Non OIDC authentication for ServiceNow components](https://www.servicenow.com/docs/NSuUm~8N16GNvUb_7cANqA "Generate a JSON Web Token (JWT) token to authenticate your ServiceNow components if your website doesn’t use OpenID Connect (OIDC) authentication.").
{#config-data-viz-comp__ul_brf_cqf_ccc}

Role required: sn_embeddable_core.emb_admin

## Procedure

1. Navigate to AllWeb EmbeddablesHomepage.
2. In the homepage, select Create module or use the existing module.  
   For more information on creating a new module, see [Create a module](https://www.servicenow.com/docs/cUVM5bfe0riPnY~5QKYQVg "Create a module to manage component instances used in a website. You can either create a module or use a prebuilt module and edit it according to requirement.").
3. On the module page, in the Components tab, add a Data visualization component instance to an existing or a new group.  
   For more information on creating a group and then adding a component instance, see [Create a group and add a component instance](https://www.servicenow.com/docs/0FL_ZYd~25yNfBreXHKjVQ "Create a group to model third-party website structure such as page or sections. Use the default group or create new groups to manage the component instances on that page or section.").
4. Configure the Data visualization component instance properties.  
   * The Preview tab displays real-time data according to choices set in the component properties.
   * For a description of the component properties related to the Data visualization component instance, see [Component properties for the Data visualization](https://www.servicenow.com/docs/6Ru52DDDDIcJNAMo7taaAA "Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website.").
   {#config-data-viz-comp__ul_jlw_yjw_cfc}
5. 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](https://www.servicenow.com/docs/mgugMWeiw1SNjGgjJDaCOQ "Configure a CORS rule to enable cross-domain requests between ServiceNow components and the website that you want to embed the web components.").
6. Select the Components tab.  
   If a message appears about the application scope, change the scope to Web Components for Customer Service to be able to edit the record.
7. Select Get embed code.  
   A pop-up window appears to display both Global code and Component code.
8. In the Global code tab, review the generated code and select the Copy global code.  
   The global code must only be added once to your third-party webpage.

       import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';

       await init({
           theme: 'fad87d2ca304121029a4d1aed31e610f',  /* sys_id of the theme to use for the embeddable components in your website */
           baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */
           authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */
           module: '591800ffc1243610f87714367ed47c6a', /* Demo module */
           pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */
           guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */
           cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */
       });

       function getTokenCallBack() {
           var idToken; /* Get the id token for the current user */
           return Promise.resolve(idToken);
       }

       function getGuestJWTTokenCallBack() {
           var guestToken; /* Get the guest token for the current user */
           return Promise.resolve(guestToken);
       }

       /* Uncomment below function to handle guest session */
       // await startGuestSession();

       /* Uncomment below functions to handle login and logout once the user logs into your website */
       // await login();
       // await logout();

9. **Optional:** In the Component Code tab, slide the Enable event handler toggle switch to handle events triggered by the user interactions on the website.  
   Note:  
   Enabling the event handler also modifies the component code. For more information on event handlers in Web Embeddables, see [Event handler in the Data visualization component](https://www.servicenow.com/docs/2O1e4GchkeFf0EJOdnUyhg "A component triggers an event when a certain condition is met or on user interaction. The event can be used to execute an action through a code on a third-party webpage.").
10. In the Component code tab, review the generated code and select the Copy component code.  
    The generated component code also includes configurations for event handlers and a donut chart.

        <!--  
            Module: Demo module
            Group: Group 1
            Instance: Data visualization 1
        -->
        <sn-embedx-visualization-donut
        	sort-by="value"
        	data-labels-type="value"
        	data-sources='[{"allowRealTime":true,"dataCategories":["trend","group","simple"],"filterQuery":"active=true^sys_updated_onONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()","id":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","isDatabaseView":false,"label":"Case","preferredVisualizations":["d24d53f60350de7a652caf3188a46ed2"],"reportSourceSysId":null,"sourceType":"table","tableOrViewName":"sn_customerservice_case"}]'
        	metrics='[{"aggregateFunction":"COUNT","axisId":"primary","dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","id":"ZEdGaWJHVnpibDlqZFhOMGIyMWxjbk5sY25acFkyVmZZMkZ6WlRFM01qVTBNall4T0Rjek9EYz0xNzI1NDI2MTg4NjYx","numberFormat":{"customFormat":false}}]'
        	group-by='[{"disableRanges":false,"groupBy":[{"dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","groupByField":"state","isChoice":true,"isPaBucket":false,"isRange":false}],"hideZeroValues":true,"maxNumberOfGroups":"ALL","numberOfGroupsBasedOn":"NO_OF_GROUP_BASED_ON_PER_METRIC","showOthers":false}]'
        	additional-group-by-config='[{"id":"state","label":"State"},{"id":"account","label":"Account"}]'
        	truncation-type="end"
        	show-register
        	register-position="bottom"
        	register-orientation="horizontal"
        	legend-horizontal-alignment="center"
        	ranges-config='null'
        	color-config='null'
        	show-header
        	header-color='null'
        	title-color='null'
        	sort-by-order="desc"
        	empty-state-illustration="no-data"
        	empty-state-heading="No data available."
        	empty-state-heading-level="3"
        	empty-state-content="There are no scores available for the selected criteria. Contact your admin for more info."
        	empty-state-alignment="vertical-centered"
        	number-of-periods="3"
        	period="M"
        	user-info='"@context.session.user"'
        	shared-context='null'
        	colors='{}'>
        </sn-embedx-visualization-donut>
        <!--
        	The component also includes the following additional properties:
        	show-border
        	drilldown-label
        	show-data-labels
        	max-label-size
        	show-register-on-same-line
        	show-register-value
        	legend-max-item-width
        	legend-expand-to-fit
        	show-register-percentage
        	wrap-title
        	show-header-separator
        	header-title
        	description
        	refresh-request
        	show-additional-group-by-selector
        	show-metric-label
        	show-total-value
        	enable-click-and-stay
        	show-data-table
        	enable-custom-empty-state
        	apply-date-range
        	show-absolute-period
        	score-type
        	start-time
        	end-time
        	use-current-date-for-end
        	show-extended-error-messages
        	auto-aggregate-periods
        -->

        <script type="module">
        	import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
        	
        	const snEmbedxVisualizationDonut = document.querySelector('sn-embedx-visualization-donut');

        	getEmbeddables(["sn-embedx-visualization-donut"]);

        	const eventHandlers = {
        		'NOW_VIS_WRAPPER#PROPERTY_OVERRIDE' : (e) => {
        			// Dispatched when the visualization overrides its property. For example when the user selects a different group by from the alternative group by selection
        			var {properties} = e.detail.payload;
        			console.log(properties);
        		},
        		'NOW_VIS_WRAPPER#SELECTED' : (e) => {
        			// Dispatched when the user selects/de-selects element on data visualizations, typically to filter other content on the page
        			var {title, type, isSelected, params, data} = e.detail.payload;
        			console.log(title, type, isSelected, params, data);
        		},
        		'NOW_VIS_WRAPPER#CLICKED' : (e) => {
        			// Dispatched when the visualization is clicked
        			var {title, type, params, data} = e.detail.payload;
        			console.log(title, type, params, data);
        		}
        	};

        	setEvents(snEmbedxVisualizationDonut, eventHandlers);
        </script>

## Result

The global and component codes are ready to be shared with the third-party administrator to embed the Data visualization component instance on their third-party website.

## What to do next

[Embed the Data visualization component instance on the third-party website](https://www.servicenow.com/docs/NfPJ90g9ryDggHYeM4do6A "Embed the global code and component code of the Data visualization component instance that you configured so that you can enable your customers to start using the Data visualization component instance on your third-party website.")
**Related reference**   

* [Component properties for the Data visualization](https://www.servicenow.com/docs/6Ru52DDDDIcJNAMo7taaAA "Component properties enable you to configure the behavior of the Data visualization component instance on the third-party website.")
* [Event handler in the Data visualization component](https://www.servicenow.com/docs/2O1e4GchkeFf0EJOdnUyhg "A component triggers an event when a certain condition is met or on user interaction. The event can be used to execute an action through a code on a third-party webpage.")
* [Sample code for the Data visualization component](https://www.servicenow.com/docs/XkvBqNBbfmEm0I_WAenKiw "Sample code is provided to define an action when an event is triggered. Update the sample code for your use case before embedding the component on your webpage.")

*[\>]: and then