How to Integrate Retool with SpyFu

Log in to your SpyFu account at spyfu.com. Navigate to your account settings by clicking your profile name in the top navigation bar and selecting Account Settings or API from the dropdown. SpyFu provides a secret_key (sometimes also called an API key) for programmatic access to the API. Copy this key — it is a long alphanumeric string that authenticates all API requests. SpyFu's API authentication is simple: you append the secret_key as a URL parameter to every request. While this is a straightforward authentication pattern, it means the key could be visible in server logs or network monitoring if not handled carefully. Retool's server-side proxy prevents the key from reaching the browser. In Retool, navigate to Settings (gear icon in the left sidebar on the Retool home page) → Configuration Variables. Click Add Variable, set the name to SPYFU_SECRET_KEY, paste your API key as the value, and toggle the Secret switch to On. Marking as Secret ensures the variable is only accessible in resource configurations and never sent to the browser. Click Save. This one-time setup makes the key available across all Retool apps without requiring it to be typed into individual queries.

Navigate to the Resources tab in the Retool left sidebar or top navigation. Click the Add Resource button in the top right corner. In the resource type selector, search for 'REST API' or scroll to find it, then click REST API to open the configuration form. In the Name field, enter 'SpyFu API'. In the Base URL field, enter the SpyFu API base URL: https://www.spyfu.com/apis/domain_api — note that SpyFu organizes its API into multiple sub-APIs (domain_api, keyword_api, etc.), each with its own base URL path. You may choose to create one resource per SpyFu API group, or set the base URL to https://www.spyfu.com/apis and specify the sub-path in individual queries. For authentication, SpyFu uses a URL parameter (secret_key) rather than an HTTP header. Scroll to the URL Parameters section in the resource configuration and click Add parameter. Set Key to secret_key and Value to {{ retoolContext.configVars.SPYFU_SECRET_KEY }}. This appends your API key to every request URL automatically. Add a Header: Key = Accept, Value = application/json. Click Save Changes. The SpyFu API resource now appears in your Resources list. Because SpyFu has multiple API modules with different base URLs, you may need additional resources (e.g., one for keyword_api) — follow the same steps with the appropriate base URL for each.

Open or create a Retool app. In the Code panel at the bottom, click + New to create your first query. Name it getDomainPaidKeywords. Select your SpyFu API resource. Set method to GET and path to /v2/domain/getTopPaidKeywords (verify the exact endpoint from SpyFu's API documentation). Add URL parameters: domain = {{ domainInput.value }}, pageSize = 100, startingRow = 1. The secret_key parameter is already included automatically from the resource configuration. Set Trigger to run automatically when domainInput.value changes. Click Run with a test domain (e.g., 'example.com') to verify the response structure. Create a second query named getDomainMetrics. Resource = SpyFu API, method = GET, path = /v2/domain/getAdHistory. Add parameter: domain = {{ domainInput.value }}. This retrieves historical ad data including estimated monthly budget over time. Create a third query named getKeywordCompetitors. Resource = SpyFu API, path = /v2/domain/getTopCosPaidKeywordsOverlap or the equivalent overlap endpoint. Add parameter: domain = {{ domainInput.value }}. This returns domains that overlap in PPC keyword targeting with the queried domain. These three queries provide the data for a competitive PPC intelligence dashboard covering keyword lists, spend estimates, and competitive overlap.

1// JavaScript transformer to format paid keyword data for Table display
2// Attach to getDomainPaidKeywords query (Advanced → Transform data)
3const result = data;
4if (!result || !result.results) return [];
5
6return result.results.map(kw => ({
7  keyword: kw.keyword || kw.term || 'Unknown',
8  monthlySearches: (kw.searchVolume || kw.searches || 0).toLocaleString(),
9  estimatedCpc: kw.averageCpc
10    ? `$${parseFloat(kw.averageCpc).toFixed(2)}`
11    : 'N/A',
12  estimatedMonthlyCost: kw.monthlyBudget
13    ? `$${parseFloat(kw.monthlyBudget).toFixed(0)}`
14    : 'N/A',
15  position: kw.rank || kw.position || 'N/A',
16  competition: kw.competition
17    ? (kw.competition * 100).toFixed(0) + '%'
18    : 'N/A'
19})).sort((a, b) => {
20  const aSearches = parseInt((a.monthlySearches || '0').replace(/,/g, ''));
21  const bSearches = parseInt((b.monthlySearches || '0').replace(/,/g, ''));
22  return bSearches - aSearches;
23});

Assemble the dashboard interface. At the top of the canvas, drag a Text Input component labeled 'Competitor Domain' with placeholder 'e.g., competitor.com'. Next to it, add a Button labeled 'Analyze Domain' that triggers getDomainPaidKeywords, getDomainMetrics, and getKeywordCompetitors simultaneously via three event handlers. Below the input row, drag three Stat components. Configure them with data from getDomainMetrics: Estimated Monthly Ad Spend (format as currency), Total PPC Keywords, and Organic Keywords Count. These give an instant overview of a competitor's search investment. Drag a Table component onto the main canvas area. Set Data source to {{ getDomainPaidKeywords.data }} with the formatPaidKeywords transformer applied. Configure visible columns: keyword, monthlySearches, estimatedCpc, estimatedMonthlyCost, position, and competition. Enable column sorting so users can rank by monthly searches or CPC. Add a column filter using the searchInput component to narrow results to specific keyword themes. Drag a Chart component alongside the Table. Set type to Bar. Create a transformer that extracts the top 15 paid keywords by monthly search volume and maps them to { keyword, monthlySearches } objects. Set X-axis to keyword (truncated for display) and Y-axis to monthlySearches. This bar chart immediately visualizes the highest-traffic terms a competitor is targeting. For marketing teams doing systematic competitive analysis across large keyword sets, RapidDev's team can help build advanced multi-competitor dashboards with keyword gap analysis.

1// Standalone transformer for top keywords Bar chart
2// Reference as {{ topKeywordsChartData }} in Chart Data source
3const keywords = getDomainPaidKeywords.data;
4if (!keywords || !keywords.results) return [];
5
6return keywords.results
7  .filter(kw => kw.searchVolume > 0)
8  .sort((a, b) => (b.searchVolume || 0) - (a.searchVolume || 0))
9  .slice(0, 15)
10  .map(kw => ({
11    keyword: kw.keyword && kw.keyword.length > 25
12      ? kw.keyword.substring(0, 25) + '...'
13      : kw.keyword,
14    searches: kw.searchVolume || 0
15  }));

Extend the dashboard with multi-competitor comparison. Add two more Text Input components labeled 'Competitor 2' and 'Competitor 3'. Create duplicate queries for each competitor domain (getDomainPaidKeywords2, getDomainPaidKeywords3) that reference the second and third text inputs. Set all queries to run on the Analyze button click. Create a JavaScript transformer named keywordOverlapAnalysis. This transformer takes the keyword lists from all three competitor queries and your domain query, then computes overlap and gap metrics: keywords all competitors bid on (high competition, likely profitable), keywords only one competitor bids on (niche opportunities), and keywords no one bids on above a certain search volume threshold (blue ocean opportunities). Drag a new Table component below the main keyword table labeled 'Keyword Gaps - Opportunities'. Bind it to the keywordOverlapAnalysis transformer output. Configure columns: keyword, monthly searches, number of competitors targeting it, and an Opportunity Score (calculated as search volume / number of competitors bidding). Sort by Opportunity Score descending to surface the best PPC targets. Add a second Chart showing a comparison of estimated monthly spend for all analyzed domains as a grouped bar chart. This lets account managers quickly see where competitors are concentrating budget and whether the investment trend is increasing or decreasing.

1// Keyword gap and overlap analysis transformer
2// Compares keyword lists from multiple competitor queries
3const myKeywords = new Set(
4  (getDomainPaidKeywords.data?.results || []).map(k => k.keyword)
5);
6const comp1Keywords = getDomainPaidKeywords1?.data?.results || [];
7const comp2Keywords = getDomainPaidKeywords2?.data?.results || [];
8
9// Find keywords competitors bid on that you don't
10const allCompKeywords = [...comp1Keywords, ...comp2Keywords];
11const gaps = allCompKeywords
12  .filter(kw => !myKeywords.has(kw.keyword))
13  .reduce((acc, kw) => {
14    const existing = acc.find(k => k.keyword === kw.keyword);
15    if (existing) {
16      existing.competitorCount++;
17    } else {
18      acc.push({
19        keyword: kw.keyword,
20        monthlySearches: kw.searchVolume || 0,
21        estimatedCpc: `$${parseFloat(kw.averageCpc || 0).toFixed(2)}`,
22        competitorCount: 1,
23        opportunityScore: (kw.searchVolume || 0)
24      });
25    }
26    return acc;
27  }, [])
28  .sort((a, b) => b.opportunityScore - a.opportunityScore);
29
30return gaps.slice(0, 50);