FlutterFlow and Campaign Monitor integration: Step-by-Step Guide 2024

   

• Sign Up/Login: If you don’t have an account, sign up at Campaign Monitor. If you already have an account, simply log in.
• Create an API Key:
• Navigate to 'Account Settings'.
• Go to the 'API Keys' section.
• Click on 'Create API Key' and copy the key generated.

   

• Open FlutterFlow: Log in to your FlutterFlow account.
• Create New Project: If you haven’t created a project yet, follow the on-screen instructions to set one up.
• Existing Project: If you’re integrating with an existing project, open it from your dashboard.

   

• Important: You’ll need to use the Dart `http` package to interact with Campaign Monitor’s API.
• Navigate to Project Settings:
• Go to 'Settings & Integrations' from the sidebar.
• Scroll down to the 'Custom Packages' section.
• Add `http` as a package (Make sure the version is compatible with your Flutter and Dart versions).

   

• Go to Backend Section:
• Navigate to the 'Backend' section on the left panel.
• Select 'API Calls'.
• Set Up a New API Call:
• Click on 'Add API Call'.
• API Name: Provide a suitable name like `campaignMonitorSubscribe`.
• Request Type: Select `POST`.
• URL: Set the URL to `https://api.createsend.com/api/v3.2/subscribers/{listID}.json`, where `{listID}` is replaced with your Campaign Monitor list ID.
• Headers:
• Key: `Authorization`
• Value: `Bearer YOUR_CAMPAIGN_MONITOR_API_KEY`
• Request Body: Add the relevant fields based on the Campaign Monitor API. Generally, it looks like:

{
  "EmailAddress": "[email protected]",
  "Name": "SubscriberName",
  "Resubscribe": true
}
  

   

• Create User Input Form:
• Add Widgets:
• Use TextField Widget for Email and Name inputs.
• Optionally, add a button to trigger the API call.
• Configure Widgets:
• Set unique IDs or variable names for these input fields for use in API calls, e.g., `emailInput` and `nameInput`.
• Link API Call to Form:
• Go to the page where you created the form.
• Select the button or user action that will trigger the API call.
• In the 'Actions' panel, add an action of type `Backend Call`.
• Configure it to call `campaignMonitorSubscribe` and map the user inputs:
• EmailAddress: Bind it to your `emailInput`.
• Name: Bind it to your `nameInput`.

   

• Success Response:
• Add a condition to check for a successful response.
• Use an AlertDialog or Snackbar to notify the user that they’ve been subscribed.
• Error Response:
• Handle errors gracefully.
• Show an error message using an AlertDialog or Snackbar.

   

• Test the API Call:
• Run your project in FlutterFlow.
• Fill in the form and submit it.
• Monitor the network calls to ensure the API call is successful.
• Verify in Campaign Monitor:
• Log in to your Campaign Monitor account.
• Navigate to the specific subscriber list to ensure new subscriptions are being recorded.

   

• Security: Ensure that sensitive keys are stored securely and use environment variables or a secret management service if necessary.
• Error Handling: Implement comprehensive error handling for different types of API errors.
• Logging: Use logging to maintain a record of API calls and responses for troubleshooting.

 

By following these steps, you can successfully integrate FlutterFlow with Campaign Monitor, allowing you to capture user data and manage your email campaigns directly from your FlutterFlow application.