Skip to content

🖼️ Image Node

Purpose

The Image node sends an image to the customer on WhatsApp. Use it to share product photos, infographics, maps, QR codes, or any visual content.

Business Scenario

Use the Image node when you need to:

  • Show product photos — let customers see what they're interested in
  • Share infographics — visual summaries of services or processes
  • Send maps or directions — help customers find your location
  • Display QR codes — for payments, check-ins, or links
  • Provide visual instructions — setup diagrams, how-to images

Configuration

Field Description
Title Internal name (e.g., "Product Overview Image")
Image Pick an image from My Documents — resolved to a fresh link at send time
Or a direct URL Fallback: a public URL to the image (used when no My Documents image is selected)
Caption Text shown beneath the image in WhatsApp

Media Source Priority

Same as the Document node — the runtime resolves the image in this order:

  1. Asset ID (My Documents) — recommended
  2. Image Alias — a named reference
  3. Direct URL — a public URL

Properties

Property Type Required Default Description
title Text No "" Internal node name
assetId Text No — My Documents asset reference
imageAlias Text No — Named alias for the image
url Text No — Direct URL to the image
caption Text Yes "" Caption text shown below the image

Media Source Required

At least one media source (asset, alias, or URL) must be set. The designer shows a validation error if all three are empty.

Inputs

Handle Type Description
Top (↑) Target Receives a connection from any preceding node

Outputs

Handle Type Description
Bottom (↓) Continue Connects to the next node in the flow

Connection Rules

  • ✅ Can receive connections from any node type
  • ✅ Can connect to any node type
  • ❌ Must have a media source (asset, alias, or URL) — validation error otherwise

Example Flow Diagram

flowchart TD
    A["📋 Products Menu"] -->|"Widget Pro"| B["🖼️ Widget Pro Photo<br/><em>Here's the Widget Pro in action!</em>"]
    B --> C["💬 Description<br/><em>The Widget Pro features...</em>"]
    C --> D["📄 Spec Sheet<br/><em>widget-pro-specs.pdf</em>"]
    D --> A

    style B fill:#fce7f3,stroke:#ec4899,stroke-width:2px
    style D fill:#fef3c7,stroke:#f59e0b,stroke-width:2px

Best Practices

  • ✅ Use high-quality images — they represent your brand.
  • ✅ Add descriptive captions — tell the customer what they're looking at.
  • ✅ Upload to My Documents for reliable links.
  • ✅ Pair with Message or Document nodes — image + text description + downloadable spec sheet.
  • ✅ Optimise file size — large images take longer to load on mobile.

Common Mistakes

Mistake What Happens Fix
No media source set Validation error: "Image has no media source" Upload an image or enter a URL
Direct URL expires Customer sees a broken image Use My Documents instead
Very large image file Slow loading on mobile Compress the image before uploading
No follow-up node Dead end after viewing image Connect to a Message or Menu