About Displaying Images to User

ConnectiveOne supports sending images to users in two ways: through the constructor UI or through action send_photo. This allows showing users visual content, which improves user experience and promotes better information understanding.

Context and Problem

In many scenarios, you need to show images to users:

  • Product catalogs with photos
  • Instructions with screenshots
  • Advertising materials
  • Diagrams and infographics

Displaying images solves this task by allowing sending images to users in bot scenarios.

Key Concepts

Ways to Send Images

Through UI constructor:

  • Quick way for simple cases
  • Supported for blocks: "Message to User", "Wait for User Response", "Message with Keyboard"
  • Can upload file or add link

Through action send_photo:

  • Extended way for complex cases
  • Allows sending multiple images simultaneously
  • Supports placeholders and dynamic image selection

Formats and Limitations

Supported formats:

  • JPG, JPEG, PNG, GIF, WebP

Size limitations:

  • Telegram: up to 10 MB
  • Viber: up to 20 MB
  • Widget: depends on settings

Approach Options

UI Constructor vs action send_photo

UI Constructor:

  • ✅ Pros: Simplicity, quick setup
  • ❌ Cons: Limited flexibility

Action send_photo:

  • ✅ Pros: Flexibility, support for multiple images, dynamic selection
  • ❌ Cons: More complex setup

Why we use both approaches: UI constructor suits simple cases, and action send_photo — for complex scenarios with dynamic image selection.

Adopted Solutions

Images uploaded through File Manager automatically receive a public link that can be used in action send_photo.

Placeholder Support

In image URLs, you can use placeholders that will be replaced with values from constants, allowing dynamically selecting images.

Sending Multiple Images

Action send_photo allows sending multiple images in one action, they will be sent sequentially.

Implications for Users and Implementation

For Integrators

When using images, it's important to:

  1. Choose sending method — UI constructor or action send_photo
  2. Check format and size — compliance with channel limitations
  3. Use public URLs — for images through action send_photo
  4. Optimize size — for faster loading

Common Errors

Error: Image does not display
Problem: Incorrect URL or file format
Solution: Check URL and image format

Error: Image is too large
Problem: File size exceeds channel limitation
Solution: Optimize image size or use another format

Error: Placeholders do not work
Problem: Incorrect placeholder syntax or missing value
Solution: Check placeholder syntax and value presence in constants

Usage Examples

Sending Single Image

{
  "product": "https://example.com/images/product.jpg"
}

Sending Multiple Images

{
  "name1": "https://example.com/images/photo1.jpg",
  "name2": "https://example.com/images/photo2.jpg",
  "name3": "https://example.com/images/photo3.jpg"
}

Using Placeholders

{
  "product": "{{product_image_url}}",
  "logo": "{{company_logo_url}}"
}

Dynamic Image Selection

{
  "constant": "photos_array",
  "key": "{{selected_photo_index}}"
}