Recently, I created a cover image creation tool called Cover Paint. It uses Unsplash as the background image. However, the demo version only allows 50 requests per hour, which is not enough. Therefore, I need to apply for the Production version, which allows 5000 requests per hour.
Because I didn't carefully read the requirements for the application at first, it took three or four attempts to pass the review. This article will record the specific process.
Creating an App#
- Go to the Unsplash Image API website, register and log in, and click the "Your apps" button.
- Click "New Application" to create a new application.
- Agree to all terms and enter the application name and description.
- At this point, the new demo version of the application has been created.
Using the Unsplash API#
In the frontend, I use unsplash-js, the official library provided by Unsplash. You can refer to the official documentation for specific usage.
The required key can be found on the application page created in the previous step.
Applying for the Production version#
You can preview the Unsplash API Guidelines. It is recommended to complete the Unsplash-related parts of your website or other types of products before applying, as 50 requests per hour is sufficient for development. The application may require submitting code screenshots. Please note that the product name should not be similar to Unsplash.
Adding information about the image author#
Each image needs to have prominent information about the author displayed at the bottom or other locations. Clicking on the author's name should redirect to the corresponding Unsplash photographer's profile page (Unsplash provides all the necessary information about the image, including the photographer, through unsplash-js).
Note: You need to upload a screenshot (preferably a video) here. If it is a web application, you need to hover over the photographer's name link, and the browser's bottom left corner will display the redirect link. If it is a different type of application, you need to add a code screenshot to indicate that clicking on the photographer's name will redirect to the corresponding webpage. And the link must include the utm parameters.
For example: utm_source can be filled in with the name of the created application.
<a
target="_blank"
href={`https://unsplash.com/@${user.username}?utm_source=cover-paint&utm_medium=referral`}
>
{user.name}
</a>
Tracking downloads#
If the download count is 0, the application will not be approved.
In my project, for example, when you click on the image and add text information, you need to track this download behavior. unsplash-js provides an API for this, unsplash-js-downloadtrack. Call this API when the download is complete.
You can provide a screenshot here, and you need to trigger this download tracking behavior during development because the download data may not be available until the next day.
const downloadCover = async () => {
const ref = coverRef?.current as HTMLDivElement;
if (ref === null) {
return;
}
setDownloading(true);
toPng(ref, { cacheBust: true })
.then((dataUrl) => {
const link = document.createElement("a");
link.download = `coverImage.png`;
link.href = dataUrl;
link.click();
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setDownloading(false);
});
if (unsplashInfo) {
await trackDownload(unsplashInfo.downloadLocation);
}
};
Adding application description#
The final step is to provide a complete and detailed application description on the application page, and provide screenshots or videos of the project as much as possible. Describe what kind of application you are creating and how you are using the Unsplash API in the project. If possible, provide a demo URL for the project.
Here is how I filled it out.
By following these steps, you should be able to apply for the Production version, and the review process is usually quite fast (usually within 48 hours). If the application is not approved, you can continue to supplement the required information based on the email notification.