Product Photos
Show product images at the exact moment a visitor asks about an item. E-commerce teams use this to display colour options, size guides, or packaging previews.
Image Display Module
For Chat Workflows
Show images directly inside the chat conversation. Product photos, annotated screenshots, step-by-step diagrams, assembly instructions — the Image Display module lets your workflow communicate visually with every visitor, complete with captions and alt text for full accessibility.
- No credit card
- 14-day free trial
- UK hosted
- Visual builder
What Is the Image Display Module?
The Image Display module renders a single image directly inside the chat conversation at any point in your workflow. Unlike sending a plain URL that visitors have to click, the image appears inline — visitors see it immediately without leaving the chat window. This is enormously powerful for product-focused businesses, technical support teams, and any scenario where a picture truly is worth a thousand words.
Each image node accepts a source URL, an optional caption that appears below the image, and alt text for screen readers and accessibility compliance. The module automatically handles responsive sizing so images look sharp on mobile devices, tablets, and desktops alike. You can host your images anywhere — your own CDN, a cloud storage bucket, or any publicly accessible URL.
The Image Display module is an output-only step: it shows the image and immediately advances to the next node in the workflow. There is no visitor interaction required, which means it slots seamlessly between messages, button groups, or data-collection steps without interrupting the conversational flow.
Screenshots & UI Guides
Technical support workflows benefit hugely from showing annotated screenshots. Guide visitors to the right button, menu, or setting without lengthy text descriptions.
Diagrams & Infographics
Explain complex processes visually. Architecture diagrams, comparison charts, or step-by-step infographics make information digestible inside the chat.
Assembly & Setup Instructions
Hardware and furniture companies can show assembly step images right in the chat, reducing support ticket volume and improving customer satisfaction.
Why and When to Use the Image Display Module
Visual communication is faster than text. Research consistently shows that people process images 60,000 times faster than words. In a chat context, where attention spans are short and visitors expect instant answers, images eliminate ambiguity. A visitor asking "What does the dashboard look like?" gets an immediate, satisfying answer when you show a screenshot rather than describing it in three paragraphs.
The Image Display module is especially powerful in these scenarios: pre-sales product enquiries where visitors want to see before they buy, onboarding flows where new users need visual guidance through your interface, technical support where annotated screenshots cut resolution time in half, and hospitality or real estate where room photos or property images drive booking decisions.
Because the module supports captions, you can pair each image with a short explanation — "This is the settings panel where you'll find the API key" — to provide context without cluttering the chat with long messages. And because it supports alt text, your workflows remain fully accessible to visitors using screen readers, meeting WCAG compliance standards.
Example: SaaS Onboarding — Show the Dashboard
A software company uses the Image node to visually guide new trial users through setup.
START
Step-by-Step Breakdown
- Welcome Message: A short greeting sets context and tells the visitor an image is coming next.
- Image Display: The Image node shows an annotated dashboard screenshot with a caption explaining the key area to focus on.
- Instructional Message: A follow-up message tells the visitor exactly what to do next — creating a clear call to action.
- Button Group: The visitor confirms they've completed the step or requests additional help, branching the workflow accordingly.
Best Practices & Tips
Images in chat are powerful, but only when used thoughtfully. Follow these guidelines to maximise their impact without overwhelming the conversation.
Optimise File Size
Chat widgets load inside your visitor's browser. Keep images under 200KB where possible — use compressed JPEG for photos and PNG for screenshots with text. This ensures fast loading on mobile connections.
Always Add Captions
A caption below the image provides context: "This is the settings page" or "Colour: Ocean Blue." Without a caption, visitors may not understand why they're seeing the image.
Write Descriptive Alt Text
Alt text isn't optional — it's essential for accessibility. Describe what the image shows: "Screenshot of the billing settings panel with the upgrade button highlighted in red." Screen reader users deserve the same experience.
Pair with a Message Node
Always place a Message node before or after an Image node to provide context. An image without explanation can confuse visitors; a message like "Here's what to look for:" sets the stage perfectly.
Frequently Asked Questions
What image formats are supported?
The Image Display module supports all standard web image formats including JPEG, PNG, WebP, and SVG. For best results, use JPEG for photographs and PNG for screenshots or graphics with text. WebP offers excellent compression if your audience uses modern browsers.
Can visitors click the image to enlarge it?
Yes. Images displayed in the chat widget are clickable. When a visitor taps or clicks the image, it opens in a lightbox-style overlay at full resolution. This is especially useful for detailed screenshots or diagrams where visitors need to see fine detail.
Is there a file size limit for images?
There is no hard limit imposed by the platform, but we recommend keeping images under 500KB for optimal loading performance. Images are loaded from your own hosting, so very large files may cause slow display on mobile networks. Compress your images before uploading for the best experience.
Can I show different images based on visitor choices?
Absolutely. Use a Button Group or Conditional Logic node before the Image node to branch the workflow. Each branch can display a different image — for example, showing a red product variant to visitors who selected "Red" and a blue variant for those who chose "Blue."
Related Modules
The Image Display module works alongside these modules to create rich visual chat experiences.
Show, Don't Just Tell — Add Images to Your Chat Today
Create a visually engaging chat workflow with the Image Display module. Drag it in, set your image URL, and publish — no code required.