UI methods

Show visual aids and send events from a Script Block.

The ui methods let a Script Block in your process act in the conversation of Conversation SDK: show a custom visual aid, hide visual aids, or send an event to your website or app.

They work only in conversations in Conversation SDK, both in text chat and in Hello. In other channels, such as email or phone, they have no effect.

ui.showVisualAid

ui.showVisualAid(url);

Shows the web page at url in the conversation as a custom visual aid. Put the data the page needs into the URL:

const data = {
  orderNumber: "ORD-2024-78432",
  statusLabel: "Shipped",
  total: "$104.98",
};
const encoded = encodeURIComponent(JSON.stringify(data));
ui.showVisualAid(`https://example.com/visual-aids/order.html?data=${encoded}`);

To build the page, see Build a custom visual aid.

ui.hideVisualAids

ui.hideVisualAids();

Removes the visual aid currently shown in Hello. In text chat, visual aids stay in the conversation history.

ui.sendEvent

ui.sendEvent(name, params);

Sends an event to your website or app. Nothing is shown to the customer.

ArgumentTypeRequiredDescription
namestringYesEvent name. Your code listens for this name.
paramsRecord<string, string>NoEvent parameters. All values must be strings, otherwise the block fails.
ui.sendEvent("meetingBooked", { meetingId: "MTG-2041" });

To receive the event on your website or in your app, see Custom events.


Did this page help you?