Setup

Our recommended approach to using BaseBoosters Publish data on site builders such as Webflow, is to use our frontend JavaScript framework.

Copy this code below into the head of your page's HTML, or custom code section of your site builder, replacing the baseUrl and tables to match your AirTable Base.

In Webflow, this is under Page Settings -> Custom Code.

<html>
<head>
  <!-- other head content -->
  <script>
    var bbConfig = {
      baseUrl: "https://cdn.baseboosters.com/1a2b3c4d5e6f/v1.json",
      tables: ["blogPosts", "authors"],
      recordsPerPage: 10
    };
  </script>
  <link rel="stylesheet" href="https://cdn.baseboosters.com/ajax/1.1/bbpublish.css"></link>
  <script src="https://cdn.baseboosters.com/ajax/1.1/bbpublish.min.js"></script>
</head>

<!-- rest of your html page -->

 

Configuration Variables (bbConfig)

   
baseUrl The URL of the Base JSON file provided when you published your AirTable Base.
tables An array of the names of the tables to load from your Base.
recordsPerPage Enable pagination with this number of records per page.

 

Example:

var bbConfig = {
    baseUrl: "https://cdn.baseboosters.com/1a2b3c4d5e6f/v1.json",
    tables: ["blogPosts", "authors"],
    recordsPerPage: 10
};

 

Available Fields on the Page

   
[table name] An array of all the records in the specified table.
record The individual record matched (by the ID provided in query string parameter 'bbrec').
pageNo The current page number.
isFirstPage A true/false value indicating if this is the first page of records.
isLastPage A true/false value indicating if this is the last page of records.
nextPageUrl The URL to move to the next page of records (i.e. increase bbpage by 1).
previousPageUrl The URL to move to the previous page of records (i.e. decrease bbpage by 1).
[record].recordUrl The URL to load this individual record (i.e. sets the 'record' field to this record).
backUrl The URL to just load the list of record (i.e. 'record' field becomes null).

 

Example:

<div class="bb-show-when-loaded">

  <div data-bind="ifnot: record">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Author</th>
          <th></th>
        </tr>
      </thead>
      <tbody data-bind="foreach: blogPosts">
        <tr>
          <td data-bind="text: blogTitle">New York</td>
          <td data-bind="text: author[0].name">Author</td>
          <td>
            <a href="#" data-bind="attr: {href: recordUrl}">View Post</a>
          </td>
        </tr>
      </tbody>
    </table>
    <div data-bind="ifnot: isLastPage">
      <a href="#" data-bind="attr: {href: nextPageUrl}">Next Page</a>
    </div>
    <div data-bind="ifnot: isFirstPage">
      <a href="#" data-bind="attr: {href: previousPageUrl}">Previous Page</a>
    </div>
  </div>

  <div data-bind="if: record">
    <h2 data-bind="text: record.blogTitle">Title</h2>
    <p data-bind="html: record.blogPost">Post</p>
    <p data-bind="text: record.postDate">Date</p>
    <a href="#" data-bind="attr: {href: record.backUrl}">Back</a>
  </div>

</div>

Set this on the parent div or container element:

foreach: yourTableName # Replace with the name of your table 

<div data-bind="foreach: yourTableName"> 
  <div>Element that you want to be repeated</div>
</div>

Inside the repeated element you can bind values as follows:

Set the text to the yourTableName field:

text: yourFieldName 

<div data-bind="foreach: yourTableName"> 
    <span data-bind="text: yourFieldName"></span> 
</div>

 

Set the image source to the image URL:

attr: { src: yourImageField[0].url } 

<div data-bind="foreach: yourTableName"> 
<img data-bind="attr: { src: yourImageField[0].url }"></img> 
</div>

 

Set href of a link to load an individual record:

attr: { href: bbRecUrl } 

<div data-bind="foreach: yourTableName"> 
<a data-bind="attr: { href: bbRecUrl }"></a> 
</div>

When loading an individual record (via ?bbrec=XXX parameter in URL):

Set the text to the blogTitle field:

text: record.yourFieldName

Set the image source to the image URL:

attr: { src: record.yourImageField[0].url }

Set href of a link to go back from an indivual record:

attr: { href: record.bbBackUrl }