Advanced: Build a Custom xApp Node - Cognigy Documentation

Documentation Index

Fetch the complete documentation index at: /llms.txt

Use this file to discover all available pages before exploring further.

If you need more control and flexibility than what the xApp: Show Adaptive Card or xApp: Show HTML offer, you can create your own customized Node. To create a custom xApp extension, you will need to build an Extension from scratch using a template provided in the Cognigy repository on GitHub. Below is the code snippet that you can use within the Extension. This code snippet helps to create a custom Node that displays text content and allows you to cancel or continue the dialog.

export const xappDialogNode = createNodeDescriptor({
  type: "xapp-dialog",
  fields: [\
    {\
      key: "content",\
      label: "Content",\
      type: "cognigyText",\
    },\
  ],
  function: (params) => {
    const { cognigy, config } = params;
    const { content } = config as any;

const getDialogHtml = (content) => `
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/sdk/app-page-sdk.js"></script>
    </head>
    <body>
        <p>${content}</p>
        <button type="button" onclick="SDK.submit({ action: 'continue' })">continue</button>
        <button type="button" onclick="SDK.submit({ action: 'cancel' })">cancel</button>
    </body>
</html>
`;
    cognigy.api.setAppState("generic-html", {
      html: getDialogHtml(content),
    });
  },
});

Use the setAppState API with an app template URL set to generic-html and app template data that contain the HTML code generated. Once implemented, the generated HTML will appear within the app screen, similar to the xApp: Show HTML Node. This approach allows you to edit a specific part of the page through node fields, rather than modifying the entire page content.