How to Create your First Flow Design

Updated 1 month ago by Devinder Singh

In this development guide, we will discover how to create the first no-code backend flow design for your websites and apps. Byteline helps to build simple to complicated flow design with the help of powerful nodes such as scheduler, database, form submission, email verification, and much more. 

Let's get started.  

Register

Step - 1: Launch your browser and enter the URL www.byteline.io

Step - 2: Click on the sign-up button on the right-top corner of the homepage.

Step - 3: You will be re-directed to the registration page where you will have to click on the "Sign Up for Byteline Console" button to get started.

Step - 4: To create an account, enter your email, set your password, confirm it and tap on create account button. 

You can also simply create your account via Google or Amazon.

Create

Step - 5: Once you have created your account, the Byteline console will be launched.

Click on the Go to Flow Designer button to create your flow.

Step -6: Create a flow window that will appear on your screen. Enter the name to create your flow and select a trigger to start your flow design. For example: to create a flow that provides real-time information to Send Email node, select the Webhook Trigger. Other options are:

  1. Scheduler: It can be used to schedule a flow to run at a pre-determined schedule. You can configure the flow to run at hourly, weekly, or monthly schedule.
  2. Webhook: It can be used to invoke a flow through API calls or form submissions.
  3. Airtable: It can be used to trigger a flow whenever a new record is created or updated in the Airtable.

Step- 7: Click on the add button over the top-left corner of the node and select the next node from the table. 

For this document, we are adding a simple node to send the information via email, you will need to add the Send Email node.

Edit

Step -8: You have created the structure of your first flow successfully. Now you have to configure the details of each node in the flow. Byteline makes it easy by providing intuitive configuration screens for various nodes.

You can click on the edit button at the top-left corner of the webhook node to view the URL.

The webhook window will appear on the screen. This window shows the webhook URL, method, and Register body format.

For webhook node configuration follow the steps below:

  1. Click on Register body format now to register the capture the request body from Postman.
  1. Paste the webhook URL in the Postman enter request URL field.
The below steps describe using the Postman tool to send a request. You can also easily configure your forms service to submit to this flow. Follow the steps in our YouTube tutorial at https://youtu.be/qQ76xneIgww
  1. Select the Post method to call API for posting the data.
  1. Enter the body you want to post for example:{"email": "hello@email.com"}
  1. Click on the Send button to post the to that Webhook URL.
  1. Redirect URL can be configured to send the user to a different page after successful submission. You can tick the redirect URL checkbox and enter theRedirect URLin the field for specifying the next page to be shown.
  1. Click on the Save button to save the webhook node configuration. 

Step -9: Click on the edit button in the left-top corner of the send email node. 

Step- 10: The Send Mail pop-up will appear on the screen. Enter the email id of the recipient and subject of the email.

Enter the body text that you want to send via email and click on the Save button. For example: to send the name that came in the form data, use ${input.name}. This format can be used to specify any data key that comes in the form.

Deploy 

Step- 11: Click on the Deploy button and the deploy successful pop-up shall appear on the screen. 

Test Run  

Step -12: You can test the flow by hitting the Run button at the top-right. It opens a small dialog to ask for input data. Enter the value in the field and hit the run button.

Step -13: The flow design has been created and now you can check the success status. Once a flow has successfully run, it's ready to be used in the wild. You can now link this flow to any of your web forms. All you have to do is change the submit URL of the form to point to the Byteline URL provided in Step - 9.

You have successfully created and deployed the first flow design with Byteline.

You are ready to get started with your next project. Feel free to connect us for any doubt.


How did we do?