--- sourceDocument: Yokohama Conversational Interfaces sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/conversational-interfaces Release : - yokohama ft:locale : - en-US ft:publication_title : - Yokohama Conversational Interfaces ft:clusterId : - convint bundleId : - convint workflow : - Platform --- # Customizing Virtual Agent with custom controls # Customizing Virtual Agent with custom controls {#ariaid-title1} Release version: Yokohama Updated January 30, 2025 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 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 Customizing Virtual Agent with custom controls Custom controls in ServiceNow Virtual Agent are developer-created interface components that extend the capabilities of Virtual Agent Designer. These controls, such as sliders or video players, allow for more specialized user inputs and bot responses beyond the default set provided. They enhance conversation design by enabling tailored interaction elements suited to specific use cases. Show full answer Show less Note that custom controls are not supported on Internet Explorer 11 or Microsoft Teams. ## Prerequisites * Familiarity with the ServiceNow AI Platform and application table structures. * Understanding of web component development and design principles. * Proficiency in JavaScript for defining component behavior. * Knowledge of the Next Experience Design System, which is the foundation for creating these components. ## How custom controls work The process to integrate custom controls in Virtual Agent includes these key steps: * **Create a custom control definition:** After developing the custom component, define how it maps as an input or response control. * **Build the custom control in Virtual Agent Designer:** Select the custom control definition, specify input parameters (for data the control receives), and output parameters (for data it returns). Input controls handle user inputs with callbacks, whereas response controls display information without callbacks. * **Add the custom control to a topic or topic block:** Topic authors or admins incorporate the control into Virtual Agent conversations to enhance interaction. ## Secure Inputs Starting with the San Diego release, custom input controls can be configured to accept secure inputs like passwords. This is enabled by toggling the "Make inputs secure" option when creating the control, allowing secure data to pass safely to Integration Hub actions or subflows. ## Benefits for ServiceNow Customers * Create richer, more interactive Virtual Agent conversations tailored to your organization's needs. * Extend Virtual Agent functionality with specialized input and response components beyond the default controls. * Ensure secure handling of sensitive user inputs within Virtual Agent interactions. Custom controls are components that ServiceNow® developers can create for use in Virtual Agent topics or topic blocks. Such controls include sliders or video players. Custom controls complement the controls provided in Virtual Agent Designer. Virtual Agent Designer provides a default set of controls that represent [user inputs](https://servicenow-prod.fluidtopics.net/eQGVrD~7FoujIzQs94XCiQ "Use the collection of input controls provided by Virtual Agent Designer to prompt and capture information from the user in a conversation."), [bot responses](https://servicenow-prod.fluidtopics.net/rvsgkzQtJHiMZPq2DNYVZw "Virtual Agent Designer offers various controls for displaying bot responses in a conversation. Because the bot responses occur in third-party platforms, the format for each output may vary."), and [utilities](https://servicenow-prod.fluidtopics.net/XlcbYdmDY_STaUQ8Uuwnlw "You can control interactions within a topic by using utilities in Virtual Agent Designer. These utilities perform various actions such as adding topic blocks (reusable components), running a script, or adding different conversation paths (branches) in a topic. Utilities are represented as nodes in a conversation flow but do not display anything to the user.") for building a Virtual Agent conversation. As a developer, you can use Virtual Agent Designer to create additional controls (interface components) for specific inputs or output responses. For example, a slider is an example of a custom input control that enables end users to select a quantity. Note: Custom controls do not work on Internet Explorer version 11. Custom controls are also not supported for Microsoft Teams. ## Before building a custom control {#custom-controls__section_igd_gfj_skb} Custom controls are based on customizable Next Experience Components that you can create by using the Next Experience Design System. Before building a custom component, you must have the following: * Basic knowledge of the ServiceNow AI Platform® and application table structures. * General knowledge of web component concepts, development, and design. * JavaScript knowledge to define component behavior and that of the custom control. * Knowledge of the design process for creating custom components for use in Virtual Agent Designer. {#custom-controls__ul_bjc_lfj_skb} To learn more about developing custom components for Virtual Agent, see Develop a component for Virtual Agent. ## How custom controls work {#custom-controls__section_mlf_kcf_bmb} To add your custom control to Virtual Agent, follow these main steps: 1. [Create a custom control definition](https://servicenow-prod.fluidtopics.net/ueRovI8TGWRhmP4saS6yGQ "Define a custom input or response control definition that maps to a custom component."). After building the custom component to be used for the control, create a custom control definition that maps an input or response control to the custom component. 2. [Create a custom control using Virtual Agent Designer.](https://servicenow-prod.fluidtopics.net/XdTLainZu0fGrH8eL7nG0Q "Build a custom input or response control that topic authors can use in topics or topic blocks. In Virtual Agent conversations, an input control gathers information from end users, while a response control displays information to end users.") A custom control is an input or response control. Developers build a custom control in Virtual Agent Designer by doing the following: * Selecting a custom control definition. * Defining the input parameters for using the control. * Specifying the output parameters returned by the control. {#custom-controls__ul_fdy_ndn_fpb} An input control has callbacks that use input from the end user. A response control typically presents information to the end user and doesn't have callbacks. 3. [Add a custom control to a topic or topic block](https://servicenow-prod.fluidtopics.net/j2pfcX1i6aI9Tz12S~JrdA "Add a custom control to a Virtual Agent topic or topic block. During the conversation, you can gather inputs from the user or display outputs to the user."). Topic authors, virtual agent admins, or admins can add a custom control utility to a topic or topic block. {#custom-controls__ol_ppp_zcn_fpb} ## Secure inputs {#custom-controls__section_tbg_3fr_zqb} Beginning with the San Diego release, you can create custom input controls that can accept secure inputs, such as passwords, to pass through to Integration Hub actions or subflows. To enable this, slide the Make inputs secure toggle switch when you create your custom input control. For more information, see [Create a Virtual Agent custom control](https://servicenow-prod.fluidtopics.net/XdTLainZu0fGrH8eL7nG0Q "Build a custom input or response control that topic authors can use in topics or topic blocks. In Virtual Agent conversations, an input control gathers information from end users, while a response control displays information to end users.").