xApp: Show HTML¶

Description¶

The xApp Page can be built by providing custom HTML code.

As an alternative, for more customization, you can create your own Node by implementing and uploading an Extension.

Content¶

You can either provide an HTML document or an HTML body only. Once this Node is executed, this xApp Page is displayed in the xApp Session.

Within the HTML Code, you will be able to access the xApp Page SDK through a global SDK variable. To submit a result back to the Flow, you can call SDK.submit({ name: "John" });. The submitted payloads need to be JSON serializable objects.

You can use the submit function. An example of a button that submits on click would be the following: <button type="button" onclick="SDK.submit({ variant: 'button1' })">button 1</button>.

To view submitted data, use the Interaction panel. You can access submitted data in the data object by clicking INFO > Input, or in the chat by adding a Say Node and specifying Submit payload: {{JSON.stringify(input.data)}} or Submit payload: {{JSON.stringify(ci.data)}}.

To access session data from within the HTML Code, use CognigyScript {{ JSON.stringify(cc.someContextKey) }}.

Waiting Behavior¶

To wait for a user input, for example, when the user clicks Submit on the Ordering page, activate the Waiting Behavior option. You can store the input result in the Context and use the data in the other Nodes.

xApp Overlay¶

By default, an xApp page opens in a separate browser tab. If you are using Webchat v3, you can override this behavior to open your xApp pages directly within the Webchat v3 interface. The pages will be presented in the format of screens.

The table lists the parameters for configuring xApp screens in the Webchat v3 interface.

Parameter	Type	Description
Header Title	CognigyScript	This parameter shows a title of the screen. The title displayed at the top panel of the Webchat v3 interface. If no title is provided, the top panel will remain empty.
Show Close Icon	Toggle	This parameter displays the `x` button in the upper-right corner of the screen. This parameter is enabled by default.
Send Event on Close Icon Click	Toggle	This parameter records the event when the user closes the screen without submitting. This parameter is disabled by default.
Auto Open	Toggle	This parameter automatically opens the screen within the Webchat v3 interface. This setting is enabled by default. If you want xApp pages to open in browser tabs instead of within the Webchat v3 interface, activate this setting.
Close Overlay on Submit	Toggle	This parameter closes the screen after the user clicks the Submit button. This parameter is enabled by default.
Feedback Message on Submit	CognigyScript	This parameter sends a message to the chat after the user clicks the Submit button.

xApp Page SDK¶

When hosted within Cognigy, the xApp Page (or any generic HTML xApp) can load the xApp Page SDK using a fixed URL: <script src=”/sdk/app-page-sdk.js”></script>. Loading this file will expose the xApp Page SDK as a global instance called SDK. To access its methods, call SDK.someExampleMethod() in your code after loading the SDK file. Note that the SDK code is not loaded asynchronously.

Function	Usage
`SDK.getAppTemplateData():Promise<unknown>`	Returns the xApp Template Data associated with this xApp Page.
`SDK.submit(result: Object):Promise<void>`	Submits the provided "result" object to the Flow. Has to be a JSON serializable object.
`SDK.getCustomReadyHandler():Function`	Returns a custom ready state handler. By default, the xApp Page will be ready as soon as the document is fully loaded. If you want to fetch additional content before showing the Page, you can override the `ready` event by getting a custom `ready handler` and calling it as soon as your xApp Page is ready manually. The end user will see the xApp Loading Screen on the Shell Page. Note: If loading the xApp Page takes more than 10 seconds, the xApp will be treated as `Failed to load` without the possibility of recovering.