How to Integrate Retool with Planoly

Planoly's API access availability depends on your subscription plan and their current developer program status. Log in to your Planoly account and navigate to Account Settings → Integrations or API section (if available) to find your API credentials. If API access is not visible in your account settings, contact Planoly support at support@planoly.com to request API access for your account — include your use case (internal analytics dashboard) in the request. Once you have your API credentials (typically an API key or token), store them securely in Retool. Navigate to your Retool instance's Settings → Configuration Variables, click Create Variable, name it PLANOLY_API_KEY, paste your API key value, and mark it as Secret. Navigate to the Resources tab in your Retool instance and click Add Resource. Select REST API from the resource type list. Name the resource 'Planoly API'. In the Base URL field, enter https://api.planoly.com (verify the exact base URL with Planoly's API documentation, as it may differ). In the Authentication section, select Bearer Token and enter {{ retoolContext.configVars.PLANOLY_API_KEY }} in the Token field. Alternatively, if Planoly uses a header-based API key, add it in the Default Headers section with the key name specified in Planoly's documentation. Add a default header: Key = Content-Type, Value = application/json. Click Save Changes.

Create the primary query to retrieve your scheduled Planoly posts. In your Retool app, open the Code panel and click the + icon to add a query. Name it getScheduledPosts, select the Planoly API resource, set Method to GET. Planoly's API endpoints for scheduled content typically follow the pattern /v1/media or /v1/posts for your connected Instagram profiles. Check Planoly's current API documentation for the exact endpoint path for your account. Add URL parameters for filtering: Key = status, Value = {{ select_status.value || 'scheduled' }}, and Key = profile_id, Value = {{ dropdown_profile.value }}. For fetching connected Instagram profiles, create a separate query named getProfiles with Method GET and the profile list endpoint. Use the response to populate a Dropdown component named dropdown_profile so users can switch between connected Instagram accounts. Create a JavaScript transformer to extract and format the scheduled posts data. The key fields to extract are: the post ID, scheduled time, caption text, image thumbnail URL, content type (image, video, carousel, story), status, and any hashtags. Bind a Retool Table component to the transformer output. Set the thumbnail column type to Image with URL source set to {{ currentRow.thumbnail_url }} to display post previews inline.

1// JavaScript transformer — format Planoly scheduled posts
2const posts = data?.posts || data?.media || data?.items || [];
3
4return posts.map(post => {
5  const scheduledTime = post.scheduled_at || post.scheduled_time || post.publish_time;
6  const scheduledDate = scheduledTime ? new Date(scheduledTime) : null;
7
8  return {
9    id: post.id,
10    thumbnail_url: post.thumbnail_url || post.image_url || post.media_url || '',
11    caption: post.caption
12      ? (post.caption.length > 100
13          ? post.caption.substring(0, 100) + '...'
14          : post.caption)
15      : 'No caption',
16    full_caption: post.caption || '',
17    content_type: post.media_type || post.content_type || 'image',
18    status: post.status || 'scheduled',
19    scheduled_date: scheduledDate
20      ? scheduledDate.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })
21      : 'Not scheduled',
22    scheduled_time_str: scheduledDate
23      ? scheduledDate.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
24      : 'N/A',
25    scheduled_timestamp: scheduledDate ? scheduledDate.toISOString() : null,
26    hashtags: post.caption
27      ? (post.caption.match(/#[\w]+/g) || []).join(' ')
28      : 'None',
29    profile_id: post.profile_id || 'N/A'
30  };
31}).sort((a, b) => {
32  if (!a.scheduled_timestamp) return 1;
33  if (!b.scheduled_timestamp) return -1;
34  return new Date(a.scheduled_timestamp) - new Date(b.scheduled_timestamp);
35});

Create queries to retrieve performance analytics for published posts. Create getPublishedPosts with Method GET and the Planoly published/analytics endpoint — this typically returns posts that have been published with their engagement data (likes, comments, impressions, reach) if Planoly has synced Instagram Insights for your account. Add URL parameters for date filtering: Key = start_date, Value = {{ dateRange.start.toISOString().split('T')[0] }}, Key = end_date, Value = {{ dateRange.end.toISOString().split('T')[0] }}. Create a JavaScript transformer that calculates derived metrics for each post: engagement rate (likes + comments + saves / reach * 100), and identifies top performing content by engagement rate. Add a DateRange component to filter the analytics period. Bind the Table's data to the transformer output, sorted by engagement_rate descending so best-performing posts appear first. Add a Chart component showing engagement rate trends over time. Configure it as a Line chart with scheduled/publish date on the X-axis and engagement_rate on the Y-axis. Add a second data series showing post reach to visualize the reach vs. engagement relationship. Add Stat components showing average engagement rate, total posts in period, and best-performing post for quick executive summary display at the top of the dashboard.

1// JavaScript transformer — calculate engagement metrics for published posts
2const posts = data?.posts || data?.analytics || data?.media || [];
3
4return posts
5  .filter(post => post.status === 'published' || post.published_at)
6  .map(post => {
7    const likes = parseInt(post.likes || post.like_count || 0);
8    const comments = parseInt(post.comments || post.comment_count || 0);
9    const saves = parseInt(post.saves || post.saved_count || 0);
10    const reach = parseInt(post.reach || post.impressions || 0);
11
12    const engagements = likes + comments + saves;
13    const engagementRate = reach > 0
14      ? parseFloat(((engagements / reach) * 100).toFixed(2))
15      : 0;
16
17    const publishedDate = post.published_at || post.created_at;
18
19    return {
20      id: post.id,
21      thumbnail_url: post.thumbnail_url || post.image_url || '',
22      caption_preview: (post.caption || '').substring(0, 80) + (post.caption?.length > 80 ? '...' : ''),
23      published_date: publishedDate
24        ? new Date(publishedDate).toLocaleDateString()
25        : 'N/A',
26      content_type: post.media_type || 'image',
27      likes: likes.toLocaleString(),
28      comments: comments.toLocaleString(),
29      saves: saves.toLocaleString(),
30      reach: reach.toLocaleString(),
31      engagement_rate: `${engagementRate}%`,
32      engagement_rate_num: engagementRate,
33      performance: engagementRate >= 5 ? 'High'
34        : engagementRate >= 2 ? 'Average'
35        : 'Low'
36    };
37  })
38  .sort((a, b) => b.engagement_rate_num - a.engagement_rate_num);

Build a visual panel that shows how your Instagram grid will look with upcoming scheduled posts. Planoly's core value proposition is visual grid planning — replicate this view in Retool using a grid-style layout. Create a query named getGridPosts that fetches the most recent published posts plus all upcoming scheduled posts, sorted by date, to simulate the Instagram grid. Instagram displays posts in a 3-column grid, newest first. In Retool, use a List View component with 3 columns to create a grid-like display. Configure the List View's data to {{ gridPostsTransformer.data }} and set each list item to show an Image component (thumbnail_url) with a small status indicator (published/scheduled) overlaid. Add a gap analysis section: create a JavaScript query that analyzes your posting schedule for gaps longer than 3 days in the next 30 days. Display these gaps in a warning-styled Text or Banner component: 'No posts scheduled for [date range] — consider adding content.' Add a content type distribution Chart (Pie chart) showing the percentage breakdown of your scheduled content by type (photos, videos, carousels, Reels) to ensure content variety aligns with your strategy. For teams managing multiple Instagram accounts through Planoly, add an account selector dropdown and build all queries to accept the profile_id parameter, making the entire dashboard switchable between accounts with a single control.

1// JavaScript query — find scheduling gaps in the next 30 days
2const posts = getScheduledPosts.data || [];
3const today = new Date();
4const thirtyDaysLater = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
5
6// Get all scheduled dates
7const scheduledDates = posts
8  .filter(p => p.scheduled_timestamp)
9  .map(p => new Date(p.scheduled_timestamp))
10  .sort((a, b) => a - b);
11
12const gaps = [];
13let checkDate = new Date(today);
14checkDate.setHours(0, 0, 0, 0);
15
16while (checkDate < thirtyDaysLater) {
17  const dayEnd = new Date(checkDate);
18  dayEnd.setHours(23, 59, 59);
19
20  const hasPost = scheduledDates.some(
21    d => d >= checkDate && d <= dayEnd
22  );
23
24  if (!hasPost) {
25    gaps.push(checkDate.toLocaleDateString('en-US', {
26      weekday: 'short', month: 'short', day: 'numeric'
27    }));
28  }
29
30  checkDate.setDate(checkDate.getDate() + 1);
31}
32
33return {
34  gap_days: gaps,
35  gap_count: gaps.length,
36  coverage_rate: `${Math.round(((30 - gaps.length) / 30) * 100)}%`,
37  consecutive_gaps: gaps.length > 3
38    ? gaps.slice(0, 3).join(', ') + ' and more...'
39    : gaps.join(', ')
40};