Recommender-overlay NPM

Recommender Overlay

This is a web component that recommends projects from Polo Club.

Get Started

Recommender Overlay is distributed as a Web Component, that can be easily integrated into any web-based applications regardless of the development stack (e.g., Vanilla Javascript, Svelte, React).

To use this component in your application, first load the JavaScript in your app's template file (e.g., the HTML file).

<script
  type="module"
  src="https://unpkg.com/recommender-overlay/dist/recommender-overlay.es.js"
></script>

Then, you can add the overlay by adding the custom tag in your app's template file. You can use the attributes to configure this component.

<recommender-overlay
  my-brand="CNN Explainer"
  brands-to-ignore="CNN 101"
  recommendation-count="10"
  similar-candidate-count="15"
  position-left="30"
  display-delay="90000"
  homepage-url="https://poloclub.github.io/"
></recommender-overlay>

You can also manually specify a list of projects to recommend.

<recommender-overlay
  recommended-brands="WizMap, StickyLand, TimberTrek"
  position-left="30"
  display-delay="60000"
  homepage-url=""
></recommender-overlay>

URL Parameters

If you want to temporarily disable the overlay. Add ?norec=true in the URL.

APIs

Attribute	Optional	Description
`my-brand`	Optional, default `""`.	Name of your project. This name should matches the `brand` key in the group home page's data file. If not provided, the overlay recommends the latest projects.
`brands-to-ignore`	Optional, default `""`.	You can provide a list of brands that the overlay should never recommend. For example, it doesn't really make sense to recommend CNN 101 from the CNN Explainer's website. Brands should be separated by comma, such as `brands-to-ignore="CNN 101", "WizMap"`	.
`recommendation-count`	Optional, default `"10"`.	Number of items to recommend.
`similar-candidate-count`	Optional, default `"15"`.	Number of the most similar items to sample recommendations from.
`recommended-brands`	Optional, default `"15"`.	You can use this attribute to manually provide a list of projects to recommend. For example, `recommended-brands="CNN Explainer, WizMap, StickyLand"`.
`position-left`	Optional, default `"20"`.	The overlay will always show up at the bottom of the viewport. You can control the x position (px) by setting this attribute.
`display-delay`	Optional, default `"60000"` (1 minute).	Delay to show the overlay in milliseconds.
`homepage-url`	Optional, default `"https://poloclub.github.io/"`.	Home page url. If it is set to '', the component will not display the home icon.