Canvas Components
HTML Renderer Component
The HTML renderer component allows you to display rich HTML content within the webchat interface. This is useful for displaying formatted text, images, tables, and other HTML elements.
# Example Usage
{
"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",
}
}
}
}
}
}