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 the beginning, it took three or four attempts to pass the review. This article will record the specific process.
Create 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.
Use the Unsplash API#
In the frontend, I used 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.
Apply 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. 50 requests per hour is enough for development. Because the application may require submitting code screenshots. Please note that the product name should not be similar to Unsplash.
Add information about the image author#
The information of the author who owns each image needs to be prominently displayed at the bottom or other locations. Clicking on the author's name should redirect to the corresponding Unsplash photographer's profile page (Unsplash-js provides all the necessary information about the image, including the photographer).
Note: You need to upload a screenshot (preferably a video) here. If it is a web application, you need to hover the mouse over the photographer's name link, and the link address for redirection will appear in the lower left corner of the browser. If it is another 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 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>
Track downloads#
If the download count is 0, the approval will not pass.
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 tracking download 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);
}
};
Add application description#
The final step is to fill in a complete and detailed application description on the application page, and provide screenshots or videos of the project as much as possible. You need to explain what kind of application you are creating and how you are using the Unsplash API in the project. If possible, you can provide a demo URL for the project.
This 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 prompts.