The web clipper block allows you to turn content from a web page into a new record in an Airtable base using the Airtable web clipper browser extension. Gather inspiration, collect research, and streamline your work processes as you browse the internet—without having to leave whatever web page you’re currently on!
Each web clipper block lets you configure a single clip action, which determines what content from a web page will be added to the fields of your new Airtable record. Once you or one of your collaborators has configured a web clipper block, you can add the associated clip action from that web clipper block to your browser extension.
Your browser extension can support multiple clip actions from multiple bases. Also, collaborators with edit access to the same web clipper block can add the same clip action to their individual browser extensions, allowing multiple collaborators to contribute to the same collection of clipped content!
Adding and configuring the web clipper block
To start adding content from the web to one of your Airtable bases, you need to:
- install the Airtable web clipper browser extension
- add at least one clip action from a web clipper block to your browser extension: either a clip action that you’ve configured yourself, or a clip action configured by another collaborator in a base you have edit access to
Installing the Airtable web clipper browser extension
The Airtable web clipper browser extension lets you select a clip action to create a new record in an Airtable base, using content from whatever web page you’re currently looking at. It appears as an Airtable logo button to the right of your address bar.
To get started, open Chrome and go to the Airtable Chrome extension, then click the blue Add to Chrome button to install the Airtable web clipper browser extension.
Please note that at this time, web clipper is only available for Google Chrome.
Creating a new clip action
To create a new clip action, go to the base into which you’d like to add new clipped records and add a new web clipper block.
After giving your new clip action a name and picking a table to add records to, you can click the Add to extension button to add your newly created clip action to your browser extension, or click Skip for now to jump to customizing your clip action.
Customizing a clip action
Customizing your clip action lets you choose what kind of content goes into different fields when you create a new record with the browser extension.
You can either set a default value for a field (which will prefill the new record with information from the web page) or select None for the default value. If you don’t select a default value for a field, you can fill in that field with your own content (like freeform text or a screenshot of the web page) before creating the new record.
Once you’ve set up all the fields you’d like, click the Add to extension button (if you didn’t already do so in the previous screen). You’re ready to start clipping!
Using the browser extension
While browsing a web page, click on your web clipper browser extension button to bring up the list of clip actions you’ve added, then choose one.
This will give you a chance to look over your content before making a new Airtable record.
Depending on how you customized your clip actions, some fields might be prefilled with the default values of the web page (like the page title or URL) while others might be blank. You can even create default values from CSS selectors. If you’d like, you can edit any of the prefilled values. For any fields in the clip action that don’t have designated default values, you can fill in relevant content.
When you’re done, just click the Add record button. You can see the new record you created by clicking the Show in Airtable button, or keep browsing.
Managing clip actions
Adding a clip action created by another collaborator
If one of your collaborators has already set up a clip action in a base for which you have edit access, you can add that clip action to your own browser extension. All you have to do is go to the web clipper block associated with that clip action and click the Add to extension button. You and your collaborators can use this to share all your clipped content in the same table.
Any changes made to a clip action configuration in a web clipper block will automatically be reflected in the browser extension for every collaborator who’s added that clip action, keeping your whole team up-to-date with any changes.
Removing clip actions
To remove a previously added clip action from your browser extension, open the browser extension, select a clip action you’d like to remove, open the menu button (the three dots in the upper right-hand corner), and select Remove clip action.
Importing and exporting clip actions
When you open up the block to create a new clip action recipe, you’ll now see the option to import or export the recipe.
This will allow you to export a JSON file that reflects your clip action’s “recipe” (i.e. the fields and the CSS selector, if used) or import somebody else’s recipe.
When you import a recipe, you’ll be asked to map each field from the recipe to a field in your table. Make sure that you have the correct field types (e.g. if the original recipe maps a particular value to an attachment field, you’ll need to have an attachment field in your table). Once you’ve mapped the fields, you can load the clip action into the browser extension and you’re ready to go!
For some examples, check out the community forum here!
Configuring web clipper field types and default values
The web clipper currently supports several field types and different default values can be configured depending on what those field types are.
Note that many websites have terms of service restricting you from capturing information from their sites. Please always review and adhere to the terms of service of those sites before using the Airtable web clipper on any page you visit.
Text-based fields
Single line text, long text, phone numbers, email and URL fields are all supported field types. When configuring the default values for these field types, you have the following choices:
- None (no initial value)
- Page title (e.g. “Airtable Universe”)
- Page URL (e.g. https://airtable.com/universe)
- Selected text (text highlighted on the page at the time that the web clipper button was clicked)
- CSS selector (e.g.
.inline.t-24.t-black.t-normal.break-words)
In the web clipper browser extension, any configured default value will be automatically populated as soon as you open the clip action. You can choose to override the default value by typing your own values.
Select fields
Both single select fields and multiple select field types are supported. When configuring the default values for these field types, you have the following choices:
- None (no initial value)
Within the web clipper browser extension, the select field options will have the same colors that you defined in the field configuration.
Number-based fields
Number, currency, and percent fields are all supported field types. When configuring the default values for these field types, you have the following choices:
- None (no initial value)
- Selected text (text highlighted on the page at the time that the web clipper button was clicked)
- CSS selector (e.g.
.inline.t-24.t-black.t-normal.break-words)
In the web clipper browser extension, any configured default value will be automatically populated as soon as you open the clip action. You can choose to override the default value by typing your own values.
As you type a number in the web clipper extension, any formatting (decimal places, percent signs, currency symbols) will be applied when you move to another field.
Collaborator fields
Adding a collaborator field to your clip action allows you to select one of the collaborators in your base for the record. When configuring the default values for this field type, you have the following choices:
- None (no initial value)
Your selections in the web clipper browser extension have the collaborator name and image just like they appear in the Airtable UI.
Attachment fields
You can use an attachment field to capture one or multiple images from a web page. When configuring the default values for this field types, you have the following choices:
- None (no initial value)
- Social media image (first image on the page)
- CSS selector (e.g.
.inline.t-24.t-black.t-normal.break-words)
In the web clipper browser extension, the image will be automatically added if you have a default value configured. You can override the default value or add new images on the extension using one of three image field inputs.
The currently supported attachment field inputs are:
- Add screenshot, which will allow you to capture a selected portion of your screen by clicking and dragging your cursor to highlight a rectangular section of the web page
- Add page screenshot, which will capture a full-page screenshot of the web page you’re currently on.
- Add image from page, which will capture an image by clicking on it. As you mouse over images, the image will be highlighted in blue if it can be selected