Note: About third-party integrations
These steps include actions performed in a third-party service. Specifications, behaviors, and any steps not covered in this article may fall outside the scope of our chat support.
The screens and specifications of the third-party service shown in this article are current as of April 2026. If the actual screens differ, please check the official documentation of each service for the latest information.
Step 1. Get the information needed for API authentication in microCMS
Tip: In microCMS, you can create APIs in either list or object format, but Studio.Design only supports the list format.
In microCMS, open the list screen of the content API you want to use.
Click the [API Preview] button in the upper right of the screen.
From the displayed API information, check the header key and value shown under [Headers].
Header key: X-MICROCMS-API-KEY
Value: A unique string issued by microCMS
Note: In microCMS, make sure at least one piece of content shown on the list screen is set to "Published." If content in microCMS is unpublished (in draft or no longer published), that content won't appear on your live site, in the editor, or in the live preview.
Step 2. Add API authentication in the Studio.Design Design Editor
In the Studio.Design Design Editor, register the credentials needed to access the microCMS API.
In Studio.Design, open the Design Editor.
From the left navigation in the editor, select the [Connect] icon.
Select the [API] tab.
Click [+] next to [Authentication], or the [+ Add] button, to add API authentication.
In the dialog that appears, enter the following:
Name: Set any name for the authentication.
Key: Enter the header key
X-MICROCMS-API-KEYfrom Step 1.Value: Enter the header key value you copied in Step 1.
Click [Save] to save the authentication information.
After saving, click the gray area outside the authentication dialog to return to the screen.
Step 3. Get the information needed for endpoint setup in microCMS
In microCMS, check the endpoint URL and content ID you'll use to fetch list or detail data.
For fetching list data
In microCMS, open the list screen of the content API you want to use.
Click the [API Preview] button in the upper right of the screen.
Copy the endpoint (URL) shown at the top of the screen.
For fetching detail data
When fetching detail data, you'll also need the content ID to use as a placeholder parameter, in addition to the endpoint URL.
Just as with list data, check the endpoint (URL) in microCMS.
Return to the content API list screen and select any single piece of content.
The content you select here is what will be displayed on the screen in the Studio.Design Design Editor.
On the detail screen of the selected content, copy the string shown under [Content ID].
Step 4. Set up the API endpoint
In the Studio.Design Design Editor, register the microCMS endpoint.
In Studio.Design, open the Design Editor.
From the left navigation in the editor, select the [Connect] icon.
Select the [API] tab.
Click [+] next to [Endpoint], or the [+ Add] button, to add an endpoint.
On the screen that appears, use the endpoint URL and parameter values from Step 3 to set the following:
Name: Set a name for the endpoint (for example: Blog List, Blog Detail).
URL: Enter the endpoint URL from Step 3. For detail data, add
/:idto the end of the URL from Step 3.List data: e.g.,
https://example.com/api/itemsDetail data: e.g.,
https://example.com/api/items/:id
Response type: Select [List] (list format) or [Detail] (article detail).
Authentication: Select the API authentication you added in Step 2. If you haven't registered one yet, click [+ Create new] to add it.
Request header (optional): Add headers such as
X-MICROCMS-API-KEYas needed.Placeholder parameter: Only when fetching detail data, enter the following:
Key:
:idValue: The [Content ID] string from Step 3
In the upper right of the screen, set the HTTP method to [GET], and click the [Test connection] button.
When the check succeeds, sample data from the API will be displayed on the right side of the screen.
Click [Save] to save the endpoint settings. Once saved, your API integration settings will be reflected on your live site right away.
Step 5. Use the API with dynamic elements
Once the integration is complete, you can display the fetched API data in a dynamic list, or use it on dynamic pages and dynamic modals. To connect data to an element, use the [Data] tab in the right panel.
For details on how to add each element and configure the settings, see the articles below.
Step 6. Link the fetched API variable data (properties) to box elements
Link the variable data (properties) fetched from the API to box elements on your pages or lists. For details, see the help article below.
Customize how property text is displayed
You can adjust how text properties appear—for example, by changing date formats or limiting the number of characters displayed.
For details, see Property string filters.
Gemini ChatGPT OAuth2.0 OAuth 2.0