Answers Experience Demo - Case Studies
Usage:
To initialise the answers experience app on an external site, you need to have the main script loaded
<script src="https://design-system.yext.com/dist/js/main.js"></script>
Once the script is loaded, you can call initAnswersExperience()
, which accepts the following arguments:
container
(string, required) - ID DOM selector: This is the container where the app will be injectedscrollTo
(string, optional) - ID DOM selector: This is the element/section that the page will scroll to after new pagination link is clicked. Defaults to the container selectorverticalKey
(string, optional) - Vertical Key: The key to the vertical (e.g.: "case_studies", "resources"). Falls back to "case_studies"input
(string, optional) - The input query for the vertical (e.g.: "food", "healthcare"), which will filter the verticallimit
(boolean, optional) - The limit query for the vertical (how many cards to show at once). Default 9isFilterAccordionFullyOpen
(boolean, optional) - Specify whether the filter accordion should be fully opened on page load. Default value:false
showSearchBar
(boolean, optional) - option to show search bar. Defaul:false
searchBarPlaceholder
(string, optional) - Placeholder text inside search bar.
<script>
DesignSystem.main.initAnswersExperience()({
container: "#answers-experience-app",
scrollTo: "#answers-experience-section",
verticalKey: "case_studies",
input: "listings",
limit: 9, // default
isFilterAccordionFullyOpen: false,
showSearchBar: true,
searchBarPlaceholder: "Search for integrations or partners"
})
</script>