A Simple Dashboard to Manage Newsletter with Low-Code

Building Internal Tools with Appsmith

Building UI on Appsmith

  1. Create a new account on Appsmith (it’s free!), if you are an existing user, log in to your Appsmith account.
  2. Create a new application by clicking on the Create New button under the Appsmith dashboard.
  3. We’ll now see a new Appsmith app with an empty canvas and a sidebar with two directories: Datasources and Widgets.
  4. Click on the + icon next to the widgets section and drag and drop a container widget onto the canvas.
  5. Next, bring in a form widget inside the container and two input widgets inside the form.
  6. We can configure widgets and their properties by clicking on the cog icon on the top right. This will open a property pane where we can update all the widgets settings.
  7. Now set the form labels to name and email.
  8. Additionally, you can add a text widget to add aesthetics to our application; the following is how the UI looks like:

Set Up Zapier with Appsmith

  • First, create a free account on Zapier and select create custom workflow option from the dashboard.
  • On Zapier, every action on the workflow is named on Zap; to establish a connection between Zapier and Appsmith, let’s create a Webhook.
  • Now open the Appsmith app, click on the + icon next to the Datasource section from the sidebar, and choose Create New API.
  • Copy the webhook URL from Zapier and set the request type to POST. For ease, let’s also rename the query to addContact.
  • Here, we also need to send the data from the Form widget we had created earlier; now, let’s use their names to collect data and pass them in the Webhook.
  • Navigate to the Body tab on the API and paste the following code snippet:
{
"name":"{{Input1.text}}",
"email":"{{Input2.text}}"
}
  • This code snippet will send the information from the Input widgets to Appsmith.
  • Lastly, set the button onClick property to execute a query and set it to addContact.
  • Now, on Zapier, hit the test button and send a request by filling the form on Appsmith and hitting the API. We should see the successful response on Zapier.
  • Next, click on the + icon beneath the zap to add a new workflow. Select the SendInBlue Zap from the list.
  • We will need to authenticate with SendInBlue from Zapier to access the workflow; for this, you can either create a new account or log in with your existing credentials.
  • Next, set the Action type to Add or Update in Sendinblue and fill in the details related to Email; here, we can also use the data sent from the Webhook. In the following screenshot, we select the EMail field data to be the email received from the webhook.
  • Similarly, you can add a Send Transactional Email in Sendinblue action to the workflow using the Seninblue Zap.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store