Putting it All Together | Yext 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.

Note

Repository names need to be globally unique, so name it something unique to you or your account. This is internal only and won’t be seen by users on your site. If your name is taken, try to make it unique by incorporating your Yext account ID.

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:

• Locations
• Events
• FAQs

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:

Locations

• Page Template: Vertical-Full-Page-Map
• Name: locations

Events

• Page Template: Vertical-Standard
• Name: events

FAQs

• 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”.

Note

We recommend starting off with a built-in card so that you can get going with your experience and then you can go back and customize once you get the basics in place. We also recommend pausing and doing a Live Preview frequently, to make sure you don’t have any issues before customizing even more.

For each of the pages, you might want to make some basic customizations to things like:

• Icon
• Label
• 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 pizzazz 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 .