How to Integrate Retool with Campaign Monitor

In Campaign Monitor, click your account name in the top-right corner and select Account Settings. Navigate to the API Keys section. If you don't have an API key yet, click Generate API Key. Copy the key — it's a long alphanumeric string. Campaign Monitor's API uses Basic Auth where the API key is the username and any string can be the password — the conventional placeholder is 'x'. This is similar to how Mailchimp's API key authentication works. The API key gives access to all clients and accounts associated with your Campaign Monitor login. Note that Campaign Monitor has two levels of API keys: 1. Account-level API key (from Account Settings) — gives access to all clients under your account. This is what you want for a multi-client agency dashboard. 2. Client-level API key — scoped to a single client, available from the client's settings. Use this if you're building a dashboard for a specific client only. For most agency Retool dashboards, you'll use the account-level API key. Campaign Monitor's API base URL is https://api.createsend.com/api/v3.3 — note the version number (v3.3 is the current stable version as of 2024).

In Retool, navigate to the Resources tab and click Add Resource. Select REST API from the resource type list. Configure the resource: - Name: Campaign Monitor API - Base URL: https://api.createsend.com/api/v3.3 For authentication, select Basic Auth from the Authentication dropdown. Set Username to your Campaign Monitor API key and Password to x (the literal letter 'x' — Campaign Monitor ignores the password field). If you prefer to store the API key in Configuration Variables (recommended for production), go to Settings → Configuration Variables, create CAMPAIGN_MONITOR_API_KEY, mark it as secret, then use {{ retoolContext.configVars.CAMPAIGN_MONITOR_API_KEY }} as the Username. Add a Content-Type header: Key: Content-Type, Value: application/json. This is needed for POST and PUT requests. Click Create Resource. Test the connection by creating a query with method GET and path /clients.json. If it returns a JSON array of client objects (each with ClientID, Name), the authentication is working. A 401 response indicates the API key is incorrect or the Basic Auth format is wrong.

Create a query named getClients with method GET and path /clients.json. This returns all client accounts under your Campaign Monitor login. Each client object contains: ClientID, Name. Bind this to a Select component named select_client with value field ClientID and label field Name. This drives all subsequent queries. Create a getCampaigns query with method GET and path /clients/{{ select_client.value }}/campaigns.json. This returns all sent campaigns for the selected client. Each campaign includes: CampaignID, Subject, Name, SentDate, TotalRecipients, and a FromName. For draft/scheduled campaigns, use a separate query with path /clients/{{ select_client.value }}/drafts.json. Campaign analytics require an additional call per campaign — use path /campaigns/{{ campaign_id }}/summary.json to get opens, clicks, bounces, and unsubscribes. Since fetching summary stats for every campaign would require many API calls, consider using a JavaScript query that fetches summaries for only the most recent 10 campaigns using Promise.all for parallel fetching. Create a transformer that merges campaign metadata with summary stats for display in the Table component.

1// Transformer for Campaign Monitor campaigns with stats
2// Assumes data is merged from getCampaigns + individual summary calls
3const campaigns = data || [];
4return campaigns.map(campaign => ({
5  id: campaign.CampaignID,
6  name: campaign.Name || campaign.Subject,
7  subject: campaign.Subject || '',
8  sent_date: campaign.SentDate
9    ? new Date(campaign.SentDate).toLocaleDateString()
10    : '',
11  recipients: campaign.TotalRecipients || 0,
12  opens: campaign.Opens || 0,
13  unique_opens: campaign.UniqueOpens || 0,
14  open_rate: campaign.TotalRecipients > 0
15    ? `${((campaign.UniqueOpens / campaign.TotalRecipients) * 100).toFixed(1)}%`
16    : 'N/A',
17  clicks: campaign.Clicks || 0,
18  click_rate: campaign.TotalRecipients > 0
19    ? `${((campaign.UniqueClicks / campaign.TotalRecipients) * 100).toFixed(1)}%`
20    : 'N/A',
21  bounces: campaign.Bounced || 0,
22  unsubscribes: campaign.Unsubscribed || 0
23}));

Create a getLists query with method GET and path /clients/{{ select_client.value }}/lists.json. This returns all subscriber lists for the selected client. Each list object contains: ListID, Name. When a specific list is selected, create a getSubscribers query with method GET and path /lists/{{ select_list.value }}/active.json to fetch active subscribers. Add query parameters: - page: {{ pagination.page || 1 }} - pagesize: 50 - orderfield: email - orderdirection: asc The active subscribers endpoint returns: TotalNumberOfRecords (use for pagination), PageNumber, ResultsOrderedBy, OrderDirection, and a Results array. Each subscriber has: EmailAddress, Name, Date (subscription date), State, and CustomFields (an array of custom field key-value pairs). For managing subscribers: - Add subscriber: POST /subscribers/{{ select_list.value }}.json with body {"EmailAddress": "...", "Name": "...", "CustomFields": [], "Resubscribe": true} - Unsubscribe: POST /subscribers/{{ select_list.value }}/unsubscribe.json with body {"EmailAddress": "{{ table_subscribers.selectedRow.data.email }}"} - Update subscriber: PUT /subscribers/{{ select_list.value }}.json with updated fields - Delete subscriber: DELETE /subscribers/{{ select_list.value }}.json?email={{ encodeURIComponent(table_subscribers.selectedRow.data.email) }} Wire each action to a button component with confirmation dialogs for unsubscribe and delete operations.

1// Transformer for Campaign Monitor subscriber list
2const subscribers = data.Results || [];
3return subscribers.map(sub => {
4  // Flatten custom fields array into an object
5  const customFields = {};
6  (sub.CustomFields || []).forEach(field => {
7    customFields[field.Key] = field.Value;
8  });
9  return {
10    email: sub.EmailAddress,
11    name: sub.Name || '',
12    subscribed_date: sub.Date
13      ? new Date(sub.Date).toLocaleDateString()
14      : '',
15    state: sub.State,
16    ...customFields
17  };
18});

Enhance the dashboard with visual analytics using Retool's Chart component. For a campaign that's selected in the Table, create a query to fetch detailed click and open data. For email client breakdown, use GET /campaigns/{{ select_campaign.value }}/emailclients.json — this returns which email clients recipients used to open the campaign (helpful for rendering optimization decisions). For geographic data, use GET /campaigns/{{ select_campaign.value }}/opens.json with parameters: - page: 1 - pagesize: 50 - orderfield: Date - orderdirection: Desc This returns individual open events with EmailAddress, ListID, Date, and IPAddress (can be used for approximate geographic distribution). For a list growth chart, use GET /lists/{{ select_list.value }}/stats.json which returns TotalActiveSubscribers, TotalUnsubscribes, TotalDeleted, TotalBounced, and TotalUnconfirmed — use these as Stat components at the top of the subscriber panel. Build a campaign comparison Chart that shows open rate and click rate as side-by-side bars for the 10 most recent campaigns. Use the getCampaigns query data (filtered to the selected client) as the Chart's data source with campaign name on the X-axis. For agencies managing multiple clients and needing advanced multi-resource dashboards, RapidDev's team can help build cross-client reporting tools that aggregate Campaign Monitor data with CRM and sales data.

1// JavaScript query to fetch summaries for multiple campaigns in parallel
2const campaigns = getCampaigns.data || [];
3const recentCampaigns = campaigns.slice(0, 10); // last 10 campaigns
4
5const summaries = await Promise.all(
6  recentCampaigns.map(async campaign => {
7    const response = await query('getCampaignSummary', {
8      additionalScope: { campaign_id: campaign.CampaignID }
9    });
10    return {
11      ...campaign,
12      ...response.data
13    };
14  })
15);
16
17return summaries;