--- sourceDocument: Australia Sales Customer Relationship Management sourceDocumentLink: https://www.servicenow.com/docs/r/australia/order-management Release : - australia ft:locale : - en-US ft:publication_title : - Australia Sales Customer Relationship Management ft:clusterId : - omgmt bundleId : - omgmt workflow : - Customer and Industry --- # Integrating ServiceNow CPQ with visualization tools # Integrating ServiceNow CPQ with visualization tools {#ariaid-title1} Release version: Australia Updated March 12, 2026 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete. ## Summary of Integrating ServiceNow CPQ with visualization tools ServiceNow CPQ integrates with third-party visualization tools---CDS, kBridge, and Threekit---to provide dynamic 2D and 3D product visualizations that update in real time based on user configuration inputs. This integration enhances the user experience by allowing live visual updates as users modify colors, dimensions, options, and bundles during configuration. Show full answer Show less ## Key Features * **Real-time Visual Updates:** Visuals react instantly to changes in configuration fields, sets, and product pickers. * **UI and Visual State Coordination:** ServiceNow CPQ publishes field values, selected rows, and products to the visualization renderer to keep interfaces synchronized. * **Two-way Communication:** Supported by CDS and kBridge, allowing user actions in the visualization canvas to write back and update CPQ fields. * **Vendor Support and Capabilities:** * **CDS:** Supports both one-way and two-way communication, with flexible mapping for CAD, 2D, and 3D visuals. * **kBridge:** Supports real-time 3D visuals with rich event and listener support, including two-way data sync. * **Threekit:** Supports high-fidelity 3D visuals with one-way updates and asset management but no write-back capability. * **Data Limits:** Up to 25 rows or options are transmitted for sets and product pickers to optimize performance. * **Security and Environment Management:** Proper token use, Content Security Policy adjustments, and environment-specific configurations ensure secure and compliant integrations. ## How the Integration Works The blueprint layout component defines the visualization panel's placement and size. Connection settings configure authorization, URLs, and tokens for communication. Mappings specify which CPQ data---fields, sets, product pickers, and active set indices---are sent to the visualization tool. A listener field in ServiceNow CPQ captures JSON data from the viewer for two-way integrations. This JSON is parsed by rules or enrichment to update CPQ fields or set rows accordingly. ## Choosing the Right Visualization Tool * **For bidirectional editing:** CDS or kBridge are recommended due to their two-way communication capabilities. * **For high-fidelity 3D visuals with asset management:** Threekit is suitable but only supports one-way data flow. * **For complex set-driven user experiences:** CDS or kBridge provide advanced JSON handling and synchronization with active set indices. ## Best Practices * Map only essential fields and data to maintain performance. * Design user interfaces to handle the 25-item cap on sets and product pickers, using validation or paging as needed. * Establish stable JSON schemas and centralized parsing logic for two-way integration listener payloads. * Externalize environment-specific tokens and URLs to enable safe promotion across environments. * Use ServiceNow CPQ admin logs, CSP settings, network checks, and debugging tools to troubleshoot issues systematically. ## Security and Environment Considerations Ensure that vendor authentication tokens and URLs correspond to the correct environment (production vs non-production). Configure Content Security Policy to allow vendor domains for embedding and messaging. Coordinate with security teams and ServiceNow CPQ support to manage domain whitelisting. Avoid embedding credentials directly in shared layouts and swap tokens appropriately during environment promotions. Learn how ServiceNow CPQ connects to third-party visualization engines---CDS, kBridge, and Threekit---to render 2D/3D product views that respond to configuration inputs in real time. You can perform the following: * Show live visuals as users configure: colors, dimensions, options, and bundles can update the viewer instantly. * Coordinate UI + visual states: publish field values, set rows, and selected products to the renderer. * (Optional) Write back from the viewer: for supported vendors, user actions in the canvas can update fields. {#logik-io-integration-wtih-visualization-tools__ul_g22_3yz_ghc} ## Supported vendors at a glance {#logik-io-integration-wtih-visualization-tools__section_ssm_kyz_ghc} {#logik-io-integration-wtih-visualization-tools__table_grp_myz_ghc__entry__5} | Vendor | Direction | What you can send | What can be written back | Notes | |-|-|-|-|-| | CDS | 1-way and 2-way | Fields, Sets (first 25 rows), product pickers (first 25 options), Active Set Index | Fields; Sets via listener field JSON + rule parsing | Good for CAD/2D/3D; flexible mapping objects | | kBridge | 1-way and 2-way | Fields, Sets (first 25 rows), product pickers (first 25 options), Active Set Index | Fields; Sets via listener field JSON + rule parsing | Real-time 3D with rich event \& listener model | | Threekit | 1-way | Fields, Asset Id (static or via field), Active Set Index (visual focus only) | Not supported (viewer → ServiceNow CPQ) | Use for high-fidelity visuals; map fields and asset selection | [Table 1. List of vendors] {#logik-io-integration-wtih-visualization-tools__table_grp_myz_ghc} Note: When sending sets or product pickers, ServiceNow CPQ publishes up to 25 rows/options. Indices and options beyond 25 are not transmitted. When using set repeaters, you can publish an Active Set Index trigger so the viewer shows the row the user is editing. ## How the integration works {#logik-io-integration-wtih-visualization-tools__section_cxs_zg1_hhc} 1. The layout component in the blueprint defines the visualization panel's position and size. 2. Connection settings authorize and route traffic (for example, the script or app URL, the auth token, and the subdomain). 3. The mapping block selects what ServiceNow CPQ data to send: * `eventFields` --- field variable names and their viewer keys * `eventSets` --- set variable names (first 25 rows published as an array of objects) * `eventProductPickers` --- selected options (first 25) as an array of objects * `setActiveTriggers` --- Boolean fields that indicate the active index in a set repeater {#logik-io-integration-wtih-visualization-tools__ul_tmr_1h1_hhc} 4. (Two-way only) A listener field (ServiceNow CPQ text field) receives JSON from the viewer. * Add a determination rule (or enrichment) to parse that JSON and update fields or set rows. * If a listener field is present, only mappings explicitly configured for two-way will write back. {#logik-io-integration-wtih-visualization-tools__ul_umr_1h1_hhc} {#logik-io-integration-wtih-visualization-tools__table_cpq_integration_matrix__entry__3}{#logik-io-integration-wtih-visualization-tools__table_cpq_integration_matrix__entry__9} | Viz vendor | 1-way communication |||| 2-way communication || | Viz vendor | Field | Set | Set repeater: active index | Product picker | Field | Set | |-|-|-|-|-|-|-| | CDS | Supported | Supported | Supported | Supported | Supported | Supported through implementation. See vendor-specific implementation article. | | kBridge | Supported | Supported | Supported | Supported | Supported | Supported through implementation. See vendor-specific implementation article. | | Threekit | Supported | Not supported | Supported | Not supported | Not supported | Not supported | [Table 2. Visualization tool feature support] {#logik-io-integration-wtih-visualization-tools__table_cpq_integration_matrix} ## Data exchanged {#logik-io-integration-wtih-visualization-tools__section_a12_wh1_hhc} * Fields: Scalar values (text, number, Boolean, picklist selection). * Sets: Array of row objects (first 25). Use the Active Set Index to keep the visual in sync with the row being edited in a repeater. * Product pickers: Array of selected option objects (first 25). * Assets (Threekit): Provide a static `assetId` or an asset-ID field in ServiceNow CPQ to enable dynamic asset selection. {#logik-io-integration-wtih-visualization-tools__ul_sh5_wh1_hhc} ## Security and environments {#logik-io-integration-wtih-visualization-tools__section_h2j_b31_hhc} * Auth and origin: Use vendor tokens and URLs appropriate to prod vs non-prod. Ensure your ServiceNow CPQ Runtime Client origins match calling domains. * CSP (Content Security Policy): Allow vendor script or app hosts for embedding and messaging. Coordinate with your security team and ServiceNow CPQ support to add domains. * Separation of concerns: Keep vendor credentials and tokens out of shared layouts across environments. Swap tokens when promoting. {#logik-io-integration-wtih-visualization-tools__ul_lvt_b31_hhc} ## When to choose which tool {#logik-io-integration-wtih-visualization-tools__section_tf5_c31_hhc} * If you need bidirectional edits in the canvas, choose kBridge or CDS and implement a listener field and parsing rules. * If you need high-fidelity 3D with asset management and one-way updates, choose Threekit with an assetId or assetId field strategy. * If you have a heavy set-driven UX, prefer CDS or kBridge for two-way set JSON handling and Active Set Index synchronization. ## General guidelines {#logik-io-integration-wtih-visualization-tools__section_vq4_f31_hhc} * Map only what you need: Limit `eventFields`, `eventSets`, and `eventProductPickers` to essential data for performance. * Design for the 25-item cap: If users may exceed 25 set rows or product picker selections, add guardrails (such as validation, paging, or summarization). * Normalize for two-way: Define a stable JSON schema for listener payloads and centralize parsing logic in a managed rule or enrichment. * Promote safely: Externalize environment-specific values such as tokens and URLs. Verify visuals in test before production promotion. * Troubleshoot systematically: * Check admin logs for runtime or script errors. * Verify CSP and network access to vendor domains. * Use the viewer's console/devtools and ServiceNow CPQ debugger inputs to reproduce states. {#logik-io-integration-wtih-visualization-tools__ul_tj4_g31_hhc} **Related concepts** * [Integrating kBridge visualization](https://www.servicenow.com/docs/qwKqt5ykKNJikOoD6msUWA "Integrate kBridge for real-time 3D visualization. Sync configuration inputs with visual updates to enhance user experience.") * [Integrating CDS or other third-party visualization tools](https://www.servicenow.com/docs/4zc4GpGJmKlbsxImlGCd0A "Integrate CDS Visual or other third-party tools for technical visualization. Sync configuration inputs with visual updates to enhance user experience.") * [Integrating Threekit visualization](https://www.servicenow.com/docs/NX7W3VeLv4k7Ga~wTCjSYg "Integrate Threekit for visualization. Sync configuration inputs with visual updates to enhance user experience.")