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:

1. container (string, required) - ID DOM selector: This is the container where the app will be injected
2. scrollTo (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 selector
3. verticalKey (string, optional) - Vertical Key: The key to the vertical (e.g.: "case_studies", "resources"). Falls back to "case_studies"
4. input (string, optional) - The input query for the vertical (e.g.: "food", "healthcare"), which will filter the vertical
5. limit (boolean, optional) - The limit query for the vertical (how many cards to show at once). Default 9
6. isFilterAccordionFullyOpen (boolean, optional) - Specify whether the filter accordion should be fully opened on page load. Default value: false
7. showSearchBar (boolean, optional) - option to show search bar. Defaul: false
8. 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>