How to Integrate Retool with Constant Contact

Constant Contact V3 API requires OAuth 2.0 authentication. Start by creating a developer application at developer.constantcontact.com. Log in with your Constant Contact credentials and navigate to My Applications → New Application. Give the application a name like 'Retool Integration'. Select the permissions your application needs — for a read-only dashboard, select the campaign_data and contact_data scopes. For write operations, also add the contact_data write scope. After creating the application, you will see your Application Key (this is the Client ID) and you can generate an Application Secret. For a server-side Retool integration, the simplest authentication approach is to use Constant Contact's Authorization Code Grant flow to generate an access token manually for initial setup, then store it in a Retool Configuration Variable. Navigate to the API Explorer section in the developer portal — it allows you to authenticate with your account and retrieve an access token directly. Alternatively, use Constant Contact's provided Postman collection to execute the OAuth flow and retrieve both an access token and a refresh token. The access token expires in 24 hours; the refresh token lasts for 30 days and can be used to generate new access tokens. For a production Retool integration, set up a Retool Workflow that runs daily to refresh the access token using the refresh token endpoint: POST https://authz.constantcontact.com/oauth2/default/v1/token with grant_type=refresh_token and your stored refresh_token value. Store the resulting access_token in a Retool Configuration Variable.

1// Refresh token request body for Retool Workflow
2// POST to https://authz.constantcontact.com/oauth2/default/v1/token
3{
4  "grant_type": "refresh_token",
5  "refresh_token": "{{ retoolContext.configVars.CC_REFRESH_TOKEN }}",
6  "client_id": "{{ retoolContext.configVars.CC_CLIENT_ID }}",
7  "client_secret": "{{ retoolContext.configVars.CC_CLIENT_SECRET }}"
8}

In Retool, click the Resources tab in the left sidebar and select Add Resource. Choose REST API from the resource type list. Name the resource 'Constant Contact V3 API'. Set the Base URL to https://api.cc.email/v3. For authentication, select Bearer Token from the Authentication dropdown. Paste your Constant Contact access token (obtained in Step 1) into the Bearer Token field. For production use, reference a Configuration Variable instead of a static token: enter {{ retoolContext.configVars.CC_ACCESS_TOKEN }} in the Bearer Token field after storing your access token as a secret Configuration Variable in Settings → Configuration Variables. Add a default header: Content-Type with value application/json. This header is required for all POST and PUT requests and harmless for GET requests, so it is safe to include as a default. Click Save Resource. To verify the connection, create a test query in a new Retool app: set Method to GET and Path to /contact_lists. Click Preview. If the resource is correctly configured, Retool will return a JSON response containing your Constant Contact contact lists. If you see a 401 Unauthorized response, the access token may have expired — generate a fresh token using the developer portal's API Explorer and update the resource.

Create the core contact management queries for your dashboard. First, create a query named 'getContactLists'. Set Method to GET and Path to /contact_lists. Add URL parameter limit → 50 to retrieve all lists. This query powers the list selector component in your app and runs on page load. Create a second query named 'searchContacts'. Set Method to GET and Path to /contacts. Add URL parameters: q → {{ contactSearchInput.value }} (the search term — Constant Contact searches across email, first name, and last name), lists → {{ listFilter.value || '' }} (comma-separated list IDs to filter by membership), status → Active, limit → {{ pagination.pageSize || 25 }}, include → custom_fields,list_memberships,taggings. The include parameter expands nested contact data without additional API calls. Create a transformer for searchContacts that normalizes the paginated response. Constant Contact wraps contacts in a contacts array with a _links object for cursor-based pagination. The transformer maps each contact to a flat object: contact_id, email_address, first_name, last_name, list_names (derived by joining list membership names), engagement_summary (open rate from the engagement_summary field), and create_source. For updating contacts, create a PATCH query named 'updateContact'. Set Path to /contacts/{{ contactsTable.selectedRow.contact_id }}, Method to PATCH, and Body to a JSON object containing only the fields being updated. Constant Contact's PATCH endpoint accepts partial updates — you only need to send the fields that changed.

1// Transformer: normalize Constant Contact contacts response
2const contacts = data.contacts || [];
3return contacts.map(contact => ({
4  contact_id: contact.contact_id,
5  email: contact.email_address?.address || '(no email)',
6  first_name: contact.first_name || '',
7  last_name: contact.last_name || '',
8  status: contact.email_address?.permission_to_send || 'unknown',
9  lists: (contact.list_memberships || []).join(', '),
10  open_rate: contact.engagement_summary?.average_open_rate
11    ? (contact.engagement_summary.average_open_rate * 100).toFixed(1) + '%'
12    : 'N/A',
13  created: new Date(contact.created_at).toLocaleDateString(),
14  updated: new Date(contact.updated_at).toLocaleDateString()
15}));

Create queries to fetch email campaign data and engagement statistics. Create a query named 'getCampaigns'. Set Method to GET and Path to /emails. Add URL parameters: status → {{ campaignStatusFilter.value || 'ALL' }}, limit → 50. Constant Contact's campaign status values are DRAFT, SCHEDULED, SENT, CANCELLED, and REMOVED. The response includes campaign_id, name, current_status, subject, and permalink_url. Create a second query named 'getCampaignStats'. Set Method to GET and Path to /reports/summary_reports/email_campaign_summaries. Add URL parameters: campaign_ids → {{ campaignsTable.selectedRow?.campaign_id || '' }}, limit → 50. This endpoint returns aggregate statistics per campaign: sends, opens, clicks, bounces, forwards, and unsubscribes. Create a transformer named 'mergeCampaignData' that combines the campaigns list with their stats, computing derived metrics like open rate (opens / sends), click-through rate (clicks / sends), and bounce rate (bounces / sends). Format these as percentages in the transformer output. Create a JavaScript query that runs both getCampaigns and getCampaignStats using Promise.all and merges the results in memory — Retool's JavaScript queries support await syntax for orchestrating multiple API calls. Alternatively, run getCampaigns on page load and getCampaignStats on row selection of the campaigns table to load stats lazily.

1// Transformer: compute campaign performance metrics
2const campaigns = data || [];
3return campaigns.map(campaign => {
4  const sends = campaign.sends || 0;
5  const opens = campaign.opens || 0;
6  const clicks = campaign.clicks || 0;
7  const bounces = campaign.bounces || 0;
8  return {
9    campaign_id: campaign.campaign_id,
10    name: campaign.campaign_name || campaign.name,
11    status: campaign.current_status || campaign.status,
12    sends: sends.toLocaleString(),
13    open_rate: sends > 0 ? ((opens / sends) * 100).toFixed(1) + '%' : '0.0%',
14    click_rate: sends > 0 ? ((clicks / sends) * 100).toFixed(1) + '%' : '0.0%',
15    bounce_rate: sends > 0 ? ((bounces / sends) * 100).toFixed(1) + '%' : '0.0%',
16    unsubscribes: campaign.unsubscribes || 0
17  };
18});

Build the complete email marketing dashboard UI using Retool's component library. At the top, add three Stat components showing total active contacts (from getContactLists), total campaigns sent, and average open rate across all campaigns. Below the stats, organize the dashboard into two sections using a Tab component or side-by-side Containers: the Contacts section and the Campaigns section. In the Contacts section: add a Text Input named 'contactSearchInput' with placeholder 'Search by email or name', a Select component named 'listFilter' populated with getContactLists.data, and a Table named 'contactsTable' bound to searchContacts.data. Configure the table columns for email, first_name, last_name, status (with color-coded tag: green for Implicit permission, blue for Explicit, red for Unsubscribed), and open_rate. Add a row action 'Edit Contact' that opens a Modal containing a Form pre-populated with the selected contact's data and a Save button that triggers updateContact. In the Campaigns section: add a Select component for status filtering (All/Draft/Scheduled/Sent), a Table named 'campaignsTable' showing campaign name, status, sends, open rate, click rate, and bounce rate, and a Bar Chart below the table showing open rates across the last 10 sent campaigns. Connect the campaignsTable row selection to trigger getCampaignStats for the selected campaign. Set searchContacts and getCampaigns to run on page load.