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

Automatic Public Link Generation

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}}"
}

Related Documents

• How-to: Add Image to Broadcast — working with media in broadcasts