> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Airtable Details # Getting Started The **Airtable Details** element allows you to populate data from an **Airtable base through Airtable’s API.** With the Airtable details element, you will be able to create a customizable details page for the data in your Airtable base and showcase them using this element. Users can choose from our in-built templates or start from scratch and build their own UI. This article will cover how a user can add and edit the Airtable Details element. --- # Adding the Airtable Details element Follow the steps below to add **Airtable Details** to your site. - Click on the `+` button labeled **Add Element or Container** within an empty container - From the **Elements** tab, select **Airtable Details** element **Refer to the Screenshot below:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_dwippq.png) --- # Configuring Airtable To configure Airtable, follow the instructions and steps given below: **1.** Expand the **Airtable Connection** option in the **Airtable Details editor** and click on the `+` button under the **Token** option to add an Airtable token. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-50_w3sxjz.gif) **2.** To generate an Airtable token, go to the **Airtable dashboard**. From here, click on the **Account (1️⃣)** option and select the `Developer hub` **(2️⃣)** option, as shown below. Or you can go to this link- https://airtable.com/create/tokens ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1xvv7r1.png) **3.** Click on the **Create Token** button and then follow the steps shown in the video below: ${youtube}[Airtable Token Configuration](VXs0SUCTJfY) **4.** Go back to the builder and click on the `+` button under the `Token` option. Then, give it a **Name** and paste the **Token** you copied in the previous step. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-13-at-60_830edw.gif) **5.** Then, choose the Airtable details layout style using the `Select Layout` option. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_vmoca3.png) --- # Setting Up the Airtable Details Element To set up the Airtable Details Element and configure your Airtable Base, follow the steps listed down below: - After configuring Airtable, select your Airtable base - Choose any data table from your Airtable base - Choose any layout from the dropdown # Opening an Airtable Details Page from other Airtable Elements You can open an entire **Airtable Details** page by connecting it to another Airtable Element. Here is a typical use-case scenario: - You have various products on an Airtable base - You want to showcase them on your website - You want people to be taken to a customized page upon clicking on an item they want to view - To do this, go to your CMS Dashboard, click on Design and Pages - Choose the Pages option from your website builder, go to any existing page or create a new page. - Add a new section on the page and add the Airtable Details element - Configure it with the Airtable base - Populate data from your Airtable base into the Airtable Details element - On a different page, add a new section and add any Airtable element, for this scenario, let us pick the Airtable Grid Element - Configure the Airtable Grid Element and load data from the same Airtable base as the Airtable Details element - Expand the Layout Configuration accordion on the Airtable Grid editor - Choose the **Action Type** as Page - Under the **Select Page** option choose the page where your Airtable Details element is located - Done! **How the above steps should work:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-01-18-at-41_1od5eib.gif) # Fields This option lets you change the fields inside the Airtable Details element. There are two types of fields that you can make changes to: - Default Fields (empty in the ‘Start from Scratch’ layout) - Custom Fields Users can add their own fields aligning with the columns on their Airtable base. The example below shows how a user can add fields when they use the “Start from Scratch” layout on the Airtable Details element: ${youtube}[Airtable Details](hR8Wa_DzlwU) # Layout Styles This option lets you customize the element, it consists of the following editing options: - General Style - Main Section Style - Sidebar Style In this example, we are using the ‘Profile Details’ layout, refer to the videos below:- 1. **General Style** ${youtube}[Airtable Details](iYjS2FvhcVM) 2. **Main Section Style** ${youtube}[Airtable Details](WnxPOW8IMBI) 3. **Sidebar Style** ${youtube}[Airtable Details](q8rAq2jB18s)