How to Integrate Retool with SocialBee

Before configuring Retool, you need your SocialBee API key. Log in to your SocialBee account at app.socialbee.com. Navigate to your account settings by clicking your profile avatar or name in the top navigation, then selecting Settings or Account Settings from the dropdown menu. Look for an API section or Developer section in the settings sidebar. SocialBee provides an API key that identifies your account for all API calls. Copy the API key and store it temporarily in a secure location. Do not paste it into any browser address bar, chat message, or shared document. You will store it securely in Retool's Configuration Variables rather than pasting it directly into query fields — this ensures the key is never exposed in the Retool app's frontend and cannot be viewed by regular users. In Retool, navigate to Settings (the gear icon in the left sidebar on the Retool home page) → Configuration Variables. Click Add Variable, set the name to SOCIALBEE_API_KEY, paste your API key as the value, and check the Secret toggle to restrict it to resource configurations only. Click Save. This one-time setup makes the key available for use in your REST API Resource without ever exposing it in query fields.

Open Retool and navigate to the Resources tab in the left sidebar or top navigation of the Retool home page. Click the blue Add Resource button in the top right. In the resource type selector, search for or scroll to find 'REST API' and click it to open the configuration form. In the Name field, enter a descriptive name like 'SocialBee API'. In the Base URL field, enter the SocialBee API base URL: https://app.socialbee.com/api/v1 — note that the exact base URL may vary based on SocialBee's current API version, so confirm the current base URL in SocialBee's API documentation or developer settings. Scroll to the Headers section and click Add header. Set the header Key to Authorization and the Value to Bearer {{ retoolContext.configVars.SOCIALBEE_API_KEY }}. The double curly brace syntax dynamically references the Configuration Variable you set in the previous step, so the actual key value is injected server-side at request time. Add a second header: Key = Content-Type, Value = application/json. Add a third header: Key = Accept, Value = application/json. Leave the authentication dropdown set to None since you are handling auth via the custom header. Click Save Changes. The SocialBee API resource now appears in your Resources list and is ready to use in query editors across all your Retool apps.

Open or create a Retool app. In the Code panel at the bottom, click + New to create your first query. Name it getWorkspaces. Select your SocialBee API resource from the Resource dropdown. Set the HTTP method to GET and the URL path to /workspaces — this retrieves all workspaces your API key has access to. Set Trigger to 'Run this query automatically on page load'. Click Run to verify you get a JSON response with workspace data. Create a second query named getCategories. Resource = SocialBee API, method = GET, path = /workspaces/{{ workspaceSelect.value }}/categories. This path uses a Select component (which you will add in the next step) to dynamically filter by workspace. Set Run this query automatically on input change, and set the input to workspaceSelect.value. Create a third query named getScheduledPosts. Resource = SocialBee API, method = GET, path = /workspaces/{{ workspaceSelect.value }}/posts. Add URL parameters to filter results: Key = status, Value = scheduled. Optionally add date range parameters: from_date = {{ datePicker.value }} if your dashboard includes a date filter. Set this query to also run automatically when workspaceSelect changes. All three queries use Retool's server-side proxy, so your API key is never exposed in network requests visible to browser DevTools.

1// JavaScript transformer to format scheduled posts for Table display
2// Attach this transformer to the getScheduledPosts query (Advanced tab)
3const posts = data;
4if (!posts || !Array.isArray(posts)) return [];
5
6return posts.map(post => ({
7  id: post.id,
8  profile: post.profile_name || post.profile_id,
9  category: post.category_name || 'Uncategorized',
10  content: post.content
11    ? post.content.substring(0, 100) + (post.content.length > 100 ? '...' : '')
12    : '(no content)',
13  scheduledAt: post.scheduled_at
14    ? new Date(post.scheduled_at).toLocaleString()
15    : 'Not scheduled',
16  status: post.status || 'pending'
17}));

With data flowing from SocialBee, now assemble the dashboard interface. In the Component panel on the left sidebar of the Retool app editor, drag a Select component onto the canvas near the top of the page. In the Inspector (right panel), set the Data source to {{ getWorkspaces.data }}, Label to {{ self.name }}, and Value to {{ self.id }}. This creates a workspace selector that drives the getCategories and getScheduledPosts queries. Drag a second Select component for category filtering. Set Data source to {{ getCategories.data }}, Label to {{ self.name }}, Value to {{ self.id }}. Add an 'All' option using the custom options feature. Drag a Table component onto the canvas below the selectors. In the Table Inspector, set Data source to {{ getScheduledPosts.data }}. Configure the visible columns: profile, category, content (with the transformer truncating to 100 chars), scheduledAt, and status. Enable row selection so agents can select a post for editing. Add a colored Badge or Tag column for status using the Table's column renderer. Drag a Chart component to the right of the table. Set the Chart type to Bar and the Data source to a transformer that groups posts by category name and counts them. Set X-axis to category name and Y-axis to count. This gives a visual distribution of your content queue by category. For teams managing multiple workspaces and content strategies, RapidDev's team can help build more advanced Retool dashboards combining SocialBee with CRM and analytics data.

1// Standalone transformer to group posts by category for Chart
2// Reference this in the Chart component's Data source
3const posts = getScheduledPosts.data;
4if (!posts || !Array.isArray(posts)) return [];
5
6const counts = posts.reduce((acc, post) => {
7  const cat = post.category_name || 'Uncategorized';
8  acc[cat] = (acc[cat] || 0) + 1;
9  return acc;
10}, {});
11
12return Object.entries(counts).map(([category, count]) => ({
13  category,
14  count
15})).sort((a, b) => b.count - a.count);

Extend the dashboard with the ability to create new posts directly from Retool. Drag a Container component onto the canvas to create a form area. Inside the container, add the following components: a Select component for profile selection (data source: getProfiles query targeting /workspaces/{{ workspaceSelect.value }}/profiles), a second Select for category selection (data source: {{ getCategories.data }}), a Text Area component for post content with a 280-character counter tip, a Date/Time Picker for the scheduled date and time, and a Button labeled 'Schedule Post'. In the Code panel, create a new query named createPost. Resource = SocialBee API, method = POST, path = /workspaces/{{ workspaceSelect.value }}/posts. Set Body Type to JSON. In the body field, construct the JSON payload referencing form component values using {{ }} expressions: profile_id references the profile Select value, category_id references the category Select value, content references the Text Area value, and scheduled_at references the DateTime Picker value formatted as an ISO string. In the createPost query's success event handler, add two actions: first, trigger the getScheduledPosts query to refresh the table; second, show a success notification with message 'Post scheduled successfully'. In the Schedule Post button's click event handler, set Action to Trigger query and select createPost. Add a confirmation dialog with the text 'Schedule this post to SocialBee?' to prevent accidental submissions.

1{
2  "profile_id": "{{ profileSelect.value }}",
3  "category_id": "{{ categorySelect.value }}",
4  "content": "{{ postContentArea.value }}",
5  "scheduled_at": "{{ new Date(scheduleDatePicker.value).toISOString() }}",
6  "status": "scheduled"
7}