The Picture choice user block allows you to offer your user predefined choices illustrated with pictures, supporting both single and multiple selection modes. This visual input method is perfect for product selection, preference gathering, and any scenario where images enhance user understanding and engagement.
Picture choice overview

​
Configuration Options

​
Selection Modes

  • Single Choice: Users select one option and proceed immediately
  • Multiple Choice: Users can select multiple options before submitting
  • Submit Button: Customizable button text for multiple choice mode

​
Search Functionality

  • Searchable Options: Enable search to filter through many picture options
  • Search Placeholder: Customize the search input placeholder text
  • Real-time Filtering: Users can type to instantly filter visible choices

​
Visual Customization

  • Image Upload: Upload custom images for each choice option
  • Title Text: Add descriptive titles to each picture choice (supports variables)
  • Description Text: Include detailed descriptions below titles (supports variables)
  • Display Conditions: Show/hide specific options based on variable conditions

​
Dynamic Content

  • Dynamic Items: Populate choices from variables instead of static content
  • Image Sources: Use a variable containing image URLs
  • Dynamic Titles: Use a variable containing choice titles
  • Dynamic Descriptions: Use a variable containing choice descriptions

​
Additional Features

  • Other Option: Enable alternative flow when no predefined option fits
  • Variable Integration: Save user selections to variables
  • Conditional Display: Show specific options based on previous responses

​
Advanced Features

​
Dynamic Picture Loading

Load picture choices dynamically from external sources:
  • Image Arrays: Use variables containing arrays of image URLs
  • Title Arrays: Sync titles with image arrays for complete dynamic choices
  • Description Arrays: Add contextual descriptions to dynamic choices
  • Real-time Updates: Dynamic choices update when source variables change

​
Conditional Choice Display

Control which picture options appear based on user data:
  • Variable-based Conditions: Show options based on previous responses
  • Multiple Conditions: Combine multiple criteria for complex logic
  • Logical Operators: Use AND/OR logic for sophisticated filtering
  • Dynamic Personalization: Tailor available choices to individual users

​
Image Management

  • Multiple Formats: Support for JPG, PNG, GIF, and WebP images
  • Automatic Optimization: Images are optimized for web delivery
  • Responsive Design: Images adapt to different screen sizes
  • Upload Integration: Direct upload integration with QuickBot’s media system

​
Variable Integration

  • Selection Storage: Save user choices to designated variables
  • Multi-value Handling: Multiple selections stored as comma-separated values
  • Choice Tracking: Track both selected and unselected options
  • Integration Ready: Formatted data works with webhooks and external systems

​
Best Practices

​
Image Selection

  • Use high-quality, consistent image dimensions for professional appearance
  • Choose images that clearly represent the option they represent
  • Optimize image file sizes for fast loading on mobile devices
  • Use consistent visual style across all picture choices

​
User Experience

  • Limit choices to 2-4 columns for optimal mobile experience
  • Include descriptive titles and descriptions for accessibility
  • Use search functionality for lists with 8+ picture options
  • Consider load times when using multiple high-resolution images

​
Content Strategy

  • Choose images that are culturally appropriate for your audience
  • Ensure images remain relevant over time or use dynamic loading
  • Test image clarity on various screen sizes and devices
  • Use alt text and descriptions for accessibility compliance

​
Variable Management

  • Use descriptive variable names for picture choice responses
  • Remember that multiple selections create comma-separated values
  • Plan data structure for integration with external systems
  • Test variable population with dynamic choice scenarios

​
Integration Examples

​
Product Catalog Selection

// Dynamic product images from e-commerce API
{
  "products": {
    "images": ["url1.jpg", "url2.jpg", "url3.jpg"],
    "titles": ["Product A", "Product B", "Product C"],
    "descriptions": ["Description A", "Description B", "Description C"]
  },
  "selection": "{{userProductChoice}}"
}

​
Preference Survey

  1. Display picture choices for different options
  2. Enable multiple selection for comprehensive feedback
  3. Save selections to categorized variables
  4. Use conditional logic for follow-up questions based on choices

​
Dynamic Content Loading

  • Load images from CRM or database via webhook
  • Update choices based on inventory or availability
  • Personalize options based on user profile data
  • Sync with external content management systems

​
Troubleshooting

​
Common Issues

Images not displaying correctly
  • Verify image URLs are accessible and properly formatted
  • Check image file formats are supported (JPG, PNG, GIF, WebP)
  • Ensure images are optimized for web delivery
  • Test image loading across different devices and connections
Dynamic choices not updating
  • Confirm dynamic variables contain properly formatted arrays
  • Verify array lengths match between images, titles, and descriptions
  • Check that source variables are populated before the picture choice block
  • Test dynamic updates when source data changes
Multiple selection not working
  • Ensure “Multiple Choice” toggle is enabled in block settings
  • Verify submit button text is configured appropriately
  • Check that users understand they need to click submit after selecting
  • Test the selection behavior on both desktop and mobile devices
Search functionality issues
  • Enable “Searchable” toggle in picture choice settings
  • Configure appropriate placeholder text for search input
  • Test search with sufficient number of picture options
  • Verify search terms match titles and descriptions effectively
Variable not saving selections
  • Confirm a variable is selected in “Save Answer” dropdown
  • Check variable names don’t contain special characters
  • For multiple choices, verify comma-separated format is acceptable
  • Test variable integration with subsequent blocks and webhooks

​
Performance Optimization

  • Optimize image sizes to reduce load times
  • Use appropriate image dimensions for display context
  • Consider lazy loading for large numbers of picture choices
  • Monitor mobile performance with multiple high-resolution images

​
Display Issues

  • Test picture choice display across different screen sizes
  • Ensure consistent image aspect ratios for clean layout
  • Check text overlay readability on various image backgrounds
  • Verify responsive behavior on mobile devices and tablets

​
Integration Considerations

  • Format multiple selections appropriately for external systems
  • Handle image URL changes when integrating with dynamic sources
  • Consider caching strategies for frequently accessed images
  • Plan for graceful fallbacks when images fail to load