Articles on: Widgets and integrations

How to configure Directory Component (Directory page)

Table of contents:

Create your spreadsheet
Get a link to the spreadsheet
Replace the link
Additional information

1. Create your spreadsheet

Make a copy of the spreadsheet available at the following link:

2. Get a link to the spreadsheet

Publish your new spreadsheet as a .tsv file and copy the resulting link:

3. Replace the link

Go to the component settings and replace the link in the CMS URL section:

🏁 Setup complete!

You can now start editing your Google Drive spreadsheet by adding your information.
All the changes you make will be automatically updated in the component on your website within a few minutes after the modifications are made.

Additional information

Information on the item card
Get a link to the spreadsheet
Component settings
How to upload images

Item card will include the following information

The spreadsheet contains the following information

Title and Text - provide purely informational content.

URL - the complete link to the website to which the user will be redirected after clicking the card.
In spreadsheet the link should start with https://

Category - determines in which tab of the switcher the card will be displayed.
You can add categories to the spreadsheet while preserving punctuation, i.e., by adding a symbol " ; " after the category name.

Hide - when checked this card will not be displayed on the page.

Rank - determines the card's position when displayed on the page - the higher the rating, the higher the card will appear.

imgUrl - the direct link to the image should include the file extension at the end, such as .jpg, .png, etc.
If you are using a component without images, you can leave this field empty.

Component settings

Search bar placeholder - the text that will be displayed in the search bar.
The {{ amount }} construction allows you to retrieve the numerical value of the item count from the table.

Item limit - the number indicating the quantity of cards to be displayed in the component upon page load.

Sort by - it determines which column from the table to use for sorting, for example:
"-rank" - Sort by rank from highest to lowest
"title" - Sort alphabetically by title
If the field is left empty or the column with the specified name does not exist, the items are displayed unsorted, as in the original table.

Button text - the text that will be displayed on the button at the bottom of the component.

How to upload images

For upload images and obtaining a direct link, you can use paid services such as uploadcare and bunny .

You can also use free services, such as:

After uploading the image, simply copy the "Direct link" and add it to the spreadsheet.

After uploading the image, copy the "HTML code" and extract only the link from the "img src" tag.

After uploading the image, select "BBCode full linked" copy the code and extract only the link from the "img" tag.

Updated on: 23/01/2024

Was this article helpful?

Share your feedback


Thank you!