How to Integrate Retool with Crazy Egg

Crazy Egg's API availability depends on your subscription plan and account configuration. To check whether API access is enabled for your account, log in to Crazy Egg and navigate to Account Settings. Look for an API or Integrations section. If API credentials (typically an API key or token) are visible, note them down — Crazy Egg's API uses key-based authentication passed as a header or URL parameter. If no API section is present, your plan does not include API access, and you will use the CSV export approach instead. For accounts with API access, Crazy Egg provides a reporting API endpoint at https://api.crazyegg.com/v1/ with endpoints for snapshots and their associated data. The API key is typically sent as an x-api-key header or as a query parameter named api_key — consult the API documentation linked in your account settings for the exact authentication method. For CSV-based integration (no API access): in Crazy Egg, open a snapshot, click the Export or Download icon, and select CSV export. The export includes page element data with click counts, percentage of total clicks per element, and scroll depth data. Download this file and you will import it into Retool Database in a later step. Store your API key (if available) in a Retool Configuration Variable named CRAZY_EGG_API_KEY marked as secret.

Choose the integration path appropriate for your Crazy Egg account. If you have API access: navigate to Retool Resources tab, click Add Resource, select REST API. Name the resource 'Crazy Egg API'. Set Base URL to https://api.crazyegg.com/v1. Under Authentication, add a custom header: x-api-key → {{ retoolContext.configVars.CRAZY_EGG_API_KEY }}. Add Content-Type: application/json as an additional header. Save the resource. Test with a GET request to /snapshots to verify the connection. If using CSV import instead: navigate to Retool Database (accessible from the left sidebar in Retool). Click Create new table. Name the table 'crazy_egg_snapshots'. Define columns: snapshot_id (text), page_url (text), element_name (text), click_count (integer), click_percentage (decimal), scroll_depth_avg (decimal), date_range (text), total_visits (integer). Click Import CSV and upload your Crazy Egg export file. Map the CSV column headers to your table columns. Once imported, create a query in your Retool app using the Retool Database resource: SELECT * FROM crazy_egg_snapshots ORDER BY click_count DESC. This query is the foundation of your behavioral data panel. For ongoing use, establish a weekly process of exporting updated snapshot data from Crazy Egg and re-importing to the Retool Database table.

1-- SQL: Create the Crazy Egg data table in Retool Database
2CREATE TABLE crazy_egg_snapshots (
3  id SERIAL PRIMARY KEY,
4  snapshot_id TEXT,
5  page_url TEXT,
6  element_name TEXT,
7  element_type TEXT,
8  click_count INTEGER DEFAULT 0,
9  click_percentage DECIMAL(5,2) DEFAULT 0,
10  scroll_depth_avg DECIMAL(5,2) DEFAULT 0,
11  total_visits INTEGER DEFAULT 0,
12  date_range TEXT,
13  imported_at TIMESTAMP DEFAULT NOW()
14);

Create queries to retrieve and display Crazy Egg data. For API-connected setups, create a query named 'getSnapshots'. Set Method to GET and Path to /snapshots. The response returns a list of configured snapshots with their IDs, page URLs, tracking status, and recording counts. Create a second query named 'getSnapshotData'. Set Method to GET and Path to /snapshots/{{ snapshotsTable.selectedRow.id }}/data. This retrieves element-level click data for the selected snapshot — the specific response format varies by API version but typically includes an array of page elements with their coordinates, click counts, and percentage of total clicks. Create a transformer that normalizes the snapshot data into a flat table structure: element name or identifier, click count, percentage of page total clicks, position on page (above or below fold, computed from Y coordinate relative to viewport height), and an engagement label ('High', 'Medium', 'Low' based on click percentage thresholds). For CSV-based setups, create a query using Retool Database: SELECT *, CASE WHEN click_percentage >= 10 THEN 'High' WHEN click_percentage >= 3 THEN 'Medium' ELSE 'Low' END as engagement_level FROM crazy_egg_snapshots WHERE snapshot_id = '{{ snapshotSelector.value }}' ORDER BY click_count DESC.

1-- SQL query for CSV-imported Crazy Egg data
2-- Run against Retool Database with the crazy_egg_snapshots table
3SELECT
4  page_url,
5  element_name,
6  element_type,
7  click_count,
8  click_percentage,
9  scroll_depth_avg,
10  total_visits,
11  CASE
12    WHEN click_percentage >= 10 THEN 'High'
13    WHEN click_percentage >= 3 THEN 'Medium'
14    ELSE 'Low'
15  END as engagement_level,
16  date_range
17FROM crazy_egg_snapshots
18WHERE snapshot_id = {{ snapshotSelector.value }}
19ORDER BY click_count DESC
20LIMIT 50;

Create the cross-tool combination queries that make Retool's integration with Crazy Egg truly valuable. For a Google Analytics integration, create a separate REST API resource for the Google Analytics Data API (or use Retool's native Google Analytics connector if available on your plan). Create a query named 'getPageConversionRates'. This queries your analytics platform for conversion rate, bounce rate, and session duration per page URL, for the same pages tracked by Crazy Egg. Create a JavaScript query named 'mergeClickAndConversionData'. This joins Crazy Egg click data (keyed by page URL) with Google Analytics conversion data (keyed by page path) using a .find() or .reduce() in JavaScript to match records by URL. The merged dataset contains both behavioral signals (click density, scroll depth) and outcome metrics (conversion rate, bounce rate) per page. Create a transformer that computes a 'CRO Opportunity Score' for each page: a page with scroll_depth_avg > 60 AND conversion_rate < 2.0 scores 'High Priority'; scroll_depth_avg > 40 AND conversion_rate < 5.0 scores 'Medium Priority'; all others score 'Monitor'. This computed column gives the CRO team an actionable prioritization signal directly in the Retool table.

1// JavaScript query: merge Crazy Egg and Analytics data
2const crazyEggPages = getCrazyEggSummary.data || [];
3const analyticsPages = getPageConversionRates.data || [];
4
5return crazyEggPages.map(cePage => {
6  const analyticsPage = analyticsPages.find(ap =>
7    ap.page_path === new URL(cePage.page_url).pathname
8  ) || {};
9
10  const scrollDepth = cePage.scroll_depth_avg || 0;
11  const convRate = analyticsPage.conversion_rate || 0;
12
13  let opportunity = 'Monitor';
14  if (scrollDepth > 60 && convRate < 2) opportunity = 'High Priority';
15  else if (scrollDepth > 40 && convRate < 5) opportunity = 'Medium Priority';
16
17  return {
18    page_url: cePage.page_url,
19    total_visits: cePage.total_visits,
20    scroll_depth: scrollDepth.toFixed(1) + '%',
21    top_element_clicks: cePage.top_element_clicks,
22    conversion_rate: convRate > 0 ? convRate.toFixed(2) + '%' : 'N/A',
23    bounce_rate: analyticsPage.bounce_rate
24      ? analyticsPage.bounce_rate.toFixed(1) + '%'
25      : 'N/A',
26    cro_opportunity: opportunity
27  };
28});

Build the complete Retool CRO dashboard. At the top, add a page URL filter allowing users to select from all tracked Crazy Egg pages (using a Select component populated from the snapshots list) and a date range picker for the analytics data period. Add a stat bar with four Stat components: Tracked Pages (total snapshot count), Average Scroll Depth across all pages, Pages with High CRO Priority (computed count), and Total Visits across tracked pages. Below the stats, show the main combined data table — the mergeClickAndConversionData output — in a Table with columns: page_url (truncated, with full URL in a tooltip), scroll_depth, top_element_clicks, conversion_rate, bounce_rate, and cro_opportunity (shown as a color-coded tag: red for High Priority, yellow for Medium Priority, gray for Monitor). Sort the table by cro_opportunity with High Priority rows first. Below the main table, add a detail panel that appears when a row is selected, showing element-level click data for the selected page from the getSnapshotData query. This detail panel shows the specific page elements and their click counts, helping the CRO team understand which elements to focus on for the prioritized pages. Add a 'View in Crazy Egg' link button that opens the Crazy Egg snapshot URL directly for visual heatmap review.