How to embed Airtable
Airtable is an easy-to-use online platform for creating and sharing relational databases. You can create a table and embed it into your Unicorn platform site.
In this guide, I'll show you how to do it.
![Airtable embedded in a website](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/penpal-email-client-for-person_28fkcy.png)
In the table that you want to embed into your page, click on the Share view button.
![Airtable table settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/untitled-base-main-view-airtab_1tefhm.png)
Then click on Embed this view on your site.
![Options for sharing on Airtable](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09214_fwfwoz.png)
Here you will find the embed code. You should copy it.
![Code for embedding Airtable](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/airtable-embed-grid-view-2022-_18jlz9v.png)
Now, in the place on the page where you would like to embed the table, insert the Сustom HTML component.
![Custom HTML component](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/unicorn-platform-builder-2022-_hbg08v.png)
Kindly paste the previously copied code into the component editor.
![Inserting the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09241_1ovewhz.png)
And that's it. You embedded Airtable into your page!
![Airtable embedded natively](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-05-at-14081_us2vvx.png)
Thus, the table will be embedded in the full width of the page. You can center the table by adding a small code snippet to the embed code: <div class="container"> embed code </div>
![Additional code to embed Airtable in the center of the page](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/unicorn-platform-builder-2022-_1rx7l78.png)
If you're wondering how to resize a table, please, read the next.
Add some another default class to the container class: container—large, container—mid, or container—small, you can fine-tune the width:
<div class="container container--large"> embed code </div>
<div class="container container--mid"> embed code </div>
<div class="container container--small"> embed code </div>
For example:
![Code customized to change table width](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09144_pdohm6.png)
The height can be changed directly in the code provided by Airtable. By changing the value of the height attribute, select the ideal one for you.
![Editing the code provided by the Airtable](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09160_vtnitk.png)
I hope this guide was clear and helpful. If something is unclear or you face any difficulties, please contact us.
In this guide, I'll show you how to do it.
![Airtable embedded in a website](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/penpal-email-client-for-person_28fkcy.png)
How to embed Airtable?
Step 1. Find and copy the embed code
In the table that you want to embed into your page, click on the Share view button.
![Airtable table settings](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/untitled-base-main-view-airtab_1tefhm.png)
Then click on Embed this view on your site.
![Options for sharing on Airtable](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09214_fwfwoz.png)
Here you will find the embed code. You should copy it.
![Code for embedding Airtable](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/airtable-embed-grid-view-2022-_18jlz9v.png)
Step 2. Embed into your website
Now, in the place on the page where you would like to embed the table, insert the Сustom HTML component.
![Custom HTML component](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/unicorn-platform-builder-2022-_hbg08v.png)
Kindly paste the previously copied code into the component editor.
![Inserting the embed code](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09241_1ovewhz.png)
Done!
And that's it. You embedded Airtable into your page!
![Airtable embedded natively](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-05-at-14081_us2vvx.png)
Thus, the table will be embedded in the full width of the page. You can center the table by adding a small code snippet to the embed code: <div class="container"> embed code </div>
![Additional code to embed Airtable in the center of the page](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/unicorn-platform-builder-2022-_1rx7l78.png)
If you're wondering how to resize a table, please, read the next.
How to resize a table? (section for geeks 🤓)
Width
Add some another default class to the container class: container—large, container—mid, or container—small, you can fine-tune the width:
<div class="container container--large"> embed code </div>
<div class="container container--mid"> embed code </div>
<div class="container container--small"> embed code </div>
For example:
![Code customized to change table width](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09144_pdohm6.png)
Height
The height can be changed directly in the code provided by Airtable. By changing the value of the height attribute, select the ideal one for you.
![Editing the code provided by the Airtable](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/screenshot-2022-04-07-at-09160_vtnitk.png)
I hope this guide was clear and helpful. If something is unclear or you face any difficulties, please contact us.
Updated on: 08/04/2022
Thank you!