Business Directory Widget

The Business Directory widget offers a comprehensive solution for displaying an interactive directory of business listings. A sidebar menu helps guide site visitors to relevant content with powerful tools like search, categories, tags, filtering and sorting.

New directory entries may be added to the widget option panel manually, but power users will love using Airtable to manage their listings. By connecting the widget to an Airtable, directory listings can be modified quickly and efficiently; with all changes automatically updated in the directory without the need to open the editor or republish the website.


Demo: https://demo.wocode.com/business-directory

Tutorial Videos

Setup

WIDGET PLACEMENT

  • Place the widget where you would like the directory to appear on the page.
  • If you would like the directory to display full width, set the row it’s placed in to be a full bleed row (Row > Design Tab > enable Full Bleed Row)

WIDGET OPTIONS (CONTENT)

  • Unique ID: Unique IDs must be entered when using multiple instances of the Business Directory widget.
  • Grid Columns: Defines the number of columns the directory entries will be displayed in on the desktop layout.
  • Tablet Grid Columns: Defines the number of columns the directory entries will be displayed in on the tablet layout.
  • Item Per Page: The number of items that will be displayed per page. Each page is accessed via the pagination on the bottom of the grid.
  • Directory Entries (Manual Entry): This option allows you to create directory listings. Note that this option provides the “manual” method for adding directory listings. For a more powerful and dynamic option, see the Airtable sections below. From within each Directory Entry, you will find the options to add images for each directory item as well as other information such as a description, an address, contact information and more. When connecting the widget to a collection, this field is greyed out and will be controlled by the content within the collection.
  • Filters Position: Set whether the filtering panel displays on the left or right side of the widget.
  • Category Filter: Enables or disables the category option within the filtering panel of the widget.
  • Tags Filter: Enables or disables the tags option within the filtering panel of the widget.
  • Customize Labels: Customize Labels contains extensive labeling options – almost every label in the directory can be customized. This feature also adds multi-language support.

WIDGET OPTIONS (DESIGN)

The Design tab of the widget contains extensive styling options. Almost every element of the business directory can be customized. The majority of these settings are labeled with their exact function and are self-explanatory, and will not be discussed individually here. However, there are a few unique settings we will mention…

  • Grid Gap (px): This will adjust the padding between the cards.
  • Modal Styling: While this section is packed with many styling options for the widget’s modal, one option should be mentioned specifically. The Clone Font Family From Card option inherits the font from the directory listing cards. This is an important feature, as full font styling within the modal is not possible.

EDITING YOUR AIRTABLE SPREADSHEET

While the widget can be used with manual entries directly from the content tab, this widget was designed to take advantage of the powerful dynamic aspects of Airtable. Choosing to use an Airtable to create directory listings means that the directory can be edited and updated by simply visiting your Airtable. All changes made to the Airtable will auto-populate in the directory on your site, without the need to republish the site or even enter the site builder. Additionally, Airtable updates can be made easily by clients.

Find our Business Directory Airtable Template here: https://airtable.com/shryjwmV5IljGh3qk

While editing the airtable spreadsheet template for the Business Directory is very straight forward, there are a few fields we will need to address specifically.

  • Categories: A directory item can be assigned to multiple categories at once. Simply separate each category using a comma (ie: cake, cookie).
  • Tags: A directory item can be assigned to multiple tags at once. Simply separate each tag using a comma (ie: cake, cookie).

  • Business Hours: Business Hours must use specific formatting when being added to the spreadsheet. The day must end with a colon followed by the time and ending with a semi-colon. Example: MON: 8:00am – 6:00pm;TUE: Closed;WED: 8:00am – 6:00pm;THU: 8:00am – 6:00pm;FRI: 8:00am – 6:00pm;SAT: Closed;SUN: Closed;

CONNECTING AIRTABLE SPREADSHEET TO COLLECTION

  • You will need an Airtable account in order to edit the template (no Airtable account is required for viewing the template).
  • Follow the “Airtable Content Template” link in the widget panel to open the template, or click here.

  • The template is view-only and cannot be edited as-is. Make a copy of the template: Use this data > (select workspace) > (select base) > Create table.

  • Name the new copy by clicking the text Grid View on the top of the new sheet.

  • Create Categories and Tags: It may be confusing initially how to create categories in the gallery. These are created when they are entered into the spreadsheet in the category and Tags columns. You may place items in multiple categories by listing multiple categories in the Category cell. List the category names with commas between categories. A space is required after the comma. Example: Cars, Trucks, Planes.

CREATING COLLECTION USING AIRTABLE

This section explains the very important process of creating a collection in your site which is connected to your Airtable spreadsheet.

Within the builder navigate to Content > Collections

Click “+New Collection.”

Select Airtable and follow these steps:

  • Click the blue hyperlink that reads "Airtable account page"

  • Your Airtable account page will open in a new tab, from there click the "Go to developer hub" button.

  • Click Create Token

  • Click the blue Create Token

  • Setup your personal access token using the following settings:

Name: This will be the name of the token, this can be whatever name you want.


Scopes: These are the permissions that the token will have access to.

You will want to select both:

data.records:read

&

data.records.write


Access: This is where you will set the specific airtable bases that this token will have access to. You can set a specific base needed, however for ease of use and convenience we recommend simply setting the access to All current and future bases in all current and future workspaces


Finally, click the blue Create Token button.

  • In the new popup you can now copy your token and paste it into your builder's Access Token field

Note: It is important to keep your access token key private.

  • Back in the builder from the New Airtable Collection screen, click the blue hyperlink for Airtable API Page, then from the new tab select the table you wish to use as the collection, this will open the Airtable API documentation.

  • Under “Authentication” copy the example link

  • Return to the site editor and paste this link into the second field

  • Click “Import fields”

  • After clicking Import Fields the collections fields screen will appear. Here is where you will tell the collection what data type each field should be. The first thing you will do on this screen is set the Page item URL to use the Name field.

  • By default, the collection will have all data types set to Rich Text. However, the Business Directory widget can only use 3 data types: Plain Text, Image, and Link. Every field will use the data type of Plain Text, with the exception of the below fields: Image =  Data Type: Image LinkedIn, Instagram, Facebook, Email Address = Data Type: Link

  • After making those changes, then click Done.

CONNECTING BUSINESS DIRECTORY TO COLLECTION

  • To connect the Business Directory widget to your collection, right click the Business Directory and then from the context menu click Connect to Data.

  • The Connect Data window will appear, at which point you will simply connect each field accordingly.

At this point the widget is done being setup and is now ready to use.

HOW TO PREVIEW THE DIRECTORY

When it comes to previewing and testing the Business Directory before publishing the widget to your site, you have two available options:

  • Preview Link: Using the preview URL is the recommended method in testing this widget (and a site in general), as this will provide the closest experience that you’ll have on the live site.To access the preview URL simply use the top toolbar in the builder and navigate to Info Icon > Preview Link, then copy the provided link and paste it into a new tab.

  • Preview Button: You can use the preview button within the builder to quickly test the widget. We recommend only using the preview button for testing small things such as widget styling. For the closest experience to what the live site will be like, you will want to use the Preview Link option.

HOW TO UPDATE THE AIRTABLE

To update the airtable content such as changing the column titles, you’ll simply open your airtable and make those changes as needed. Then back in the builder you will need to ensure that the collection fields are updated to reflect those changes.

For example, if you were to change the column City to now be State, you would make that change in the airtable.

Then within the builder:

  • Navigate to your collection (content > collection > open collection)

  • Locate the City field and change that to match the new field name in the Airtable. In this example that we will change City to State.

  • Lastly after updating the collection to match the airtable, you will need to push that update to the collection by clicking the Refresh Data button, followed by the orange Done button. The builder will then refresh itself and the collection will be updated.

  • Once the collection is updated you then need to open the widgets Connect Data window (right click widget > connect to data > change connection), then simply locate the updated field and reconnect that to the new field. In this example you would update City to now use the State field.

HOW TO PROVIDE A CLIENT ACCESS TO UPDATE THE AIRTABLE

  • Open the airtable, then click the airtable name > share.

  • From the Add Collaborators window click Base.

  • From the new Share window you can add the email address for your client, change the permission to Editor, add an optional message and click the blue Send Invite button.

Your client will now have access and permission to update the airtable content from their end. The business directory widget will automatically update as the client updates the airtable.

Do Note: Changes made to the airtable can take some time before those changes are seen within the builder on the live site. This is simply due to the frequency that airtable allows data to be fetched. If updated content from the airtable does not appear immediately on the live site, you will want to provide it at least an hour to allow the new content to be pulled in and displayed.

ADVANCED: CONNECT BUSINESS DIRECTORY TO DYNAMIC PAGES


*Please note that you will have to publish/republish your site live to see this connection function properly.


To learn more about dynamic pages as well as how to create and connect widgets to them, see our Dynamic Pages training doc here

  • To connect the widget to a dynamic page you will first need to create your dynamic page via Pages > + New Page > (Add Dynamic Page) > Blank.

  • Give the dynamic page a Page Name and then use the Connect to a collection drop down to select your airtable collection.

  • If your collection was created and linked to the Business Directory before the dynamic page was created, then you will first need to refresh your collections data. To do this open the collection from the Content panel, then click Refresh Data.

  • Opening the Connect Data window for the Business Directory widget, you can now change the Link field to connect to the dynamic page you created for that collection. Then click the orange Done button.