Strategy (optional)

data-hr-strategy

Strategy let you tell widget how it should load. The widget loads file which is defining behavior and configuring all needed assets. Then according to strategy below it loading application.

If you want best performance leave Auto a default option.

Auto (default)

Loads widget lazyli only when user scroll near the area the widget is placed. But when lazy loading is not available it's fallback to defered loading when browser is in idle state.

<div data-hr-token="<token>" data-hr-resource="<identifier>"></div>

Lazy

Loads widget only if user scroll near it's position.

<div
  data-hr-token="<token>"
  data-hr-resource="<identifier>"
  data-hr-strategy="lazy"
></div>

Instant

Widget is instantly loading after script is loaded. This can lead to adding extra time to TTFB and affect Lighhouse scores.

<div
  data-hr-token="<token>"
  data-hr-resource="<identifier>"
  data-hr-strategy="instant"
></div>

Manual

Widget is loaded manually by using window.HappyReact object provided by widget.

<div
  data-hr-token="<token>"
  data-hr-resource="<identifier>"
  data-hr-strategy="manual"
></div>

and to properly load widget you need add extra JavaScript

document.querySelector('.load-reactions').addEventListener('click', () => {
  if ('HappyReact' in window) {
    window.HappyReact.load();
  }
});