> ## Documentation Index
> Fetch the complete documentation index at: https://docs.embeddables.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How To: Run custom code when the Embeddable loads

> Running JS code on first load, e.g. to run a function or add an event listener

<Frame caption="Adding a custom code Action to run when the Embeddable first loads">
  <img src="https://mintcdn.com/embeddables/f00lqPv7EEUt_xOC/images/how-to/add-action.gif?s=27644d26bba142407ae9ad96b985a5d0" width="2878" height="1578" data-path="images/how-to/add-action.gif" />
</Frame>

<Steps>
  <Step title="Add a Trigger for on first load">
    * Open the Logic card.
    * Switch to the Triggers tab.
    * Add a new Trigger.
    * Select `When "Flow" Is "Loaded"`.
  </Step>

  <Step title="Create a custom code Action">
    * Click "Create New Action".
    * Give it a name.
    * Hit Apply.
  </Step>

  <Step title="Write your custom code">
    * Add whatever custom JS you like inside the `output()` function.
    * The first argument of `output()` is the User Data, and the other arguments
      are [described here](/guides/custom-code).
    * The code will execute on the frontend, in the main window environment,
      so has access to window functions and variables.
  </Step>
</Steps>

<Card title="Learn more about Custom Code" icon="code" href="/guides/custom-code">
  Read more about writing Custom Code in Embeddables, including all the
  available arguments passed in to the function.
</Card>