loading

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 an Answers 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 Answers Jambo template. You can go to Pages > Sites to create a new site and then click to “Create New Repository” in the Custom Development section. 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.

light bulb
Tip
Repository names need to be globally unique, so name it something unique to you or your account. This is internal only and your customers won’t be able to see this. 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 Answers experience to use. You’ll want to update the config > locale_config.json file with the Answers Experience Key, which you can find in the Answers > 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”.

light bulb
Tip
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 recommend pausing and doing a Live Preview often. This will make sure that you don’t have any glaring issues before you start 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 “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 Answers 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.

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    Your account has no Pages sites yet. What is the first thing you need to do in order to build your Answers frontend?

    Error Success Question 2 of 2

    Is it generally easier to create the Vertical pages first or the Universal page?

    Way to go, you passed! 🏁

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Splash Loading