Images in Chat

Let your bot show product photos, diagrams, and other visuals right inside the conversation.

How It Works

The bot uses Markdown image syntax to include images in its responses:

![Product Name](https://yoursite.com/image.jpg)

The chat widget automatically renders this as a visible image inside the message bubble.

You need two things:

The AI must know the image URL (via indexed context or bot instructions)
Your bot instructions must tell the AI to display images

Method 1: Indexed Featured Images (Automatic)

Use the featured image (thumbnail) from each post, page, or WooCommerce product.

Go to AxiaChat AI → Training → Context → Manage Context
Open Advanced Settings → Advanced Indexing Options
Check "Featured image URL"
Click Save & Index (re-indexing is required)
In your bot instructions, add an image directive (see examples below)

Once indexed, each content chunk includes a line like:

Image: https://yoursite.com/wp-content/uploads/product-photo.jpg

The AI uses that URL to build the Markdown image in its response.

Instruction Examples

When showing product information, include the image using
markdown format: ![product name](image url)

Create product cards with the featured image. Use the markdown
image syntax to display it.

If the context includes an image URL (Image:), show it to
the user with markdown: ![description](url)

Method 2: Manual URLs in Instructions

Put image URLs directly in your bot's instructions — no indexing needed.

If the user asks about the Premium Plan, show this image:
![Premium Plan](https://yoursite.com/img/premium-plan.png)

If they ask about the Basic Plan:
![Basic Plan](https://yoursite.com/img/basic-plan.png)

Best for:

A small number of specific images
Full control over which image appears
Images that aren't set as featured images

Method 3: Combine Both

Use indexed featured images for general product queries, and add specific images in instructions for special cases. The AI picks the most relevant option.

Tips for Best Results

Be specific in instructions

❌ Vague	✅ Specific
"Show images if you can"	"When showing a product, create a card with name, price, and its image in markdown"
"Use images"	"If the context includes an image URL (Image:), display it with markdown: ![name](url)"

Image size

Images auto-fit the message bubble width (max-width: 100%)
Use WordPress "medium" size (~300×300) for fast loading
The "Featured image URL" indexing option uses the medium size automatically

Supported formats

Any format the browser can display: JPG, PNG, WebP, GIF, SVG.

Image hosting

Your server — Always works
External URLs — Work if publicly accessible (some servers block hotlinking)

Example Conversation

User: What coffee do you have?

Bot: Here's our best seller:

[Image of Colombia Supremo coffee bag]

Colombia Supremo — $12.90
Single-origin coffee with chocolate and caramel notes. Medium roast.
View product →

Troubleshooting

Image doesn't appear

Verify the image URL is accessible (paste it in your browser)
Make sure the context was re-indexed with "Featured image URL" enabled
Check that your bot instructions explicitly mention using Markdown images

Image shows as text instead

The model isn't using Markdown — reinforce the instruction: "ALWAYS use markdown for images: ![alt](url)"
Smaller models may not follow formatting instructions well — try a more capable model

Image looks cropped

The widget auto-adjusts width. Check the original image for extreme proportions
Square or landscape (16:9) images display best in chat

Compatibility

✅ All AI providers (OpenAI, Claude, Gemini)
✅ Floating and inline widgets
✅ Shortcode and global widget
✅ Local and Pinecone contexts