1. Plugin Installation:

Access the Bubble Plugin Marketplace and search for "Giphy Media Search Plugin for Bubble".
Install the plugin and add the element to the page where you want to use it.

2. Basic Property Configuration:

In the Bubble editor, select the plugin element on your page.
Configure the api_key_giphy property by entering your Giphy API key (which you will obtain from the Giphy Developers Portal).
Adjust other properties as needed, such as search_term, results_count, media_type, rating, and language.

3. "Load More" Button Configuration:

Add a button to your page to activate loading more results.
In the button's workflow, set the plugin's load_more property to "yes" on click.
Use the has_more_results state to dynamically show or hide this button.

4. Workflow Integration:

Bind the exposed states (e.g., image_urls, image_titles, clip_video_urls, etc.) to dynamic elements on your page.
Set up a Repeating Group to display results, using image_urls as the data source.
Implement actions such as saving selected images, sharing on social media, or inserting into content.

5. Download Configuration:

Configure individual file downloads by connecting the workflow to the exposed URLs.
Implement multiple file downloads in ZIP format using the selected file listings.
Customize file names for individual downloads or the complete ZIP file.

6. Backend API Integration:

Use the image or video URLs with Bubble's API to save individual elements to your database.
Implement workflows in "Schedule API Workflow on a List" to process each element individually.
Create custom endpoints to manage batch operations with selected content.

7. Performance Optimization:

Consider using a delay timer to avoid multiple API calls during typing.
Implement initial loading of trending content to show immediate results without search.
Use visual loading elements while API requests are being processed.

---

1. Create an Application in Giphy:

Log in to the Giphy Developers Portal and create a new application.
Choose the appropriate API type based on your needs (SDK for development or API for production).

2. Obtain the API Key (api_key_giphy):

Once the application is created, locate and copy the API key displayed in the configuration panel.
This key will be used in the api_key_giphy property of the plugin in Bubble.

3. Configure Permissions and Limits:

Review the API usage limits for your tier (free or paid).
Ensure your application complies with Giphy's terms of service.
Request an upgrade to the production API if you plan to launch your application publicly.

4. Integrate the API Key in Bubble:

In Bubble, go to "Settings" > "API".
Add a new entry with the key "api_key_giphy" and the value of your Giphy API key.
Save the changes and update your application.

---

5. Support & Documentation

To help you get the most out of this plugin, we provide:

[]📘 Full Documentation: Guides & integration walkthroughs []🛠️ Troubleshooting Help: Quick resolutions for common issues via our detailed FAQ. []🔄 Continuous Updates: Stay up to date with regular feature enhancements. []💡 UX Boost with Giphy: Access to millions of GIFs, stickers, and clips to enrich your application.

More Plugins by ANDAON (BubbleAI Labs)
Explore more powerful Bubble plugins from our team:
🧩 View All Plugins by ANDAON