How to Integrate Retool with Klaviyo

Go to the Resources tab in your Retool instance and click Add Resource. Select REST API from the list of resource types. Name the resource 'Klaviyo API'. In the Base URL field, enter https://a.klaviyo.com. This is Klaviyo's API v2 base URL — all endpoint paths will be appended to this base. Do not include a trailing slash. Now configure authentication. Klaviyo uses Bearer token authentication with your private API key. In the Authentication section, select Bearer Token from the dropdown. In the Token field, enter your private API key — this is the long string starting with 'pk_' that you generated in Klaviyo's Settings → API Keys page. Alternatively, you can use a configuration variable to store the token securely. Navigate to Settings → Configuration Variables, create a variable named KLAVIYO_PRIVATE_KEY, mark it as Secret, and then in the Bearer Token field use {{ retoolContext.configVars.KLAVIYO_PRIVATE_KEY }} instead of the raw key value. Klaviyo's v2 API also requires a revision header. Add a header in the Default Headers section: key = revision, value = 2024-02-15 (or the latest API revision date). Click Save Changes.

Create your first query to search for subscriber profiles. In your Retool app, open the Code panel and click the + icon to add a query. Name it searchProfiles and select the Klaviyo API resource. Set Method to GET. In the Path field, enter /api/profiles. Klaviyo's profiles endpoint supports filtering by email using the filter query parameter. Add a URL parameter: key = filter, value = equals(email,'{{ textInput_email.value }}'). This uses Klaviyo's filter syntax to find an exact email match. For browsing all profiles with pagination, use cursor-based pagination. Klaviyo v2 returns a next cursor in the response links.next field. Add a URL parameter: key = page[size], value = 50 to limit results per page. For lookup by Klaviyo profile ID, create a separate query named getProfileById with path /api/profiles/{{ textInput_profileId.value }} (GET, no body). After running the search query, you'll get a data array with profile objects. Each profile has attributes including email, first_name, last_name, phone_number, and a properties object with custom attributes set by your e-commerce platform.

1// JavaScript transformer — flatten Klaviyo profile response
2const profiles = (data.data || []);
3return profiles.map(profile => {
4  const attrs = profile.attributes || {};
5  return {
6    id: profile.id,
7    email: attrs.email || 'N/A',
8    first_name: attrs.first_name || '',
9    last_name: attrs.last_name || '',
10    phone_number: attrs.phone_number || 'N/A',
11    location: attrs.location
12      ? `${attrs.location.city || ''}, ${attrs.location.country || ''}`.trim()
13      : 'Unknown',
14    subscriptions: attrs.subscriptions?.email?.marketing?.consent || 'unknown',
15    created: attrs.created
16      ? new Date(attrs.created).toLocaleDateString()
17      : 'N/A',
18    // Custom properties stored in properties object
19    lifetime_value: attrs.properties?.lifetime_value
20      ? `$${attrs.properties.lifetime_value.toFixed(2)}`
21      : 'N/A'
22  };
23});

Create a query to retrieve campaign performance data. Name it getCampaigns. Set Method to GET, Path to /api/campaigns. Add a URL parameter: key = filter, value = equals(messages.channel,'email') to limit results to email campaigns only. Klaviyo's campaign endpoint returns campaign objects with basic metadata — name, status, created_at, send_time. To get actual performance metrics (opens, clicks, revenue), you need to use the campaign metrics endpoint. Create a second query named getCampaignMetrics with: - Method: GET - Path: /api/campaign-message-send-jobs/{{ table_campaigns.selectedRow.id }}/campaign-messages For aggregate campaign stats, use Klaviyo's reporting endpoint. Create a query named getCampaignReport: - Method: POST - Path: /api/campaign-values-reports - Body: JSON with the campaign ID and metric IDs for the stats you want Bind the getCampaigns query results to a Table component named table_campaigns. When a row is selected in table_campaigns, getCampaignMetrics automatically runs with the selected campaign ID, powering a detail panel. Add a Chart component showing open rate trends using the reporting endpoint data.

1// JavaScript transformer — format campaign list for display
2const campaigns = (data.data || []);
3return campaigns
4  .filter(c => c.attributes.status !== 'draft')
5  .map(campaign => {
6    const attrs = campaign.attributes || {};
7    return {
8      id: campaign.id,
9      name: attrs.name || 'Unnamed',
10      status: attrs.status || 'unknown',
11      send_time: attrs.send_time
12        ? new Date(attrs.send_time).toLocaleDateString('en-US', {
13            year: 'numeric', month: 'short', day: 'numeric'
14          })
15        : 'Not sent',
16      created_at: attrs.created_at
17        ? new Date(attrs.created_at).toLocaleDateString()
18        : 'N/A',
19      subject: attrs.campaign_messages?.[0]?.label || 'N/A'
20    };
21  })
22  .sort((a, b) => new Date(b.send_time) - new Date(a.send_time));
23

Create queries to manage Klaviyo lists from Retool. First, create getLists (GET, /api/lists) to retrieve all lists with their names and profile counts. This powers a list selector dropdown in your app. Next, create getListProfiles to retrieve profiles in a selected list: - Method: GET - Path: /api/lists/{{ dropdown_list.value }}/profiles - URL parameter: page[size] = 100 For adding a profile to a list, create addProfileToList: - Method: POST - Path: /api/lists/{{ dropdown_list.value }}/relationships/profiles - Body: { "data": [{ "type": "profile", "id": "{{ textInput_profileId.value }}" }] } For removing a profile from a list, create removeProfileFromList: - Method: DELETE - Path: /api/lists/{{ dropdown_list.value }}/relationships/profiles - Body: { "data": [{ "type": "profile", "id": "{{ table_profiles.selectedRow.id }}" }] } Add a Dropdown component named dropdown_list with options bound to {{ getLists.data.data.map(l => ({ label: l.attributes.name, value: l.id })) }}. When the dropdown selection changes, trigger getListProfiles. The resulting Table shows all subscribers in the selected list. Add action buttons for Add to List and Remove from List, each triggering their respective queries and refreshing the list on success via event handlers.

1// JavaScript transformer — format list profiles for display
2const profiles = (data.data || []);
3return profiles.map(profile => {
4  const attrs = profile.attributes || {};
5  return {
6    id: profile.id,
7    email: attrs.email || 'N/A',
8    name: `${attrs.first_name || ''} ${attrs.last_name || ''}`.trim() || 'N/A',
9    subscribed: attrs.subscriptions?.email?.marketing?.consent === 'SUBSCRIBED'
10      ? 'Subscribed'
11      : 'Unsubscribed',
12    added_date: attrs.created
13      ? new Date(attrs.created).toLocaleDateString()
14      : 'N/A'
15  };
16});

The most powerful Retool-Klaviyo dashboard combines subscriber data from Klaviyo's API with actual order data from your e-commerce database. Add a second resource — your PostgreSQL or MySQL database — to the same Retool app. Create a database query named getCustomerOrders: - SQL: SELECT order_id, created_at, total_amount, status FROM orders WHERE customer_email = '{{ textInput_email.value }}' ORDER BY created_at DESC LIMIT 50 Now the profile lookup panel can show both Klaviyo engagement data (emails received, opened, clicked) and actual purchase data (orders placed, total spend, last purchase date) side by side. This combination is more valuable than either system alone. Create a JavaScript query named combineProfileData that merges both datasets: For RapidDev-style complex integrations that join multiple data sources, Retool's multi-resource app pattern is the ideal architecture. Add a Retool Table showing orders on the left and a Klaviyo event timeline on the right, with a shared email input controlling both datasets. Add a Chart component that plots email engagement events (x-axis) against purchase events (y-axis) over time, revealing the relationship between Klaviyo email touches and conversion. This kind of cross-system analysis is exactly what Retool excels at and is difficult to build in either Klaviyo's dashboard or your e-commerce admin alone.

1// JavaScript query — merge Klaviyo profile with order data
2// This query runs after both searchProfiles and getCustomerOrders complete
3const klaviyoProfile = searchProfiles.data?.data?.[0];
4const orders = getCustomerOrders.data || [];
5
6if (!klaviyoProfile) return { error: 'Profile not found' };
7
8const attrs = klaviyoProfile.attributes || {};
9const orderStats = {
10  total_orders: orders.length,
11  total_spend: orders.reduce((sum, o) => sum + parseFloat(o.total_amount || 0), 0),
12  last_order_date: orders.length > 0
13    ? new Date(orders[0].created_at).toLocaleDateString()
14    : 'Never',
15  avg_order_value: orders.length > 0
16    ? (orders.reduce((sum, o) => sum + parseFloat(o.total_amount || 0), 0) / orders.length).toFixed(2)
17    : 0
18};
19
20return {
21  klaviyo_id: klaviyoProfile.id,
22  email: attrs.email,
23  name: `${attrs.first_name || ''} ${attrs.last_name || ''}`.trim(),
24  klaviyo_consent: attrs.subscriptions?.email?.marketing?.consent,
25  ...orderStats,
26  total_spend_formatted: `$${orderStats.total_spend.toFixed(2)}`,
27  avg_order_formatted: `$${orderStats.avg_order_value}`
28};