Dashboard Shutdown Notice Please note that this dashboard will be archived on May 31, 2022. Sites that are not migrated to the new dashboard (go.wocode.com) before this date will no longer be editable until they are successfully migrated. Click here to migrate your sites

Business Directory Widget

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. 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.

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
    Note: Business hours will only be displayed within the the modal.

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.

  • From within the builder create a new collection using the Content tab on the left side bar. Content > Collections > +New Collection > Airtable
  • Click the text Airtable account page.