Guides & tutorials

Custom integration with HTTP request module: creating a task in Todoist

Import this tutorial scenario in your workspace
Table of contents

Do you need to connect your Arengu form with a third party application not (yet) natively integrated or with your own API? Learn how to do it in a few clicks following this tutorial.

Previous requirements

To demonstrate the power of our HTTP request module, we are going to use Todoist as third party app, so you will need:

  • A Todoist account where we’ll create a task on each form submission.
  • An Arengu account, to create the form and customize the submission flow.

What are we going to build?

A basic sign-up form that will create a new task in our Todoist inbox on each submission. Using our own templates to create the sign-up form, it will be able to make an HTTP call in order to create a new task in Todoist.

Get an API key from Todoist

The API key will be used to authenticate our form with Todoist. You’ll find it this way: 

Get the project ID of our inbox in Todoist

Go to Todoist and:

  • In the left menu, click on “Inbox”.
  • Look at the URL, it’s something like this: https://todoist.com/app/project/22896361
  • Copy the numbers after “/project/” in the URL (in our case 22896361), later we’ll need it.

Start with a template in Arengu

In case you are using Arengu for the first time, you may not be aware of the existence of our pre-built templates, made to ease the first steps in the creation of your form creation. This time we are going to use a simple but powerful sign-up template: 

  • Go to Arengu and log in.
  • Click on “Create form” and choose the “Signup with email and password” option. 

Edit the submission flow

Once we have our signup form and our API key from Todoist, we are ready to connect both apps: it’s time to edit the flow responsible for the submission, and add the HTTP request module. Pay attention to the section below the step 1: this “Step flow” called “Signup form” manages the logic once the user clicks on “Sign up” or finishes a social sign up.

Now, follow these steps to add the HTTP request action to our flow:

  • Click on “Signup flow” after the Step 1 and a new left panel will appear. There you’ll see a section called “Step validation flows”.
  • Next to “execute Signup flow”, click on the “Preview flow in a new tab” icon. 

Just below “Store state variable”, add a new action called “HTTP request”.

Set up the HTTP module

Although many options are available, we are only going to edit these fields in the HTTP request configuration:

  • Alias: createTask
  • Connection: add a new connection, paste the API key from Todoist in the “Bearer token” field, and give it a name, for instance: “Todoist Connection”
  • URL: https://api.todoist.com/rest/v1/tasks
  • Method: POST
  • Content type: application/json
  • Body: a JSON object with the project ID we got before and the description we want to set.
{
	"content": "Contact new user",
	"project_id": 22896361,
	"description": "{{input.body.email}}"
}

Are all the required fields filled? Don’t forget to publish the flow so that changes are saved.

Preview, test and debug

After publishing all the changes in the flow, go back to the form editor, click on preview and submit the form with dummy data. It’s time to check the inbox in Todoist and…voilà, we have a new task!

In case something fails, note that you can debug your submission flow, just go to the flow editor, and at the top of the page you’ll see the “Executions” tab.

Did you find this example useful? Try to create your own integration with another third-party application, your own API, or check out our native integrations. Sign up for free or schedule a demo with our team.

If you aren’t sure if Arengu fits your needs, the answer is probably yes, but we can help you decide: just tell us what your use case is and we’ll give you an answer quickly. You can also read our guides and tutorials, or get inspiration from our use cases.

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.