How to Integrate Retool with Keap

To connect Retool to Keap, you need OAuth 2.0 credentials from a registered developer application. Navigate to Keap's developer portal at https://keys.developer.keap.com/ and sign in with your Keap account. Click 'Create New Application' and fill in the application details: a name (e.g., 'Retool Integration'), a description, and your organization. For the Redirect URI field — which is required for the OAuth authorization code flow — enter the Retool OAuth callback URL. On Retool Cloud, this is https://oauth.retool.com/oauth/oauthcallback. If you are using self-hosted Retool, it is https://your-retool-instance.com/oauth/oauthcallback. Submit the application registration. Keap will display your Client ID and Client Secret — copy both values immediately. The Client Secret is shown only during registration; if you lose it you must regenerate it. Keep these credentials secure as they authorize full API access to your Keap account. Keap's OAuth scopes cover all standard operations (contacts, opportunities, emails) with a single application registration — you do not need to request individual scopes during app creation.

In Retool, navigate to the Resources tab and click Add Resource. Select REST API from the resource type list. Name the resource 'Keap CRM'. In the Base URL field, enter https://api.infusionsoft.com/crm/rest/v2 — note that Keap's REST API uses the infusionsoft.com domain despite the product being renamed to Keap. Scroll to the Authentication section and select OAuth 2.0 from the dropdown. Configure the OAuth 2.0 settings with these values: Authorization URL: https://accounts.infusionsoft.com/app/oauth/authorize, Token URL: https://api.infusionsoft.com/token, Client ID: your application's Client ID, Client Secret: your application's Client Secret, Scopes: leave empty (Keap grants all scopes on OAuth authorization), and Authorization Code in: Header. Under 'Token storage', select 'Server-side' for security. Click 'Connect' to initiate the OAuth authorization flow — Retool will open a popup window redirecting you to Keap's authorization page where you log in with your Keap credentials and authorize the application. After authorization, Retool receives and stores the access and refresh tokens automatically. Add a default header for Content-Type: application/json. Click Save Changes. Retool will auto-refresh the access token using the refresh token whenever it expires, so you do not need to manually re-authorize.

In your Retool app's Code panel, click + to create a new query named 'getContacts'. Select your Keap CRM resource. Set Method to GET and Path to /contacts. Keap's contacts endpoint supports several query parameters for filtering and searching. In URL Parameters, add: 'limit' set to {{ pagination.pageSize || 25 }}, 'offset' set to {{ (pagination.page - 1) * (pagination.pageSize || 25) }}, 'given_name' set to {{ nameSearch.value?.split(' ')[0] || '' }} for first name search, 'family_name' set to {{ nameSearch.value?.split(' ')[1] || '' }} for last name search, 'email' set to {{ emailSearch.value || '' }} for email search, and 'tag_id' set to {{ tagFilter.value || '' }} to filter by Keap tag. The response from Keap's contacts endpoint includes a 'contacts' array directly (not JSON:API format, unlike some CMSs). Each contact has an 'id', 'given_name', 'family_name', 'email_addresses', 'job_title', 'company', 'tag_ids', 'date_created', and 'last_updated' fields. Add a transformer to flatten the contacts array and extract the primary email address from the email_addresses array. Set the query to run on app load and re-run when search input values change (set the query's trigger to 'On change' of the search inputs).

1// Transformer: flatten Keap contacts response
2const contacts = data.contacts || [];
3return contacts.map(contact => ({
4  id: contact.id,
5  name: [contact.given_name, contact.family_name].filter(Boolean).join(' ') || '(No Name)',
6  email: contact.email_addresses?.[0]?.email || '',
7  company: contact.company?.company_name || '',
8  job_title: contact.job_title || '',
9  tags: (contact.tag_ids || []).join(', '),
10  owner: contact.owner_id || '',
11  created: contact.date_created ? new Date(contact.date_created).toLocaleDateString() : '',
12  updated: contact.last_updated ? new Date(contact.last_updated).toLocaleDateString() : ''
13}));

In the Retool canvas, drag a Table component and set its Data to {{ getContacts.data }}. Configure visible columns: name, email, company, job_title, tags, created. Add a row above the table with two Text Input components — one for name search (named 'nameSearch') and one for email search (named 'emailSearch'), and a Select component for tag filtering (named 'tagFilter', populated by a separate query to GET /tags that returns all tags in the Keap account). Add a Pagination component below the table. Create a Contact Detail side panel: add a Container to the right of the table, bind a Text component to show the selected contact's name as a heading, and add individual Text fields for email, phone, company, and address drawn from a second query named 'getContactDetail' that calls GET /contacts/{{ contactsTable.selectedRow.id }} and returns the full contact object including custom fields and address details. Below the detail data, create a Tags section showing current tags with a Remove button per tag (DELETE /contacts/{{ selectedId }}/tags/{{ tagId }}), and an Add Tag section with a Select dropdown and an Apply button (POST /contacts/{{ selectedId }}/tags with body { tagIds: [tagSelect.value] }). Add an Edit Contact Form with fields for first name, last name, job title, and company that submits a PATCH request to /contacts/{{ contactsTable.selectedRow.id }} to update the contact record.

1{
2  "method": "PATCH",
3  "path": "/contacts/{{ contactsTable.selectedRow.id }}",
4  "body": {
5    "given_name": "{{ firstNameInput.value }}",
6    "family_name": "{{ lastNameInput.value }}",
7    "job_title": "{{ jobTitleInput.value }}",
8    "company": {
9      "company_name": "{{ companyInput.value }}"
10    }
11  }
12}

Create a query named 'getOpportunities' with GET method and path /opportunities. Add URL parameters: 'limit' set to {{ pagination.pageSize || 50 }}, 'stage_name' set to {{ stageFilter.value || '' }}, and 'user_id' set to {{ ownerFilter.value || '' }}. The response includes an 'opportunities' array where each opportunity has title, contact (with id and full_name), stage (with name and id), estimated_close_date, projected_revenue_low, projected_revenue_high, and user fields. Add a transformer to flatten this and calculate a midpoint revenue estimate. Add a second query named 'getEmailCampaigns' with GET method and path /campaigns — note that Keap refers to sequences and campaigns differently; the /campaigns endpoint returns broadcast campaigns. Apply a transformer to extract campaign name, status, sent count, open rate, and click rate from each campaign. Build the Retool app with a Tab component: the first tab shows the Contacts table and detail panel from the previous step, the second tab shows the Opportunities pipeline with a summary Chart (Bar chart of total projected_revenue by stage_name), and the third tab shows the Campaigns table. For the Opportunities tab, add a total pipeline value metric at the top using a Text component bound to {{ getOpportunities.data?.reduce((sum, opp) => sum + (opp.revenue_estimate || 0), 0).toLocaleString('en-US', {style: 'currency', currency: 'USD'}) }}. For complex CRM automations connecting Keap with your internal databases or ERP systems, RapidDev's team can help architect and build your Retool solution.

1// Transformer: flatten Keap opportunities with revenue midpoint
2const opps = data.opportunities || [];
3return opps.map(opp => ({
4  id: opp.id,
5  title: opp.opportunity_title || '',
6  contact_name: opp.contact?.full_name || '',
7  contact_id: opp.contact?.id || '',
8  stage: opp.stage?.name || '',
9  close_date: opp.estimated_close_date ? new Date(opp.estimated_close_date).toLocaleDateString() : '',
10  revenue_estimate: Math.round(((opp.projected_revenue_low || 0) + (opp.projected_revenue_high || 0)) / 2),
11  owner: opp.user?.first_name + ' ' + (opp.user?.last_name || ''),
12  next_action: opp.next_action_notes || ''
13}));