Attachments Demo

Enable file attachments in the composer. Users can click the attach button or drag & drop files onto the widget.

How it works

Set attachments.enabled: true in the widget config. Files are converted to base64 content parts and sent alongside the message text. You can constrain allowed types, max file size, and max file count.

Configuration

Max files

Max file size

Allowed types

Button icon

Drop Overlay

Background

Overlay icon

Icon stroke width

Label text

Border style

Backdrop blur

Inset (margin)

Try it

Click the attach button in the composer
Drag & drop a file onto the chat
Paste an image from your clipboard
Attach multiple files, then send a message

        // Enable attachments with a custom drop overlay

        const config = {

          attachments: {

            enabled: true,

            maxFiles: 4,

            maxFileSize: 10 * 1024 * 1024,

            dropOverlay: {

              background: 'rgba(59,130,246,0.08)',

              iconName: 'upload',

              label: 'Drop files here',

            }

          }

        };

Event Log

Waiting for attachment events…