{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2941,"path":"application-development/va-components.md","title":"Develop a component for Virtual Agent","bundle":null,"doc_type":null,"release":"australia","body":"\n# Develop a component for Virtual Agent\n\nCreate a custom Virtual Agent component to gather input or display information in the Virtual Agent client interface.\n\n## Types of Virtual Agent components\n\nTo develop a component for Virtual Agent, add specific properties and actions to interact with the Virtual Agent client interface. The properties required depend on the type of component you are creating.\n\n-   **Response component**\n\n    A response component only provides information to the user, and does not gather input or handle user interaction. For example, a card control that does not require user input and is only in the conversation once.\\[Omitted image \"card-control.png\"\\] Alt text: A card control as an output component that does not require user input\n\n    Add a property to your response component to handle the data sent by the Virtual Agent server.\n\n<table id=\"table_dql_lqd_lmb\"><thead><tr><th>\n\nProperty\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\ncontrolData\n\n</td><td>\n\nInitial data that the Virtual Agent server sends to your component as the topic runs. Data type: JSON Object\n\n</td></tr></tbody>\n</table>-   **Input component**\n\n    An input component displays information and/or gathers user input. It includes the same property as the output component to handle data sent by the server, but has more possible states and requires user interaction.\n\n<table id=\"table_k3t_nqd_lmb\"><thead><tr><th>\n\nProperty\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\ncontrolData\n\n</td><td>\n\nInitial data that the Virtual Agent server sends to your component as the topic runs. Data type: JSON Object\n\n</td></tr><tr><td>\n\nresponseValue\n\n</td><td>\n\nData sent to the component from the user's response, either from the client directly, or from the server if there is a refresh. Only use in components that require user input. Data type: JSON Object\n\n</td></tr><tr><td>\n\nforceCloseControl\n\n</td><td>\n\nFlag that indicates whether the component can accept input. When true, the control closes and the user cannot interact with it. Monitor changes on the client to update this value. Only use in components that require user input.Data type: Boolean\n\n</td></tr></tbody>\n</table>    Use this action to emit data from user interaction.\n\n<table id=\"table_pdz_frd_lmb\"><thead><tr><th>\n\nAction\n\n</th><th>\n\nDescription\n\n</th></tr></thead><tbody><tr><td>\n\nVA\\_CONTROL\\#VALUE\\_SENT\n\n</td><td>\n\nResponse data from the client to send to the server. Only use in components that require user input. Data type: JSON Object\n\n</td></tr></tbody>\n</table>\n## Input component states\n\nBecause they accept data, input components must handle multiple states. The state flow is generally as follows:\n\n1.  Virtual Agent shows the custom component in the waiting for input state.\n2.  The user interacts with the component to provide input.\n3.  The component closes and sends the `responseValue` property to the server.\n4.  The server runs the server-side logic and sends the component with the user's input back to the client.\n\n-   **Waiting for Input**\n\n    The initial state of a component waiting for user interaction. The `controlData` property is set, but the `forceControlClosed` property is false. This example shows a slider component in the waiting for input state.\n\n    \\[Omitted image \"slider-open.png\"\\] Alt text: Component waiting for input.\n\n    In this example, if the user has not provided a `responseValue` and the control is not closed, the slider and the input button display.\n\n    ```\n    const {controlClosed, sliderVal, sliderMin, sliderMax} = state;\n    return (<div class={{\"slider-chat\": true}}>\n        {responseValue ? null :  <Fragment>\n        <div class={{\"slider-label\": true}}>{label}</div>\n        {controlClosed ? null : <Fragment>\n            <div class={{\"slider-container\": true}}>\n                        <input on-change={onSliderChange} type=\"range\" min={sliderMin} max={sliderMax} value={sliderVal} class={{\"slider\": true}} />\n                <div class={{\"slider-value\": true}}>\n                        {unitIcon && \n                         <div class={{\"unit-icon\": true}}><img src={unitIcon} /></div>\n                         } \n                         {sliderVal} {unitName}\n                    </div>\n            <div class={{\"button-container\":true}}>\n                <now-button variant=\"primary\" label={buttonText || 'Confirm'} />\n             </div></div></Fragment>}\n    ```\n\n-   **Handling Input**\n\n    In the previous example, the slider uses a `now-button` component, which the user clicks to confirm input and send it to the server. When the user clicks the button, the `VA_CONTROL#VALUE_SENT` action fires with the `responseValue` payload.\n\n    ```\n    'NOW_BUTTON#CLICKED': (data) => {\n        const {updateState, dispatch, state: {sliderVal}} = data;\n        updateState({controlClosed: true});\n        dispatch('VA_CONTROL#VALUE_SENT', {\n            value: {\n                sliderVal\n            }\n        }); \n    }\n    ```\n\n-   **Closed**\n\n    A component that is closed can no longer accept user input. Components are generally closed because:\n\n    -   The user responded to the component. The component closes and the conversation continues.\n    -   The user ended the chat. The server does not wait for a response.\n    For example, the slider component only renders the original prompt when in the closed state.\n\n    \\[Omitted image \"closed-slider.png\"\\] Alt text: Closed component that is no longer waiting on user input.\n\n-   **Sending response**\n\n    After the user responds, the control is rendered again on the user's side of the conversation with the value of the `responseValue` property.\n\n    \\[Omitted image \"input-control-response.png\"\\] Alt text: Users response sent to the client.\n\n    For example, the slider control uses this snippet to render the response.\n\n    ```\n    {responseValue && <div className=\"response-container slider-value\">\n       {unitIcon && \n       <div className=\"unit-icon\"><img src={unitIcon} /></div>\n       } \n       {returnVal} {unitName}\n    </div>}\n    ```\n\n\n## Adding the component to Virtual Agent Designer\n\nAfter developing the component and deploying it to your instance, add it to Virtual Agent Designer using a custom control and definition. For more information, see [Virtual Agent custom controls](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/conversational-interfaces/custom-controls.md).\n\n-   **[Add properties to communicate with Virtual Agent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/add-va-properties.md)**  \nTo develop a component for Virtual Agent, add specific properties and actions to interact with the Virtual Agent client interface. The properties required depend on the type of component you are creating.\n-   **[Test a component for Virtual Agent](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/test-va-component.md)**  \nTest your Virtual Agent custom component before deploying it to your instance.\n\n**Parent Topic:**[Create custom components using ServiceNow CLI](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/custom-components.md)\n\n"}}