Create UI for Custom Search Engine

Hello,

I need help from someone who is familiar with the google custom search API documentation, parameters, and functionality. I am interested in help creating/customizing the UI of the custom search engine I am working on. I was hoping to add the search engine to the Webflow.io site I have been working on once the search engine is complete, but I'll have to find an alternative site if PHP is used (Webflow supports embedded scripts but not PHP).


I am currently using Refinements (labels) to allow end-users to filter results from specific sites - with specific keywords auto-appended (via the console settings). Reference image attached ("Custom Search Tabs"). However, I believe the results and user experience could be improved significantly through a custom UI (programattic execution).


Below are the key items I hope to address:

- Location: The search engine is currently restricted to remote US based job posting through use of various Boolean strings auto-appended to search queries. (i.e intext:"United States" OR remote AROUND(3) U.S. OR more:p:PostalAddress-addressCountry:US,United*States (depending on the specific site/refinement label). I would like the UI to support a location field, so long as accuracy of results can be maintained.

- I would like to customize/categorize the refinement labels to look something like the buttons in the image attached ("Refinement Labels - Target UI").
However, it may be better to hide the refinement labels and create individual search strings for each menu option - I would like to hear your thoughts on this.
The code for this can be found here: https://mdbootstrap.com/docs/standard/components/dropdowns/

I would like for the buttons to be in the following order: All (default search combining all sites), Sites (Dropdown list of individual sites), Categories (Dropdown list), Industries (Dropdown list), Pro Filters (Dropdown list)

I know it is possible to offer end-users the functionality of refinements, location targeting, and biasing results by date through a query parameter embedded in a URL, or by programmatic execution. But I'm not aware of how to bias results strongly/weakly by date without sorting ALL results by DATE.

- Creating a custom presentation layer for search results: The CSE documentation highlights how it is possible to write your own custom presentation layer that transforms JSON data to HTML that is presented to the end user using Search Element Callbacks. I would like to adjust the standard Title text of the results returned for a couple of the sites (if possible), and enhance the overall presentation where possible.

For example - I am interested in improving the search results display and possibly including a snippet from the ogDescription field for SOME of the sites included in the search engine, so long as it does not replace the standard rich snippet already provided as a result of the search engine (soft) keywords added in the search engine console.

- I understand that structured data available in the results pages can be added to the presentation layer. I would like to use external information/datasets (not necessarily found on the search results page) to enrich the richSnippets through callbacks / third party data. Please see attached image for one specific example ("Enriching Search Results with External Data")


- Search engine keywords: If it is possible to adjust the search engine keywords programmaticly, I would like to adjust these for some of the search options listed in the UI dropdown menu. (See "Search Engine Keywords" image for reference).

- Search UI: I would like a two column search display similar to Indeed.com, with the two search fields and menu options at the top, search results on the left, and results links opening/loading on the right. (See "Two Column Search Display" image attached).


If you are familiar with how to accomplish any of the above, I would love your help with this.

Thank you!