1. Introduction

This plugin allows you to seamlessly integrate the Pexels API into your Bubble application, providing easy access to high-quality, royalty-free images and videos. It supports advanced features such as pagination, LRU caching, infinite scrolling (“Load More”), and intelligent pre-fetching to enhance performance.

2. Objectives

• Enable easy search and display of royalty-free images and videos from Pexels.

• Provide built-in support for pagination and incremental content loading ("Load More").

• Optimize performance with LRU caching and prefetching for faster load times.

• Offer flexible filtering (orientation, size, color, locale).

• Expose various states for easy integration into Bubble workflows and UI elements.

3. Plugin Fields (Properties)

4. Exposed States

Use these states to seamlessly integrate results into your Bubble app's workflows and UI:

5. Events and Workflow Integration

1. New Search

   • Changing search_term, search_type, or filters resets cache/results and loads Page 1.

2. Load More

   • Setting load_more to true increments current_page and loads next page results.

   • After results load, you must reset load_more back to false.

3. Prefetching (Optional)

   • The plugin preloads the next page in the background for faster loading when available.

6. Use Cases

• Image Galleries: Display grids or sliders with curated or user-driven searches.

• Dynamic Backgrounds: Set sections with regularly updated images (e.g., "nature," "business").

• Video Carousels: Embed video previews with integrated thumbnails and play buttons.

• Multi-language Searches: Retrieve localized results using the locale parameter.

• Infinite Scroll: Implement seamless paginated content loading for better UX.

7. Obtaining your Pexels API Key

1. Sign up at Pexels API.

2. Create a new application in your dashboard to receive an API key.

3. In Bubble, navigate to Settings → API Keys and save your API key securely.

4. Assign your Bubble-stored API key to the api_key_pexels field under context.keys in the plugin settings.

8. Benefits of Using this Plugin

• Ease of Integration: Quickly set up powerful image and video searches.

• Performance Optimization: Efficient caching and prefetching reduce API load and improve response times.

• Flexible Customization: Wide range of filtering options for precise content control.

• Enhanced User Experience: Smooth content loading and clear error management.

• Bubble Integration: Exposed states facilitate direct workflow integration for rapid UI/UX development.

9. Step-by-Step Configuration in Bubble

1. Installation

   • Install the Pexels Media Search Plugin in your Bubble editor.

2. Adding the Element

   • Drag the plugin element onto your Bubble page.

3. API Key Setup

   • Select your saved API key from Settings → API Keys within the plugin properties.

4. Configuring Fields

   • Enter your desired values for search_term, results_count, search_type, and optional filters.

5. Creating a Repeating Group

   • Set up a Repeating Group to display image_results or video_results.

   • Inside each cell, place an Image or Video element linked to Current cell’s image_results:item# or similar states.

6. Implementing "Load More" Functionality

   • Create a “Load More” button that triggers a workflow:

     1. Set plugin property load_more = true.

     2. After a brief delay, reset load_more = false.

7. Error Handling

   • Display the error_message state in a Text element to inform users about any API issues or empty results.

8. Advanced Experience

   • Use conditional workflows triggered by the has_more_results state to hide or show pagination or load more buttons.