Build a customizable search interface and go live with your Shutterstock integration in days, not months, with our new developer tool.

Speed and simplicity are critical factors for product integrations since engineering resources are finite and roadmaps are full.

To shave off time for your Shutterstock API integration, we created a new developer tool called Shutterstock UI. It delivers ready-to-use code snippets that are designed to cover the majority of user workflow scenarios for asset search while providing customization options to help you tailor your Shutterstock integration for your user’s needs.

In fact, we’ve already put Shutterstock UI to the test. Our developers needed to build a user workflow for a Shutterstock API integration that supports image search, browsing, and editing. The initial completion time was based on time spent on similar builds in the past. But with Shutterstock UI, we were able to complete development work 80% faster.


Shutterstock UI Features

Accelerate Your Integration with Shutterstock UI — Screenshot of a sample user interface created with Shutterstock UI

Currently, Shutterstock UI offers the following features to accelerate the development process for integrating asset search.

Search and content display capabilities

One of the first interaction users will have with a Shutterstock integration is the asset search process. Shutterstock UI helps you build a search interface quickly with the following capabilities:

  • Define the type of asset to be displayed (images or videos).
  • Set the number of assets returned in the search results.
  • Display or hide the search box. You can also set a default keyword for the search box.
  • Display a “Show More” button to retrieve additional search results.
  • Customize the height and width of the interface. Shutterstock UI provides a responsive interface by default.

Branding options

Shutterstock UI allows you to set the title and subtitle on your search interface. By default, the title and subtitle are dynamic components that display the user’s search query and number of assets returned respectively. But you can use the text area for branding purposes or to provide user instructions.

Additionally, the search box and button colors can be customized to fit your branding needs. 

Customize the next steps in the user workflow after the search process

Once a user has selected an image or video they’d like to use, you can define the logical next step in their workflow. This step can vary depending on each platform’s use case. For example, an email marketing platform might want to generate a preview of the image for an email header, while an ad creation platform might want to give users the option to add text, filters, or crop the image. 

To accommodate different workflow variations, Shutterstock UI allows you to set click events to trigger custom workflows. It offers three choices:

  • Editor: opens the image in Shutterstock Editor where users can quickly crop images, choose from designer-made text templates, upload their logo, and more. 
  • Custom: you can input custom code to design a workflow that makes sense for your users. For instance, you can trigger a custom animation, preview, or a licensing event. 
  • Default: opens the selected image on shutterstock.com. 

How to access Shutterstock UI

Accelerate Your Integration with Shutterstock UI — Screenshot of Shutterstock UI Wizard

Shutterstock’s UI is free. You can test it with this configuration wizard. For additional documentation, please refer to this page in our developer docs.

Please note that you need to create a Shutterstock account and an application in order to get your API key, which is needed to initiate Shutterstock UI. Creating a Shutterstock account and application are both free.

If you don’t have a Shutterstock account or application, you can click here to create both

If you have a Shutterstock account but haven’t created an application, you can click here to create your application. Alternatively, you can create new applications by logging into your Shutterstock account, clicking on the profile icon on the upper right corner, then clicking on the account details tab. On the left column on your account details page, you’ll find a tab called Developers which will have a Create New App button.


What’s next

Accelerate Your Integration with Shutterstock UI — Illustration of development components floating next to a desktop displaying two images on its screen
Image by Inkong Boutchalern.

We aim to keep the Shutterstock platform open for developers and businesses to innovate with our content and technology. To that end, providing comprehensive developer tooling that simplifies the integration process is an important part of our roadmap.

Currently, the Developer Platform team is working with developers to define and prioritize upcoming features for Shutterstock UI. If you have questions or suggestions, please let us know on our feedback forum.


Featured image by Softulka.