Dynamic content block

install.js

// 1. Assumes the following div exists in the page, note: you can change this using the "attachDynamicContent" setting
// <div id="dynamic-content"></div>
// 2. The "pipeline" parameter controls the query execution, this example uses "popular", this is configurable
// 3. The "values" map controls the query. You don't need the "q" parameter, but can use this to control the context of 
//    the results. For example you may wish to use the "document.title" to find related content to the current page
// 4. The filter parameter allows any number of filters to be used to filter the query results, e.g. to domains, or sections, 
//    or any other number of factors

var recommend = setup(window, document, "script", "sajari", "//cdn.sajari.net/js/integrations/website-search-1.4.js");
recommend({
  mode: "dynamic-content", // Set the integration mode
  project: "1534384424562720477",
  collection: "triblive-com",
  pipeline: "popular",
  attachDynamicContent: document.getElementById("dynamic-content"),
  values: { 
    q: "",
    resultsPerPage: "3",
    filter: "domain='triblive.com' AND image!=''"
  },
  results: { showImages: true },
  tracking: false,
  searchOnLoad: true,
  styling: { 
    theme: { 
      colors: { 
        brand: { 
          primary: "#b32025" 
        }
      }
    },
    components: {
      results: {
        container: {
          'max-width': '300px'
        },
        item: {
          padding: '0.5rem',
          marginBottom: 0
        },
        result: {
          container: {
            'align-items': 'normal',
            'order-bottom': '1px solid #ccc'
          },
          title: {
            'white-space': 'normal',
            'overflow-wrap': 'normal',
            'font-family': 'Stainless Cond Bd',
            'font-style': 'normal',
            'font-weight': 'normal',
            'font-size': '1.0625em',
            'line-height': '1.2942em'
          },
          description: {
            display: 'none'
          },
          url: {
            display: 'none',
            transition: 'color 200ms'
          }
        }
      }
    }
  }
});