Putting it All Together| Hitchhikers Platform
What You’ll Learn
In this section, you will learn:
- Walkthrough of starting a site from scratch
- Best practices on adding pages and cards
- Recommended Order of Operations
Ready to Build a Site?
Now you’re an expert in Pages and Cards. While we’ve talked a lot about these in the abstract, we’ll go through a real example to help put it all together.
Let’s say you are building a Search Experience with Locations, Events, and FAQs. You have all of your data in the Knowledge Graph already and you’ve already built out the backend config for those three verticals.
Where to start? Let’s go through the process together.
Creating the Site and the Repo
Remember the first thing you need is a Github Repository created using the Search Jambo template. You can go to Pages > All Sites and then click “Add New Site”. Choose the “Don’t have a Github account?” option for Yext to create and manage the Github repo for you. If you’re completing a Hitchhiker Challenge or using a Solution Template (which you’ll learn more about later), this step may have already been done for you.
Update the Config > locale_config.json
Now that you have your repo, it’s time to dive into the code editor. You’ll need to make sure that the pages site knows which Search experience to use. You’ll want to update the
config > locale_config.json file with the Search Experience Key, which you can find in the Search > Experiences tab, and the default locale. You can also set things like the favicon or the logo in the
global_config.json – or you can come back and do that at the end as part of your site polishing.
Add Vertical Pages
We find it easiest to start with your Vertical Pages and then add in Universal at the end. In the background, kick off the Live Preview by clicking “Create Preview” so it can start going and it will be ready to use by the time you have your first page.
Remember that your experience has 3 verticals:
You’ll want to use Jambo Commands to create a page for each of these. You’ll want to align the page template with whatever best matches your requirements for that vertical. For example, if you want your vertical page to have a map, you should select the Vertical-Full-Page-Map template to start with. We also recommend using the plural name for the page name, as this will be the URL for the vertical search page.
Here’s what we would recommend for our example:
- Page Template: Vertical-Full-Page-Map
- Name: locations
- Page Template: Vertical-Standard
- Name: events
- Page Template: Vertical-Standard
- Name: faqs
For each one of the pages, you’ll want to fill in any required information, particularly the verticalKey and the verticalsToConfig object with the verticalKey and cardType. It’s also good to fill out pageTitle, e.g., “Location Search”, “Event Search” or “FAQ Search”.
For each of the pages, you might want to make some basic customizations to things like:
- Maximum results
Otherwise, now is a good time to pause and create the Universal experience to bring everything together.
Add the Universal Page
Now that you have the verticals, you can add your Universal page – the easiest part! You can go to Jambo Commands > Add Page and select the Universal template. Your Universal page should be named “index”.
The only thing we recommend filling out right away is the pageTitle, typically something like “[Brand Name] Search”. Other customizations and polishing can happen at the end, unless you want to do it now.
Add the Frills!
Okay, so let’s take inventory. You have:
- A location vertical search page
- An event vertical search page
- A FAQ vertical search page
- A universal search page
At this point, you have a working experience, but you might want to add some “pizazz” as we like to call it by incorporating additional components in your layout.
This could include things like:
- Q&A Component to answer bespoke questions for your customers
- Facets or static filters to allow for better vertical-page engagement
- Map customizations to change pin look and feel
You’ll learn more about how to add these and more in the Search Advanced track.
Style & Polish
Finally, you want the experience to be a reflection of your brand. You’ll want to align the styling with your brand guidelines, including things like font, font size and colors. You’ll learn more about this in Adding Styling Module.
The last thing is the polish – you want to make sure that your page titles, your meta descriptions, your GA or GTM tags are all incorporated into the experience. This is a last run through before you’re ready to go live. You’ll learn more about these in the Integration Options & Getting Live Module.