Dynamic Content: Airtable Collections

Airtable can serve as a collection, allowing you to create Dynamic Pages (see Dynamic Content: Dynamic Pages) as well as enhance regular pages. Using a collection on a regular page is similar to how Connected Data is used with the site's Business Info (see Dynamic Content: Collections for Regular Pages). For more information on Connected Data with Business Info, see Dynamic Content: Business Info, Text, and Images.

For an overview on Collections and formatting guidelines, see Dynamic Content: 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 (for instructions, see the section Update an Existing Collection's API Key with a Personal Access Token in this article).

Limitations and Specifications per Collection Type

Internal Collections

Google Sheets

Airtable

External

Collection Number per Site

100

100

100

100

A single collection's data

N/A

20MB

20MB

20MB

Rows

500

N/A

N/A

N/A

Fields (columns)

150

100

100

100

Collection name character limit

50

50

50

50

Field name character limit

50

50

50

50

Page item URL character limit

350

350

350

350

Text field character limit

5000

N/A

N/A

N/A

Inner collection Rows

Not supported

Not supported

Supported

N/A

Image Collection

Supported

N/A

N/A

N/A

Update data

Site/content library publish

Automatically

Automatically every hour

Automatically every hour

Available Fields and Airtable's Corresponding Fields

Note

Airtable made changes to their attachment URL (URLs for images uploaded directly in Airtable) 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.

Data Type

Corresponding Airtable Field(s)

Examples

Notes

Plain Text

• Plain Text

• Number

• Long Text

• Currency

• Percent

• Rating

• Formula

• Autonumber

Welcome to my dentist office.

Standard text, can be used for widgets such as title tags and text widgets.

Notes on Airtable fields:

• Long Text: This field supports HTML and row breaks.

• Currency: Displays only the number, without $ sign.

• Percent: Displays with decimal and without % sign.

• Rating: Displays the number.

• Formula: The result of the formula can be a string.

Rich Text

Rich Text and Long Text

Welcome to my dentist office.

Airtable's built-in rich text formatting is not supported.

To include rich text elements, use HTML tags instead. For example, to add bold text, use the <b> tag:

<b>Bold Text</b>

Image

Attachment (when uploading an image in Airtable)

OR 

URL (when using an image's link)

https://irp.cdn-website.com/tr59jkwo/dms3rep/multi/name.jpg (when using the URL field in Airtable)

The editor's Data Type, Image, only supports a single image.

To upload an image in the editor and obtain its URL:

1. In the In the left panel, click Content, click Media Manager.

2. Upload an image or if it's already uploaded, locate it.

3. Hover over the desired image and click Select.

4. The image and additional information should appear. Under the larger thumbnail, click the name of the file (for example: name.jpg).

The image should open in a new tab with it's URL in the browser's address bar.

Link

URL

Example: https://goo.gl/maps/F81HPm4CBTQSTsJ5A

Pages will result in a 404 error if the URL contains a space at the beginning or end.

Number

Number

10,000

After selecting the Number Data Type, click Format to format the number.

Date & Time

Text

2021-10-06 16:12:00

Format: YYYY-MM-DD HH:mm:SS

For a complete list of date and time formats and how they display, see Class DateTimeFormatter.

• The site will always show in the UTC time zone, regardless of what is set in Airtable, even if the Use same time zone for all collaborators option is toggled on (in Airtable).

• To avoid time zone confusion between the site and Airtable, it is recommended to enable the option Use same time zone for all collaborators (located in Airtable) and select the GTM/UTC time zone.

This field can be used for sorting when using the filters or sort functionality in the Connected Data pop-up.

Business Hours

Text

SAT, SUN: 08:00-20:00; THU, FRI: 08:00-12:00;

-

Location

Text

846 Kerry Way, 90017, CA, Los Angeles, US

Format: streetAddress, postalCode, region, city, country

Video

URL or Text

https://www.youtube.com/watch?v=8EsYwAKxAFU

Vimeo, YouTube, and Dailymotion videos are supported (videos uploaded to the editor, aren't able to be added in Collections).

The following formats must be used:

• YouTube: https://www.youtube.com/watch?v=8EsYwAKxAFU)

• Vimeo: https://player.vimeo.com/video/77523904

• Dailymostion: https://www.dailymotion.com/embed/video/x70n2l8

Email

Email or Text

email@email.com

-

Phone

Phone number or Text

123456789

-

Social Accounts

Value

email: my@gmail.com; whatsapp: 123456; facebook: Website Builder

Format must be: name: value; name: value;

Supported social networks: email, whatsapp, facebook, twitter, instagram, youtube, linkedin, yelp, pinterest, waze, vimeo, snapchat, reddit, tripadvisor, foursquare, rss.

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.

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.

Inner Collection

Attachment

-

Images added through Airtable.

Connect an Airtable Collection

To connect an Airtable collection:

1. In the side panel, click CMS.

2. Click Collections, then click +New Collection.

3. Click Airtable.

4. Enter your Airtable Access Token and Example URL provided by Airtable.

5. Click Import Fields.

6. Define the correct data type for each field.

7. Click Connect Spreadsheet.

8. Define the correct data type for each field.

9. Click Continue.

Note

Due to API limitations, Website Builder will not import fields that do not have content in the first 10 rows.

Personal Access Token

To obtain a Personal Access Token:

1. Visit Airtable's page, Personal access token (if you are not already signed into Airtable, you will be prompted to do so).

2. Once on the Personal access tokens page, click Create token.

3. Enter in a name for the token.

4. In the Scopes section, click + Add a scope and select data.records:read (See the data in records).

5. In the Access section, click + Add a base and select the All current and future bases in all current and future workspaces option located under All Workspaces.

6. Click Create token.

7. Click the copy button located next to the token.

8. Return to the editor and paste the token into the Access Token field.

Example URL

To obtain the collection's Example URL:

1. Visit Airtable's page, API Reference (if you are not already signed into Airtable, you will be prompted to do so).

2. Once on the API Reference page, scroll down and select the desired collection.

3. In the side panel, click Authentication.

4. In the Curl tab, copy the link under EXAMPLE.

5. Return to the editor and paste it in the Example URL field.

Add a New Column to an Airtable Collection

1. In the side panel, click CMS.

2. Click Collections.

3. Click to open the Airtable collection.

4. Click +Add Field.

5. Select the data type from the Data Type drop down menu and type the name of the field in the Field Name space.

6. Click Refresh Data.

The new column appears in the available fields when connecting a widget.

Row Order

When using Airtable collections, the row order may appear random due to an API limitation on Airtable's side. Filters and sorting in Airtable are not recognized.

To manage the display order of collections in the editor, you can use the following methods:

• Filter & Sort Function: Utilize the Filter & Sort function within the Collection Display Widget (such as the Photo Gallery Widget or List Widget) to sort by Ascending or Descending order. For detailed information, see the Filter & Sort Function.

  Note

  Collections can only be sorted in Ascending or Descending order. For this method, the Airtable collection would need to have a column or field that can be sorted in this way. If it doesn’t, this method will not work, and adjusting the example URL will be necessary to maintain the desired order.

• Adjust the Example URL: If the records will be listed in the navigation, you can specify the Airtable View name in the example URL to maintain the desired order. This adjustment will also ensure the records are in the desired order for Collection Display Widgets. For more information, see Airtable Support or the section below, Adjust the Example URL

Filter & Sort Function

When connecting to a Collection Display Widget (such as the Photo Gallery Widget or List Widget; see Collection Display Widgets for more information), you can sort the collection to display in Ascending or Descending order.

To sort:

1. If the desired Collection Display Widget is not already placed on the site, add it to the page where you want it to exist.

2. Right-click on the widget to open the settings menu, and click Connect to Data.

   • If the widget already exists: right-click on the widget, hover over Connected Data, and select Change Connection.

3. If adding a new widget, select the collection from the Connect to drop-down menu. (Skip this step if the widget already exists.)

4. To sort:

   1. Click +Add sort.

   2. Click into the Sort by drop down list to select the field/column to sort by.

   3. Click into the Order drop down list to select the order (Ascending or Descending)

   The following are other options available as well:

   • Display. Select the number of items you want to display (for example, All, or 2).

   • Fixed Filters. The fixed filter will filter will display the records from the connected connection with the exact term entered.

   • Dynamic Filters. The dynamic filter maps 2 fields from 2 different collections (Dynamic page & Widget) to dynamically present the widget content.

Adjust the Example URL

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 the video below:

Set Airtable Collection Sync Frequency

By default, external collection data is synced every hour. However, due to API call limits on different platforms, this can quickly deplete available calls and lead to service disruptions. To prevent this, you can set how often your external collection data is synced. This allows you to ensure you do not exceed the amount of API calls your external collection platform allows.

To set how often external collection data is synced:

1. In the side panel, click CMS.

2. Click Collections and open the desired external collection.

3. At the top of the external collection under Sync data every, use the arrows to select a number, then use the dropdown menu to select either Hours or Days. By default, Automatic is selected. This is the default and means your collection data is synced every hour.

   Note that the sync timing only applies to the current external collection. You must set each external collection sync timing individually.

4. Click Save.

   

5. Click the three dot icon next to the collection and select Publish.

   

Warning

Airtable attachment URLs expire every 2 hours. If you set the sync frequency to more than 2 hours, images added as attachments may not display on the live site.

Update an Existing Collection's API Key with a Personal Access Token

To update an existing collection’s API with a Personal Access Token:

1. In the side panel, click CMS.

2. Click Collections, then click to open the desired Airtable collection.

3. Click Collection Settings located towards the bottom.

4. In the Access Token field, replace the API Key with a personal access token. The step can be found in the editor; for detailed instructions see the Personal Access Token section in this article.

5. Select the data type from the Data Type drop down menu and type the name of the field in the Field Name space.

6. Click Refetch Collection.

7. Click Done.

Publish Collection Data

The data in your collection (or new data added to the collection) does not display on the live site until the site has been published, or republished.

If you are not ready to publish or republish the site, but you want the data from a specific collection to display, you can publish just the specific collection and push the updated data live.

To publish a specific collection:

1. In the side panel, click CMS.

2. Click Collections, then click the three dot icon next to the desired collection.

3. Click Publish Collection.

   

Airtable Collection Troubleshooting

I received the error message ”We couldn’t connect. Please verify your details and try again.”

Possible causes for this error message include:

• You have reached your Airtable API limit. Check your plan and upgrade if necessary.

• You are using an outdated API key and need to update to a personal access token. See steps for how to update to a personal access token in Airtable.

Images from my Airtable collection are displaying as broken in the editor.

Possible causes for broken images include:

• You have reached your Airtable API limit. Check your plan and upgrade if necessary.

• If you are trying to display images in the Media Slider widget, check that in Airtable the field is set to "Attachments". If it is not, the Media Slider will not be able to recognize the images.

My Airtable collection records are not updating in the editor even after clicking Refresh.

Possible causes for Airtable collection records not updating include:

• You have reached your Airtable API limit. Check your plan and upgrade if necessary.

• You are using an outdated API key and need to update to a personal access token. See steps for how to update to a personal access token in Airtable.

• Check that any view names were not changed in Airtable, as this can break the connection between Airtable and Website Builder.

My Airtable rows are not creating new dynamic pages.

Check that any view names were not changed in Airtable, as this can break the connection between Airtable and Website Builder.