# Creating a Flow

Refer to this [site](https://embedded-workflow-builder.netlify.app/building/) for detailed documentation on building workflows.

Follow these step to create a flow in the **Workflow Builder** using the `ion-webhooks` component:

1. Click on the `+ Add new workflow` button on the top right of the page.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FArtHkmGUx8Lz6Wf64Aw3%2Fimage.png?alt=media&#x26;token=72d66b4d-4803-4758-ad5e-00ad6a9ef604" alt=""><figcaption></figcaption></figure>
2. Click on `Quickstart.`

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2F13NvLcSRCkF5PF1RLH80%2Fimage.png?alt=media&#x26;token=c8afb373-6f59-4099-b5a0-f055e4d85c66" alt=""><figcaption></figcaption></figure>
3. Give your workflow a name then type in "ion-webhooks" in the search field. You will then see the ion-webhooks component.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2Fgz3ijD4V3WPhBdfZWdDY%2Fimage.png?alt=media&#x26;token=05bbd9cd-2ffe-4fac-8158-7e8ee79cc860" alt=""><figcaption></figcaption></figure>
4. Click on the `ion-webhooks` component.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FgTUlw5qfCWdekOX3unHp%2Fimage.png?alt=media&#x26;token=daf881f8-459b-4243-9405-285620583e76" alt=""><figcaption></figcaption></figure>
5. Click on the `Create trigger` button or `ION Webhooks Trigger` to select and use the `ion-webhooks` component as the trigger for your workflow.
6. You will see a blank slate with the `ion-webhooks` component as the starting point for your flow. Don’t be alarmed by the red dot. That just indicates that there are further configuration options needed to complete the setup the component.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2Fi4ZBa5nztpqrctIS6liT%2Fimage.png?alt=media&#x26;token=426ce0d6-f290-4d82-9da9-1e0bc27e5315" alt=""><figcaption></figcaption></figure>
7. Click on the `ION Webhooks Trigger` step. A popup window will appear with fields for `Connection`, `Webhook Receiver Name`, and `Actions`.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FUhye7aoA0kbLRl1fhs9G%2Fimage.png?alt=media&#x26;token=34978ede-6d85-4d61-be37-d7d2efda25aa" alt=""><figcaption></figcaption></figure>
8. Click on the `Connection` dropdown. If not previously setup a connection to ION you will need to click on the `+ Add new connection` button. If the connection to the ION environment has already been created you can select it and proceed to step 10.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FMwkT6FG9PZZ9E6OvaV0S%2Fimage.png?alt=media&#x26;token=ac65c3c7-4ba7-4ea8-990e-dad893b3e497" alt=""><figcaption></figcaption></figure>
9. To configure a new connection enter in a `Name` for the connection, the `Client ID` and `Client Secret` which are the [api keys](https://manual.firstresonance.io/api/api-keys) and the `Environment` where your ION instance is running.

   <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FQWOBPGSyVyLS1WLZpDGM%2Fimage.png?alt=media&#x26;token=eec2cd8a-d0be-4cd8-8d6f-553b1bac10a7" alt=""><figcaption></figcaption></figure>
10. Enter the `Webhook Receiver Name`. This is the name that ION will use when creating the webhook receiver in ION. We recommend that you use the same name as the name of the flow.

    <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FETe3uj2ApmPUGsGldWDY%2Fimage.png?alt=media&#x26;token=dd04fd97-c2d6-4c75-8b6a-b9464a1b331d" alt=""><figcaption></figcaption></figure>
11. Click `Add a string input` to add one or more `Actions`. This setting will determine when your flow gets triggered based on the combination of an resource and action. For example, if you want your flow to be triggered anytime a `Run` is `Created` you will select `Runs - Create` from the dropdown selection. You can have more than one action that triggers your flow.

    <figure><img src="https://3615148728-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LkRqYp6lJhwxjYdzYG8%2Fuploads%2FPrHD8PbzXMToYkAGOQdp%2Fimage.png?alt=media&#x26;token=7b6ec610-67f6-49ec-9d5d-7a28fcf3f5f1" alt=""><figcaption></figcaption></figure>

Your flow is now set up with the `ion-webhooks` component. Refer to the link at the top of this page for detailed documentation on how to create and test your flow. In the next section we will provide some examples for you to follow.
