React

when using React, you can import components using a useEffect hook instead of adding them statically if you prefer.

Load the assistant manager on a top level page that is always loaded, for example the index.jsx or main.jsx or App.tsx file.


useEffect(() => {
  const assistantManagerScript = document.createElement('script');
  assistantManagerScript.src = 'https://store-assistant-assistantmanager.strut.fit';
  assistantManagerScript.async = true;
  assistantManagerScript.setAttribute('data-organization-id', organizationUnitId);
  assistantManagerScript.setAttribute('data-language', languageCode);
  document.head.appendChild(assistantManagerScript);
}, []);

You can then add the web components as usual on any pages where the assistant manager is loaded.

Add the script for the relevant component.


useEffect(() => {
  const sizeButtonScript = document.createElement('script');
  sizeButtonScript.src = 'https://store-assistant-sizebutton.strut.fit';
  sizeButtonScript.async = true;
  document.head.appendChild(sizeButtonScript);
 
  // Repeat for each other component required
}, []);

Add the component where you want it to appear.


<strutfit-size-button product-code={productCode}></strutfit-size-button>