Airtable can be used as a collection for generating Dynamic Pages.
Note
Airtable is phasing out API keys and replacing them with personal access tokens.
Starting August 1st, 2023 a personal access token must be used for new collections.
Warning
Effective February 1st, 2024, API keys will be completely phased out. At this time, collections that have not had the API key switched to a personal access token may encounter disruptions.
Airtable collections have the following limitations:
| Airtable |
Collection Number per Site | 100 |
Fields (columns) | 100 |
Collection name character limit | 50 |
Field name character limit | 50 |
Page item URL | 350 characters |
Update data | Automatically every hour |
To create an Airtable collection:
In the left panel, click Content, click Collections, and then click + New Collection.
Click Airtable.
Enter your Airtable API credentials.
API Key
Click Airtable account page (located in step 1 of How to connect with Airtable).
A new tab will open to your Airtable account page (you may need to sign in).
Once signed in, visit airtable.com/create/tokens (if not signed in to Airtable, you will receive their 404 page).
Once on the Personal access tokens page, click Create token.
Enter in a name for the token.
In the Scopes section, click Add a scope.
Select the data.records:read (See the data in records) option.
In the Access section, click Add a base.
Select the All current and future bases in all current and future workspaces option located under All Workspaces.
Click Create token.
Click the copy button located next to the token.
Return to Website Builder and paste the token into the API key field.
Example URL
Click Airtable API page (located in step 2 of How to connect with Airtable).
A new tab will open In Airtable (you may need to sign in).
Once on the API Reference page, scroll down and select the desired table.
Click Authentication (located in the side panel).
Copy the link under EXAMPLE (located in the Curl tab).
Return to Website Builder and paste it in the Example URL field.
Click Import Fields.
Define the correct data type for each field.
Click Continue.
Update an Existing Collection's API Key with a Personal Access Token
To update an existing collection’s API with a Personal Access Token:
In the left panel, click Content, click Collections, and then the desired Airtable collection.
Click Collection Settings located towards the bottom.
In the API Key field, replace the API Key with a personal access token.
To retrieve a personal access token:
Click Airtable account page (located in step 1 of How to connect with Airtable).
A new tab will open to your Airtable account page (you may need to sign in).
Once signed in, visit airtable.com/create/tokens (if not signed in to Airtable, you will receive their 404 page).
Once on the Personal access tokens page, click Create token.
Enter in a name for the token.
In the Scopes section, click Add a scope.
Select the data.records:read (See the data in records) option.
In the Access section, click Add a base.
Select the All current and future bases in all current and future workspaces option located under All Workspaces.
Click Create token.
Click the copy button located next to the token.
Return to Website Builder and paste the token into the API key field.
Click Refresh Data.
Click Done.
Supported Fields
Note
Airtable made changes to their URL attachments (such as links and images) causing them to expire after two hours. Website Builder is not affected by this change since it pulls data from Airtable on an hourly basis.
The following table outlines the supported Airtable fields, the corresponding Website Builder fields, and examples.
Website Builder Field | Airtable Field | Example |
Text | Rich text | Welcome to my dentist office. Note Using Airtable's built-in link rich text field is not supported. For example, to add a link, use the HTML |
Text | Long text | Note This field supports HTML and row breaks. |
Text | Plain text | welcome to my office |
Numeric | Number | 10,000 Note Must only contain numbers, and periods (for decimals). |
Boolean | Checkbox | Note Only for custom widgets. |
Image | Attachment with one image | Image added through Airtable. |
Link | URL | |
Video | URL or text | |
Phone | Phone number or text | 123456789 |
Email or text | ||
Location | Text | streetAddress, postalCode, region, city, country 846 Kerry Way, 90017, CA, Los Angeles, US |
Business Hours | Text | SAT, SUN: 08:00-20:00; THU, FRI: 08:00-12:00; |
Inner collection that contains one image field | Attachment with multiple images | Images added through Airtable. |
Text | Number |
|
Text | Currency | Note Displays only the number, without $ sign. |
Text | Percent | Note Displays with decimal and without % sign. |
Text | Rating | Note Displays the number. |
Text | Formula | Note The result of the formula can be a string. |
Text | Autonumber |
|
Social account | Value | Must be formatted as name: value; name: value; email: [email protected]; whatsapp: 123456; facebook: Website Builder; Note Supported social networks: email, whatsapp, facebook, twitter, instagram, youtube, linkedin, yelp, pinterest, google_my_business, waze, vimeo, snapchat, reddit, tripadvisor, foursquare, rss.
|
Date & Time | Text | The default structure is YYYY-MM-DD HH:mm:SS, which displays as 2021-10-06 16:12:00. For a complete list of date and time formats and how they display, see Class DateTimeFormatter. Note
|
Multi Select | Multi Select | After defining the field as Multi Select, click Options to add options. Each row in the collection can be assigned one or more of the options you created. Note This field can be used to filter the displayed collection in widgets, such as photo gallery, list, accordion, and custom widgets that connect to collections. |
Note
Due to API limitations, Website Builder will not import fields that do not have content in the first 10 rows.
Row Order
When using Airtable collections, the row order is being pulled in randomly due to an API limitation on Airtable's site. We ignore filters or sorting in Airtable.
To pull the row order in the same order that exists in Airtable, including filters and sorting, add the Airtable View name to the example URL that you are using to import their collection.
To add the view, after the example URL is added, add '?view=View Name'
. The view name is case sensitive and should be typed exactly how it's written in Airtable.
Warning
Deleting or changing the view name after importing the collection will break the connection.
The following is an example of the URL before adding the view name:
https://api.airtable.com/v0/appbiL1pCyvFcW8WG/Feedback%20Session?view=Main%20View
The following is an example of the URL after adding the view name:
https://api.airtable.com/v0/appbiL1pCyvFcW8WG/Feedback%20Session?view=Main View
For more information on adding the view name to the URL, see this video.