ProjectionHub Webflow Enhancements Demo

This is a demo of the template search widget.

This demo page lives at https://projectionhub-webflow.netlify.app/

Responsive and inline vs block display

Depending on the size of the page and the container in which the search widget is placed, the search results may be displayed horizontally or stacked on top of each other.

The search widget can also be displayed either taking up space (block, seen below) or floating over the page (inline, seen above in the menu bar).

This page extends all the way to the edges so you can resize the window to see the change:

Airtable Data Soure

This search widget sources all of it's data from the Airtable base found at https://airtable.com/apphmjf1iAyvnMzZ6/tbl7cFZeefkcRoUFz/viwwMMZ6ZMdq92Qwz?blocks=hide.

These columns are used in the widget:

Name: What is shown in blue text as the header of the search result.
Also Used For: What is shown in the body of the search result after "Used For".
Image: A url pointing to an image that will be displayed on the left side of the search result.
Sales Page Url: The url of the page which the user will be taken to if they click on one of the search results.
Description: Text which is not displayed in search results but is taken into account in the Algolia search engine to further enhance the search result quality.
Keywords: Keywords which are not displayed in search results but are taken into account in the Algolia search engine to further enhance the search result quality.

Any of the data of these columns can be modified. The changes will be picked up within an hour by the syncing system and put into Algolia. Rows can also be added and deleted and this will add new or remove existing results from the search.

It is important that the headers of the airtable base are not changed or renamed or the widget will break. If you need any of these to be renamed either in Airtable or on the widget itself, a developer will need to make the change.

Non-conflicting Styles

Because the search widget needs to interact with the structure of the surrounding page, sometimes taking up space or displaying on top of other content, the search widget runs inside of it's parent page and not in an iframe like the pitch decks tool. As such care was needed to be taken to ensure that the styles of the search widget do not bleed out into the surrounding page and vice versa.

This demo page is created with Bootstrap and is independent of the styles of the widget to test that the styles do not conflict.

Installing the widget on Webflow

Put this tag where you want the search bar to show up:

You can configure certain aspects of the widget by modifying the attributes of the embed snippet:

id: Every instance of the search widget needs a unique id so that more than one can run in the same page. This can be anything as long as it is unique. For example, 'navbar-template-search' could be specified for the id of a navbar search widget.
data-phx-widget: Don't change this as it identifies which widget to embed. In the future if we want to add other different widgets, we can use this same tag format with a different phx-widget.
data-placeholder: Specify the placeholder text of the search input box. Defaults to "Search for your industry" if not specified.
data-recommendation-url: Specify the url of the "Get Recommendation" button which shows underneath search results. Defaults to "https://www.projectionhub.com/contact"
data-inline: If true, the search results will float over the page. This is suitable for using in a navbar, as can be seen at the top of the page. If false, the search results will take up the full width of their container and will take up vertical space on the page. Defaults to false. In this demo the search widget in the page has inline false and the search widget in the navbar has inline true.

Code Loader for this and future widgets

The above tag creates an entry point for the widget's main code. In order to actually load the widget code, this script tag needs to be put at the bottom of the <body> tag on every page that will need to load widgets.

If no widgets are found on the page, this script will do nothing, so it wouldn't hurt to put it on the bottom of every page on the site, perhaps next to the Google Analytics tag: