Skip to main content
Triggered when a response contains an unrecognized or user_defined response type. Use this event to render custom UI elements for specialized content types that are not natively supported by the chat widget.

​
Event properties

​
type
string
required
Always 'userDefinedResponse'.
​
contentItem
object
required
The individual message item with the user_defined response type.
​
contentItem.text
string
Text content of the item (if any).
​
message
object
required
The complete message containing the user-defined response item.
​
hostElement
HTMLElement
required
The DOM element where you can insert custom content.

​
Example

instance.on('userDefinedResponse', (event, instance) => {
    console.log('User-defined response received:', event.contentItem);
    
    // Render custom HTML content
    event.hostElement.innerHTML = `
        <div class="custom-response">
            <div class="custom-header">
                <h3>Custom Content</h3>
            </div>
            <div class="custom-body">
                <p>${event.contentItem?.text || 'No content available'}</p>
            </div>
            <div class="custom-footer">
                <button onclick="handleCustomAction()">Take Action</button>
            </div>
        </div>
    `;
    
    // Or render a code snippet
    event.hostElement.innerHTML = `
        <cds-code-snippet>
            ${event.contentItem?.code || '// No code provided'}
        </cds-code-snippet>
    `;
});

Do you need practical examples?

Learn how to apply the features available for embedded chat into your implementation with guidance and examples.