HTML Renderer

Renders dynamic HTML content for Enhanced Chat UI with support for forms, media, and WebRTC

Overview

The HTML Renderer node generates dynamic content for enhanced chat user interfaces, supporting multiple content types including plain text, rich HTML, interactive forms, video, audio, and WebRTC communication. It is designed to embed customizable and secure content blocks within chat flows, enabling richer user interactions such as submitting forms, playing media, or initiating real-time calls.

Common scenarios where this node is beneficial include:

  • Displaying formatted messages with HTML styling.
  • Collecting user input via interactive forms embedded in chat.
  • Streaming video or audio content directly inside the chat interface.
  • Enabling real-time communication features like video/audio calls or screen sharing using WebRTC.

Practical examples:

  • A customer support chatbot that shows a feedback form after a conversation.
  • An educational bot that streams tutorial videos or audio lessons.
  • A collaboration bot that allows users to start video calls without leaving the chat.

Properties

Name Meaning
Content Type Type of content to render. Options: Text (plain text), HTML (rich HTML), Form (interactive form elements), Video (video playback), Audio (audio playback), WebRTC (real-time communication interface).
HTML Content HTML content or template string to render when Content Type is "HTML".
Text Content Plain text content to display when Content Type is "Text".
Form Configuration Settings for rendering an interactive form when Content Type is "Form". Includes:
• Form Title: title displayed above the form.
• Form Fields: multiple fields with types (text, email, textarea, select, radio, checkbox, number, date), labels, names, required flag, placeholders, and options for select/radio/checkbox.
• Submit Button Text: label for the submit button.
Video Configuration Settings for embedding video content when Content Type is "Video". Includes:
• Video URL: source URL.
• Video Type: MP4, WebM, YouTube, Vimeo.
• Video Title: displayed title.
• Auto Play: whether video starts automatically.
• Show Controls: whether player controls are visible.
Audio Configuration Settings for embedding audio content when Content Type is "Audio". Includes:
• Audio URL: source URL.
• Audio Type: MP3, WAV, OGG.
• Audio Title: displayed title.
• Auto Play: whether audio starts automatically.
• Show Controls: whether player controls are visible.
WebRTC Configuration Settings for WebRTC communication when Content Type is "WebRTC". Includes:
• WebRTC Type: Video Call, Audio Call, Screen Share.
• Room ID: unique identifier for the session.
• STUN/TURN Servers: ICE servers list.
• Enable Video: toggle video stream.
• Enable Audio: toggle audio stream.
Security & Callback Settings Security and interaction settings:
• Sanitize HTML Output: enable/disable sanitization to prevent XSS.
• Callback URL: endpoint to handle form submissions or interactions.
• Session ID: identifier for tracking user sessions.
• CORS Origins: allowed origins for cross-origin requests.
• Trusted Content: skip sanitization if content is trusted.
Styling Options Visual customization:
• Container CSS Classes: CSS classes applied to the container element.
• Custom CSS: additional CSS styles.
• Theme: Default, Dark, Light, or Custom theme selection.

Output

The node outputs a single JSON object per input item with the following structure:

{
  "type": "html",
  "contentType": "<content type>",
  "html": "<rendered HTML string>",
  "meta": {
    "callbackUrl": "<callback URL if any>",
    "sessionId": "<session identifier>",
    "timestamp": "<ISO timestamp of generation>",
    "corsOrigins": "<allowed CORS origins>",
    "sanitized": true|false,
    // Additional metadata depending on content type:
    "formId": "<unique form id>",           // for forms
    "hasCallback": true|false,               // for forms with callback URL
    "mediaType": "video"|"audio"|"webrtc",  // for media/WebRTC content
    "roomId": "<room id>"                    // for WebRTC
  },
  "originalData": { ... }                     // original input JSON data
}
  • The html field contains the fully constructed and optionally sanitized HTML snippet ready for rendering in the chat UI.
  • For media types (video, audio, WebRTC), the output includes relevant metadata such as media type and room ID.
  • For forms, it includes a unique form ID and indicates if a callback URL is configured.
  • Binary data is not output; media is referenced by URLs embedded in the HTML.

Dependencies

  • No external API dependencies are required.
  • The node relies on standard HTML5 capabilities for media and WebRTC.
  • Proper configuration of callback URLs and CORS origins is necessary for handling form submissions and interactions securely.
  • Sanitization is built-in but can be disabled for trusted content.

Troubleshooting

  • Unsupported content type error: Occurs if an invalid or unsupported content type is selected. Ensure the "Content Type" property is set to one of the supported options.
  • Sanitization issues: If HTML content appears stripped or altered unexpectedly, check if sanitization is enabled and whether the content is marked as trusted.
  • Form submission failures: Verify that the callback URL is correctly set and accessible, and that CORS origins allow requests from the chat client domain.
  • Media playback problems: Confirm that provided URLs for video/audio are valid and accessible, and that the browser supports the specified media format.
  • WebRTC connection issues: Ensure correct ICE server configuration and unique room IDs. Network restrictions or firewall rules may block WebRTC traffic.

Links and References

Discussion