I came across a scenario where an AFT prospect wants to embed the Answers experience filtered to a specific list of FAQs (via query or facet) on one of their pages (separate from the results page) and preferably remove/hide the Answers search bar and entity tab. I know we do this in certain areas of the HH site, but not sure how this is done - how do you embed the answers experience on an existing page with other content while including a query string/filters as well as hide the Answers navbar UI element via CSS? Also, where do you apply the CSS? Any code snippets would be appreciated.
1 Like
Hi Tim!
Yes, in short, you can definitely achieve this via Answers! One caveat is that these FAQs would not be marked up with schema - we would definitely recommend using Yext Pages to make sure these FAQs are easily surfaced both on your client’s site and in Google.
However, to do this approach, follow the steps below!
- Create a second Answers Frontend Experience. Because we need to add some additional customizations that are not desired for the main search, we’ll need a separate frontend experience (and as a reminder, only one experience is in scope for the Yext Answers Free Trial). This however can leverage the same Answers backend if you so choose.
-
Add a page for your FAQs. Here, we’ll do something a bit different - instead of creating a
universal-standardpage namedindex, create avertical-standardpage named index. From our training, you’ll note that this page will now automatically appear at the root of your site. Configure the index.json to point to your FAQs vertical. - Add a default initial search. Because you want certain FAQs to populate on landing, you can indicate a default search that should be run when someone lands on your page. This is only available for vertical pages.
"pageSettings": {
"search": {
"verticalKey": "faqs", // The vertical key from your search configuration
"defaultInitialSearch": "faqs" // Enter a default search term
}
-
Hide your Navigation Bar. You can do this by commenting out the relevant partials in your
index.html.hbsfile.
Comment out both navigation partials below remove the navigation bar:
{{!-- {{> templates/vertical-standard/script/navigation }} --}}
{{!-- {{> templates/vertical-standard/markup/navigation }} --}}
You can also optionally remove the footer component
{{!-- <div class="Answers-footer">
{{> layouts/yext-logo }}
{{> templates/vertical-standard/markup/locationbias }}
</div> --}}
- Hide the Search Bar *not recommended. You can optionally hide the search bar via the CSS below in your answers.scss file; however, we recommend keeping the search bar for easy discovery of FAQs.
.Answers-navWrapper {
display: none
}
- Inject this onto your page. Publish your site to the production domain of your choosing. Afterwards, you can inject your static answers component using a javascript snippet:
<div id="answers-container"></div>
<script src="[[production url]]/iframe.js"></script>
For more information on the integration, please see our integration site: Guides | Hitchhikers
Your end result will look something like this!
Big thanks to @henry_kremer for testing out this solution!
3 Likes
This is awesome! Thank you @afarooque & @henry_kremer
1 Like
These instructions were perfect @henry_kremer & @afarooque.
one more question - Is there any way to have a dynamic title appear based on the query so you can use a single page for a multitude of queries?
For example, I built an experience to dynamically load professionals by type (MLO, wealth advisor, etc) but would be great to have a title on the page while avoiding making individual pages.
Is it possible to make all aspects of the search bar transparent with the background and restyle just the search query text to make it appear like a section title? Any other way to insert a title you can think of using the field it’s filtering on?
Here is a little script I wrote for a similar use case
<script type= "text/javascript">
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('query');
const answersHeader = document.getElementById("Answers-navWrapper");
const queryHeader = document.getElementById("queryHeader");
const header = "<h1 style=' font-size: 30px;font-weight: bold;'>" + myParam + '</h1>';
answersHeader.setAttribute("style", "display:none");
queryHeader.innerHTML = header;
</script>
It basically grabs the query from the URL and injects it as an H1.
I added this to index.html.hbs, but I’m not 100% if there’s a better place to put it.
1 Like
Hi @Gideon_Weiler, thanks for providing your script! What an awesome customization 
I used it to fit my use case: I want to reference the user’s current search query further down on the page.
Here’s the code I used in my index.thml.hbs file:
<div class="Answers AnswersUniversalStandard">
...
<div class = "Answers-alertBanner" id ="Answers-alertBanner"></div>
</div>
<script type= "text/javascript">
var urlParams = new URLSearchParams(window.location.search);
var myParam = urlParams.get("query");
var queryParam = document.getElementById("Answers-alertBanner");
console.log(myParam);
queryParam.innerHTML = "Thank you for searching for: " + myParam;
</script>
</div>
<div class="Answers-footer">
...
This works great the first time the page loads. However, for each subsequent search query that is submitted, the parameter that is extracted by window.location.search stays the same, even though the parameter in the URL is updated.
Video: https://www.screencast.com/t/L2pwlol8F
Is there something I missed? Is there a different way I could reference the current query parameter in the URL?
Many thanks,
Max
Max - you’d have to add an event listener to the search bar that runs the script every time a search is run, and then executes that script.
I don’t have a script handy for this but here is documentation on the general concept: JavaScript DOM EventListener