Documentation
/
Configuration
/
Strategy

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.

⚠️

Checking if user is near widget is done using Intersection Observer that is not supported in every browser. Please check compability chart!

<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();
  }
});
💡
Always check if HappyReact exists in window object!
Last updated on June 21, 2022