Pass variables via the web component

FAQs
1

We’ve added support to allow variables to be passed in via the web component, as well as listen to variable changes.
To interact with variables on the <em-beddable…> web component, you can define your Embeddable like so:

function Embeddable({token, onComponentsLoad, variables, onVariablesChange}) {
  const ref = React.useRef(null);
  function handleVariableChange(e) {
    if(onVariablesChange) {
      onVariablesChange(
        Object.fromEntries(
          e.detail.map(c => [c.variableName, c.newValue])
        )
      )  
    }
  }
  React.useEffect(() => {
    ref.current.addEventListener('variablesChange', handleVariableChange);
    ref.current.addEventListener('componentsLoad', onComponentsLoad);
    return () => {
      ref.current.removeEventListener('componentsLoad', onComponentsLoad);
      ref.current.removeEventListener('variablesChange', handleVariableChange);
    };
  }, []);
  return React.createElement('em-beddable', {
    ref, 
    token, 
    variables: JSON.stringify(variables)
  });
}

and then use it like so:

<Embeddable 
  variables={{ 'Country': 'Germany'}}
  onVariablesChange={v => console.log(v)}
  onComponentsLoad={() => setIsLoading(false)}
  token="..."
/>