# Pass variables via the web component

**URL:** <https://community.embeddable.com/t/pass-variables-via-the-web-component/59>\
**Category:** FAQs\
**Created:** [June 10, 2024, 3:36pm UTC](https://community.embeddable.com/t/pass-variables-via-the-web-component/59 "2024-06-10T15:36:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ella-embeddable](https://dub1.discourse-cdn.com/flex013/user_avatar/community.embeddable.com/ella-embeddable/32/15_2.png) [@ella-embeddable](https://community.embeddable.com/u/ella-embeddable)\
**Post date:** [June 10, 2024, 3:36pm UTC](https://community.embeddable.com/t/pass-variables-via-the-web-component/59/1 "2024-06-10T15:36:14Z")

</div>

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:

```auto
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:

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

```