Arengu Basics — The key concepts to take advantage of the editor

Arengu Basics — The key concepts to take advantage of the editor

As you probably already know, arengu is not just a simple flow editor, since it allows you to create any user registration and verification process, in a few minutes. In this post, we are going to summarize and explain the key concepts of the editor, in order to allow you to get the most out of it, with the least effort.

A guided wizard, with editable templates

Build the most common use cases, for any tech stack, with the available and fully-editable form templates, which you can access by clicking on the button 'Create a new form'.

Once you have selected the use case, choose the technology in which you are going to use it. The editor includes native actions for PrestaShop and WordPress that will make it much easier to connect your forms with them, so simply click on the best option for you.

It is also easy to integrate common external services, like an email or SMS sender. The wizard will allow you to choose and include it automatically, in addition to allowing you to activate the social login. The wizard will create a completely customized form.

Form edition — Texts, colors, fonts, buttons...

Once the form is created, you can fully customize it in the 'Form edition' tab, by directly clicking on the field to change texts, placeholders, etc. Simply add new fields by dragging and dropping them from the left menu, or reorder them inside the form steps.

You can also change the fonts, the colors and the style of the buttons in the 'Design' tab, using specific color pickers. If you have CSS skills, you can use all these styling variables to perfectly adapt the form to your brand guidelines.

Flow edition — Set up the logic behind

Once the form is customized and published, we simply need to finish configuring the flows that have been created automatically with the template. You can see the flows linked with your form in the 'Flows' tab, inside your form's edition page.

Flows are groups of actions that determine what happens with the data input in the form, that the user or any external service has included in it. They are in charge of executing server-side logic to manage the data as we need.

If you don't have coding skills, you can use the templates to easily set them up. When choosing a template, the form and their flows will be automatically built and linked, so you only have to copy and paste a couple of data to make them work. This is an example:

If you have built the form from scratch, you can create and link them from this page. To know more, check this article about how to create and build flows ↗️

Basic  — External services with native actions

To integrate the external services that are available on the editor (like Mailjet, SendGrid, Twilio...) you will only have to copy and paste a few data from your account in that service. Once you have opened the flow, click on the action to open its edition, and copy and paste the required data from your account in that service, as you can see on the picture.

The required data may vary between services: API key, Account ID, Auth token... but the names of the fields that appear in our editor will always match the ones that the external service uses. In addition, in the documentation and the tutorials for each use case we show you exactly where they are, including screenshots, to make them easier to find.

Basic  — Integrations that use our CMS plugins

You can also integrate these forms and flows in your WordPress and PrestaShop websites using arengu's plugin. You just have to install it and copy and paste a few data in the specific native actions, which are very similar to the previous ones.

To set up these actions, simply go to the plugin settings in your WordPress or PrestaShop account, and copy and paste the API key and a specific URL for each use case. They are all properly identified with the name in the settings section.

Medium — Using variables to manage form data

If you add a new field to a form built from a template, or if you start it from scratch, you will need to use variables to manage input information in the linked flows. The editor allows you to get them from the dropdown on each field, when setting up new actions. We use the {mustache} format, but you can learn here more about how to reference variables ↗️

If you are not used to them, you should know that variables are used to store information to be referenced and managed in flows, labeling data with a descriptive name. It might be helpful to think of variables as the containers that hold the input information from a field, although they can refer to many other data from native actions and external providers.

Advanced  — Any external service with an API

If you have coding skills, you can use the 'HTTP Request' action to integrate any external service with API, even your own ones. This means that you can actually use the flows to integrate anything you need in a unique process, and completely customize the UX of the authentication processes of any provider: Auth0, Firebase, Okta developers...

To build and set up custom flows, build the structure selecting actions from the menu, and click on them to open the edition mode. To configure them you will only need to customize error messages and reference the proper variables, that you can get also from the drop-down menu.

You can also store output variables from an external service, in order to use them all the flows linked to a form, with the 'Store state variable' action. You just need to indicate the variable and give it a name, which you can reference in the rest of the flows of the form.

Test and embed

Once the form and the flows are configured, go back to your form's edition page and click on the 'Preview' button to test it. After using the form, you can check if it has gone right on the 'Submissions' tab. In the 'Share' tab you can also get the proper code to embed it.

Do you want to try it by yourself? Sign up free, schedule a demo with our team, or take a look at all the use cases that you can build with the editor!


Andrea L. Lozano

Social Media & Content Specialist.

View Comments
Next Post

Introduction to logic building in Arengu: How to get started in the Flows editor

Previous Post

7 benefits of implementing social login in forms with Arengu