. Value is initially URL-encoded and should be decoded prior to sending in the access token request. Valid for two minutes and only for one-time use. Not present if user selects **Deny**. | ### 4\. Request access token[](https://developers.squarespace.com/commerce-apis/oauth#4-request-access-token) Code `POST https://login.squarespace.com/api/1/login/oauth/provider/tokens` The client makes a `POST /tokens` call with required and any optional parameters for an access token from Squarespace. Access tokens in the response are only valid for 30 minutes. For more information, see [Token expiration and long-term access](https://developers.squarespace.com/commerce-apis/oauth#token-expiration-and-long-term-access) . **Parameters** | Body | Requirement | Value | | --- | --- | --- | | `grant_type` | Optional | String; default is `authorization_code`; use `authorization_code` for your first request. For [long-term API access](https://developers.squarespace.com/commerce-apis/oauth#token-expiration-and-long-term-access)
, use `refresh_token` for all subsequent requests. | | `code` | Required if `grant_type=authorization_code` | Alphanumeric value of code passed to redirect URI. | | `redirect_uri` | Required if `grant_type=authorization_code` | String; redirect\_uri used for the `/authorize` endpoint. | | `refresh_token` | Required if `grant_type=refresh_token` | String; use application/json or application/x-www-form-urlencoded | | Header | | | | --- | --- | --- | | `Authorization` | Required | Follow the steps below to build the header value:
1. [Use your Squarespace OAuth 2.0 credentials](https://developers.squarespace.com/commerce-apis/oauth#1-register-the-client-and-obtain-oauth-20-credentials)
to construct a string in the format: `your_client_id:your_client_secret`
2. Encode the string from Step 1 into base-64
3. Add Basic
**Example**
your\_client\_id: abc123
your\_client\_secret: 12secret345
**Authorization after base-64**
Basic YWJjMTIzOjEyc2VjcmV0MzQ1 | | `Content-Type` | Required | String; use application/json or application/x-www-form-urlencoded | | `User-Agent` | Required | String; If you see an error referencing SEC-43, a User-Agent header is missing | **Example Response** JavascriptCode `{ "token_type": "bearer", "access_token": "T1|Rr0Wc95uu3cSeBh06yB...", // expires 30 minutes after it's created ... "access_token_expires_at": "1553532363.542", }` ### 5\. Make API requests[](https://developers.squarespace.com/commerce-apis/oauth#5-make-api-requests) After you obtain an access token, you can make API requests. **Endpoint:** `https://api.squarespace.com/...` **Authorization format:** `Bearer
...
`
### `data-sqsp-button`[](https://developers.squarespace.com/custom-code/html#data-sqsp-button)
An interactive button.
Currently used to identify the Button Block and Form Block buttons.
Code
` ... `
Text Block[](https://developers.squarespace.com/custom-code/html#text-block)
-----------------------------------------------------------------------------
### `data-sqsp-text-block-content`[](https://developers.squarespace.com/custom-code/html#data-sqsp-text-block-content)
A container enclosing the rich text content of a Text Block.
Code
`My Heading
Lorem ipsum dolor sit amet.
...
`
### `data-sqsp-image-classic-block-caption-container`[](https://developers.squarespace.com/custom-code/html#data-sqsp-image-classic-block-caption-container)
A container enclosing the caption of a classic editor Image Block in the Inline layout.
_Note: this element may not be the direct container of the caption text._
Code
` ...
`
### `data-sqsp-image-classic-block-subtitle`[](https://developers.squarespace.com/custom-code/html#data-sqsp-image-classic-block-subtitle)
A container enclosing the subtitle of a classic editor Image Block in non-Inline layouts.
_Note: this element may not be the direct parent of the subtitle `p` element._
Code
`Title
... ...
`
### `data-sqsp-image-classic-block-link-button`[](https://developers.squarespace.com/custom-code/html#data-sqsp-image-classic-block-link-button)
The `a` element of a classic editor Image Block in non-Inline layouts, the link is set to appear on a button.
Code
`Learn more`
Shape Block[](https://developers.squarespace.com/custom-code/html#shape-block)
-------------------------------------------------------------------------------
### `data-sqsp-shape-block-shape`[](https://developers.squarespace.com/custom-code/html#data-sqsp-shape-block-shape)
The shape element of a Shape Block.
Code
``
Accordion Block[](https://developers.squarespace.com/custom-code/html#accordion-block)
---------------------------------------------------------------------------------------
### `data-sqsp-accordion-block-divider`[](https://developers.squarespace.com/custom-code/html#data-sqsp-accordion-block-divider)
A divider element separating the Accordion Block items.
Code
`Subtitle
...My heading
My paragraph text
My heading
My paragraph text
My heading
My paragraph text
Hello, World!
` Next, `git commit` and `git push` it to your live site. Once you've pushed these changes, refresh your browser to see the change on your live site. It should look something like this:  Now that we've successfully made our first modification with the Developer Platform, we'll apply this new knowledge in more advanced ways in Part 2. Part 2 - Displaying Dynamic Content[](https://developers.squarespace.com/beginner-tutorial#part-2---displaying-dynamic-content) -------------------------------------------------------------------------------------------------------------------------------- In part 1 you made a simple change to your website's HTML. You can add any static HTML, CSS or JavaScript code to your Squarespace website. However, the power of the Squarespace Developer Platform is it's ability to display dynamic content. In other words, content from the Squarespace online editor. To display dynamic content, you'll need to use [JSON-T](https://developers.squarespace.com/what-is-json-t) , the template language used on the Squarespace platform. Let's try adding some JSON-T to your template. To begin, locate your site header in the `site.region` file. It should look like this: Code `Developer Platform Beginner Tutorial
{website.siteTitle}
{.passthrough?} {title} {.or} {title} {.end}
{.if excerpt} {excerpt} Read More {.or} {body} {.end}{.passthrough?} {title} {.or} {title} {.end}
{body}. Value is initially URL-encoded and should be decoded prior to sending in the access token request. Valid for two minutes and only for one-time use. Not present if user selects **Deny**. | ### 4\. Request access token[](https://developers.squarespace.com/oauth#4-request-access-token) Code `POST https://login.squarespace.com/api/1/login/oauth/provider/tokens` The client makes a `POST /tokens` call with required and any optional parameters for an access token from Squarespace. Access tokens in the response are only valid for 30 minutes. For more information, see [Token expiration and long-term access](https://developers.squarespace.com/commerce-apis/oauth#token-expiration-and-long-term-access) . **Parameters** | Body | Requirement | Value | | --- | --- | --- | | `grant_type` | Optional | String; default is `authorization_code`; use `authorization_code` for your first request. For [long-term API access](https://developers.squarespace.com/oauth#token-expiration-and-long-term-access)
, use `refresh_token` for all subsequent requests. | | `code` | Required if `grant_type=authorization_code` | Alphanumeric value of code passed to redirect URI. | | `redirect_uri` | Required if `grant_type=authorization_code` | String; redirect\_uri used for the `/authorize` endpoint. | | `refresh_token` | Required if `grant_type=refresh_token` | String; use application/json or application/x-www-form-urlencoded | | Header | | | | --- | --- | --- | | `Authorization` | Required | Follow the steps below to build the header value:
1. [Use your Squarespace OAuth 2.0 credentials](https://developers.squarespace.com/oauth#1-register-the-client-and-obtain-oauth-20-credentials)
to construct a string in the format: `your_client_id:your_client_secret`
2. Encode the string from Step 1 into base-64
3. Add Basic
**Example**
your\_client\_id: abc123
your\_client\_secret: 12secret345
**Authorization after base-64**
Basic YWJjMTIzOjEyc2VjcmV0MzQ1 | | `Content-Type` | Required | String; use application/json or application/x-www-form-urlencoded | | `User-Agent` | Required | String; If you see an error referencing SEC-43, a User-Agent header is missing | **Example Response** JavascriptCode `{ "token_type": "bearer", "access_token": "T1|Rr0Wc95uu3cSeBh06yB...", // expires 30 minutes after it's created ... "access_token_expires_at": "1553532363.542", }` ### 5\. Make API requests[](https://developers.squarespace.com/oauth#5-make-api-requests) After you obtain an access token, you can make API requests. **Endpoint:** `https://api.squarespace.com/...` **Authorization format:** `Bearer
{website.siteTitle}
{title}
{description}
{.end}` Code `Page Title
This is the page description.
` Handling an Array[](https://developers.squarespace.com/templating-basics#handling-an-array) -------------------------------------------------------------------------------------------- When scoping into a section with multiple items, commonly known as an array, JSON-T uses the syntax `{.repeated section key}{.end}` instead of `{.section key}{.end}`. Every piece of code within the opening and closing scope tags will be repeated for each item in the array. JavascriptCode `// JSON Data { "items" : [ { "title" : "First Item", "description" : "This is the first item description." }, { "title" : "Second Item", "description" : "This is the second item description." }, { "title" : "Third Item", "description" : "This is the third item description." } ] }` Code ` {.repeated section items}{title}
{description}
First Item
This is the first item description.
Second item
This is the second item description.
Third Item
This is the third item description.
{siteTitle}
{title}
{description}
My Website
Page Title
This is the page description.
{title}
{description}
{title}
{description}
There are no items here.
{.end}There are no items here.
` Using Dot Notation[](https://developers.squarespace.com/templating-basics#using-dot-notation) ---------------------------------------------------------------------------------------------- You can add any JSON value to your template by writing the key and its parent object in dot notation. This method of scoping only defines the scope for this one single value, so no end tag is required in JSON-T. Code `// JSON Data { "collection" : { "title" : "Page Title", "description" : "This is the page description." } }{collection.title}
{collection.description}
Page Title
This is the page description.
` Referencing the Scope[](https://developers.squarespace.com/templating-basics#referencing-the-scope) ---------------------------------------------------------------------------------------------------- Using scope reference, written as `{@}`, allows you to reference the key you're scoped into. This is like `(this)` in JavaScript. Code `// JSON Data { "collection" : { "title" : "Page Title", "description" : "This is the page description." } } {.section collection} {.section title}{@}
{.end} {.section description}{@}
{.end} {.end}Page Title
This is the page description.
` Using an If Statement[](https://developers.squarespace.com/templating-basics#using-an-if-statement) ---------------------------------------------------------------------------------------------------- If statements check to see if a section exists without scoping into that section. JavascriptCode `// JSON Data { "items" : [ { "title" : "First Item", "description" : "This is the first item description." }, { "title" : "Second Item", "description" : "This is the second item description.", "featured" : true }, { "title" : "Third Item", "description" : "This is the third item description." } ] }` Code ` {.repeated section items} {.if featured}{title}
{description}
{title}
{description}
First Item
This is the first item description.
Second item
This is the second item description.
Third Item
This is the third item description.