Canvas Components
Explains the HTML renderer canvas component for hosted Webchat. Useful for displaying rich HTML content, formatted instructions, and generated layouts.
Display rich HTML content within the webchat interface, including formatted text, images, tables, and other HTML elements.
{
"platforms": {
"webchat": {
"sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
"webchat_control_event": {
"action": "render_component",
"params": {
"component_type": "html",
"component_params": {
"html_page": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Random Size Text Test</title>\n <style>\n body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n text-align: center;\n background-color: #f0f0f0;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n\n h1 {\n font-size: 48px; /* Random large size */\n }\n\n h2 {\n font-size: 32px; /* Smaller than h1 */\n }\n\n h3 {\n font-size: 40px; /* Randomly larger than h2 */\n }\n\n h4 {\n font-size: 28px; /* Randomly smallest heading */\n }\n\n p {\n font-size: 20px;\n max-width: 600px;\n margin: 0 auto;\n }\n </style>\n</head>\n<body>\n <div class=\"container\">\n <h1>Heading One</h1>\n <h2>Heading Two</h2>\n <h3>Heading Three</h3>\n <h4>Heading Four</h4>\n <p>This is a simple paragraph to test font sizes and layout.</p>\n </div>\n</body>\n</html>\n",
}
}
}
}
}
}