.gif)
Explore our comprehensive guide to seamlessly integrating Bubble.io with Shutterstock API. Unlock powerful features in easy steps.
The Shutterstock API is a service that provides programmatic access to the Shutterstock platform. It allows developers to integrate Shutterstock's vast library of high-quality content, including images, videos, and music, directly into their applications, websites, or platforms. The API provides functionality for various operations such as searching for assets, downloading assets, creating lightboxes, and managing user-accounts. This enables a seamless and personalized user experience, and opens new creative possibilities for enhancing digital projects.
Book a call with an Expert
Starting a new venture? Need to upgrade your web or mobile app? RapidDev builds Bubble apps with your growth in mind.
Sign up or log into your account on Bubble.io. If you're a new user, there’ll be an emphasis on learning how to use their platform. Consider going through their tutorial. Once you're comfortable navigating through the platform, proceed to the next step.
Click on the New App button to start setting up a new application. You'll need to give your app a name, choose a template (you can start from scratch if you prefer), and select a plan (you can start with a free one). After providing all the necessary information, hit the Create button.
Sign up or log in to your Shutterstock account. Navigate to the 'Developer' platform at Shutterstock.com and create a new app. Keep note of your 'Client ID' and 'Client Secret' because you'll be using it in the coming steps.
Go to the Plugins tab in your Bubble.io's app editor. Install the API Connector plugin. After installing the plugin, navigate to the API Connector and click on 'Add another API'.
Now, fill in the details for the API call:
Scroll down and you will find API Calls, click on 'Add another call'.
Now under New API Call, put in the below details:
Select GET as the Method. Under the URL section paste 'https://api.shutterstock.com/v2/images/search' which is the Shutterstock Search API. Now you have to provide the headers Key and Value:
Under the Parameters section:
Once everything is correctly set, click on the 'Initialize Call' button. If everything goes right, a successful reply from the server should be seen in the Response panel.
Go to the Design Tab, take an image box and place it anywhere on the design page. After placing the image box, select 'Insert Dynamic Data' and then choose 'Get Data from an External API’. Select the 'Shutterstock Discover' API that you just initialized. From the dropdown select 'data(1'st Item)' -> 'Assets' -> 'User Image'. Now the data from the Shutterstock Search API will be displayed in the selected image box.
In Bubble.io, head to the "Deploy" section. Here, you can either deploy the app live or test it. Choose the option that suits your needs, follow the prompts, and your app with Shutterstock API integrated will be live.
That's it! You've successfully integrated the Shutterstock API into your Bubble.io app. This process will allow you to search the Shutterstock database directly from your Bubble.io app. Remember to appropriately use the features provided by Bubble.io to further enhance your application.
Scenario: A design firm is looking to create an online visual content creation platform using Bubble.io. They need to provide a vast range of media assets, including photos, vectors, illustrations and more for their users to create eye-catching designs. To meet this requirement, they decide to integrate Shutterstock API to have access to high-quality images.
Solution: Integrating Bubble.io with Shutterstock API
Platform Creation: The design firm uses Bubble.io, a visual programming language tool to develop their web-based visual content creation platform. They customize the design and features to meet their user's needs.
Setting Up the Integration: The firm installs the Shutterstock plugin in Bubble.io and configures it using their Shutterstock API key. This allows them to access Shutterstock's library of high-resolution images.
Image Library Integration: Once the integration is in place, the platform will have an in-built image search feature, enabling the users to browse and select images from Shutterstock directly. The chosen images can be included in their designs with just a few clicks.
Workflow Setup: workflows are set up within Bubble.io to trigger when a user starts creating a design or editing an existing one. Once a user selects an image from Shutterstock, the workflow will fetch the high-resolution image and place it in the design editor.
Design Creation: Users can leverage Shutterstock's extensive library to beautify their designs. The platform offers the flexibility to choose images, change layouts, add text, and further customize their designs. All modifications are dynamically updated, enabling real-time design creation.
Usage Tracking and Analytics: The integration allows for tracking of images used, the number of designs created, user activity, and much more. The firm can analyze the usage data to gain insights into user preferences and behavior.
Benefits:
Expanded Resources: By integrating with Shutterstock, the design firm can offer a wide range of high-quality images, making it easier for users to find the perfect visuals for their designs.
Improved User Experience: The seamless integration provides an enhanced user experience by allowing users to search and use Shutterstock images directly within the platform.
Increased Efficiency: Automated workflows and dynamic updating of designs save time for users.
By integrating Shutterstock API with Bubble.io, the design firm can provide a more comprehensive, efficient, and user-friendly platform for creating stunning visual content.
.svg)
Delve into comprehensive reviews of top no-code tools to find the perfect platform for your development needs. Explore expert insights, user feedback, and detailed comparisons to make informed decisions and accelerate your no-code project development.
.svg)
Discover our comprehensive WeWeb tutorial directory tailored for all skill levels. Unlock the potential of no-code development with our detailed guides, walkthroughs, and practical tips designed to elevate your WeWeb projects.
.svg)
Discover the best no-code tools for your projects with our detailed comparisons and side-by-side reviews. Evaluate features, usability, and performance across leading platforms to choose the tool that fits your development needs and enhances your productivity.
Then all you have to do is schedule your free consultation. During our first discussion, we’ll sketch out a high-level plan, provide you with a timeline, and give you an estimate.
.png)
.png)
