# Tutorial: Creating a Signature with xApp

**Elena Baskakova**  
December 9, 2024

In this tutorial, you will learn how to build a simple xApp that allows users to collect their signatures. The xApp enables users to draw their signature in an HTML-based interface and submit it to a Flow for further processing. We will cover the necessary code snippets and steps to create this functionality.

## Prerequisites

- Create an empty [Flow](https://docs.cognigy.com/ai/resources/build/flows).

## Explore the Code

1. Open the code in the Code Sandbox by clicking the following link:
   
   
2. The code contains a submit button that, when clicked, displays an alert with the JSON data containing the base64-encoded image in PNG format. The data is represented in a JSON format with a single field called `signaturePng`.

```javascript
   submitButton.addEventListener("click", (event) => {
         if (signaturePad.isEmpty()) {
           alert("Please provide a signature first")
         } else {
           const data = { signaturePng: signaturePad.toDataURL() }
           SDK.submit(data)
         }
       })
   ```

3. To include the required SDK in your xApp, use the SDK xApp page URL and the SDK's submit function to send the JSON data.
4. In the `app-page-sdk.js` file, you will find an xApp page SDK mock file that creates the window.SDK object. The provided mock file defines the submit function to display an alert with the submitted data. In the actual shell page of the xApp, the data will be sent to the Cognigy flow for further processing.

```javascript
       window.SDK = {
       submit: (data) => alert(JSON.stringify(data))
       }
   ```

## Build the xApp

01. Open a new Flow.  
02. In the Flow editor, add an **xApp: Init Session** Node. The agent session needs to be initialized to communicate with the Cognigy backend.

The **xApp: Init Session** Node is used to start the session, which provides the token and the xApp URL in the `agent.session` object.
03. Below **xApp: Init Session** Node, add an **xApp: Show HTML** Node. Copy the code from Code Sandbox and paste it to the **HTML Document** field with selected **Full HTML Document** content.
04. Click **Save Node**.
05. Below the **xApp: Show HTML** Node, add a **Question** Node.
06. In the Node, select the **xApp** question type.
07. Select **Text with Buttons** output type.
08. In the text field, enter `Please draw your signature in the xApp`.
09. Click **Add Button**. Fill in the following fields:

- **Button xApp**— enter the text: `Open xApp`.
    - **Select Button Type**— select **URL**.
    - **URL**— add **xApp Session URL**.
    - **URL Target**— select **Open URL in a new tab.**
10. Click **Save**.
11. Click **Save Node**.
12. Below the **Question** Node, add a **Say** Node.
13. In the **Say** Node, select the **Gallery** Output Type.
14. Click **Add Card.**
15.  In the **Title** field, specify `Received signature`.
16. Click **Add image.**
17. In the **Image URL** field, specify `{{ input.data._cognigy._app.payload.signaturePng }}`.
18. To save changes, click **Done**.
19. Click **Save Node**.

Test your Flow via the [Interaction Panel](https://docs.cognigy.com/ai/tools/interaction-panel/interaction-panel/).

Once the node is added, you should always start with the **xApp: Init Session** node. After that, when you try again, your input object will contain the token and the URL for the xApp Framework. Take this URL and create a signature.

Now you can deploy your virtual agent via any of the supported channels, such as Webchat Widget.

### More Information

- [Getting Started](https://docs.cognigy.com/ai/xApp/getting-started/)
- [Tutorial: Creating a Standalone xApp](https://support.cognigy.com/hc/en-us/articles/8867141515676)
- [Overview](https://docs.cognigy.com/ai/xApp/overview/)
- [xApp Nodes](https://docs.cognigy.com/ai/flow-nodes/xApp/overview/)

### xApps

- [Tutorial: Creating a Signature with xApp](https://support.cognigy.com/hc/en-us/articles/8868026263708-Tutorial-Creating-a-Signature-with-xApp)
- [Tutorial: Creating a Standalone xApp](https://support.cognigy.com/hc/en-us/articles/8867141515676-Tutorial-Creating-a-Standalone-xApp)