Contact us.
Oops! Something went wrong while submitting the form.
STEP #0
<!-- [Sheets CMS by Automated Labs] -->
<script type="module" src="https://sheetscms.automatedlabs.io/js/script-1.js"></script>
STEP #1
data-sheets-cms
Sheet ID,Tab Name
You can use the Data-Sheets-CMS on multiple elements within a single page, assigning different values to each attribute. Every Sheet CMS connection is discrete and separate.
STEP #2
data-sheets-cms-template
The template function populates your layout with rows of data from the Google Sheet. The value for this attribute should remain blank
STEP #3
data-sheets-cms-column
column_name
This attribute allows you to convert various types of content such as Text, HTML code, image sources, or links from Google Sheets into visual representations in Webflow. To implement the function, you can either insert the value of the column name or, for added functionality, add a comma+command to render image sources or link blocks.
Ex: Images value : column_name,src
Ex: Link value: column_name,herf
Addon
data-sheets-cms-header-row
1
This feature specifies which row in the spreadsheet is the header row. If you omit this attribute then it’s assumed to be the first row (1), but sometimes it’s the second or third row. Rows above the designated header row are discarded.
Addon
data-sheets-cms-loading
This element will display until the Google Sheets data has been loaded, and is useful as a loading indicator. The value for this attribute should remain blank.
Addon
data-sheets-cms-only
equals('Column Name')
This attribute takes a JavaScript expression that dictates which rows should be shown on the page. For example, it can be used to filter out all rows that don’t have a certain column, or all rows where a certain column has the value “FALSE”. You can also use JavaScript logical operators, like "&&" for “and” and "||" for “or”, to mix and match.
ex: equals('Column Name')
ex: not_empty('Column Name')
ex: equals('Column Name', 'String that cell should equal')
ex: equals('Column Name') || not_empty('Column Name')
ex: equals('Column Name') && not_empty('Column Name')
Addon
data-sheets-cms-show-if
equals('Column Name')
This attribute takes a JavaScript expression that dictates which rows should be shown on the page. For example, it can be used to filter out all rows that don’t have a certain column, or all rows where a certain column has the value “FALSE”. You can also use JavaScript logical operators, like "&&" for “and” and "||" for “or”, to mix and match.
ex: equals('Column Name')
ex: not_empty('Column Name')
ex: equals('Column Name', 'String that cell should equal')
ex: equals('Column Name') || not_empty('Column Name')
ex: equals('Column Name') && not_empty('Column Name')
Addon
data-sheets-cms-search
Column_name(s)
To enable search use the "data-sheets-cms-search" attribute on a text input inside a form element, outside the "data-sheets-cms-template". The Value of "data-sheets-cms-search" can be the column name, multiple columns (comma-separated), or left blank to search all columns.
Addon
Contact Us
Column_name(s)
Through Sheets CMS, you can create integrations for Google Sheets that make them more secure. Creating an integration involves providing the domain(s) that the integration will be used on, so that they can only be used on those domains. Be sure to include any development, staging, or testing URLs, and include both www and non-www subdomains if your website uses both.
Addon
Contact Us
Column_name(s)
The subpages feature allows you to create a separate page for each row in the spreadsheet based on a Webflow page template.
Addon
Contact Us
Column_name(s)
Pass your sheets data as a variable from row and execute custom code you wrote in Webflow.
Addon
Contact Us
Column_name(s)
Run advance API request with in Sheets CMS attributes.
Addon
Contact Us
Column_name(s)
Refreshes this specific instances' data. If no valid is provided, it defaults to refreshing every 15 seconds. Values can be any number of seconds (s) or minutes (m) above 15 seconds.