How to Integrate Retool with Skype

Open the Azure Portal (portal.azure.com) and navigate to Create a Resource. Search for 'Azure Bot' and select it from the Marketplace. Fill in the required fields: Bot handle (a unique name for your bot), Subscription, Resource group, and Pricing tier (F0 free tier is sufficient for testing). For the Microsoft App ID section, select 'Create new Microsoft App ID' — Azure will automatically create an Azure Active Directory app registration with a client ID and secret. Click Review + Create, then Create to provision the Bot Service. This typically takes 30-60 seconds. Once the Bot Service is created, navigate to it in the Azure Portal and click Channels in the left sidebar. You will see a list of available channels. Click the Skype icon to add Skype as a channel. On the Skype channel configuration page, you can configure messaging, calling, and groups settings. For messaging-only use cases, the defaults are sufficient. Click Save. The Skype channel will appear as Configured in your channel list. Next, retrieve your bot credentials: click Configuration in the Bot Service left sidebar. Note the Microsoft App ID — this is your OAuth client ID. Click Manage next to the App ID to open the app registration in Azure Active Directory. In the app registration, go to Certificates & secrets, click New client secret, add a description, set an expiration, and click Add. Copy the secret value immediately — it will not be displayed again. Store both the App ID and client secret securely.

Open Retool and navigate to the Resources tab (left sidebar on the Retool home page, or via the top navigation Resources link). Click the blue Add Resource button in the top right corner. In the resource type selector, scroll to the API section or use the search bar and type 'REST API'. Select REST API to open the configuration form. Set the Base URL to the Microsoft Bot Framework API endpoint: https://smba.trafficmanager.net/apis/ — this is the global Bot Connector service endpoint. For environments in specific Azure regions, you may need a region-specific URL; check the Bot Framework documentation for your bot's region. For authentication, click the Authentication dropdown and select Bearer Token. However, the Bot Framework uses OAuth 2.0 client credentials that require a dynamic token (access tokens expire after 3600 seconds), so a static bearer token will not work long-term. Instead, set authentication to None and plan to handle token acquisition in a separate query, then pass the token as a dynamic Authorization header in each request. In the Headers section, add a default header: Key = Content-Type, Value = application/json. Give the resource a descriptive name like 'Skype Bot Framework' and click Save Changes. The resource will now appear in your Resources list and be available in the query editor dropdown.

1{
2  "method": "POST",
3  "url": "https://login.microsoftonline.com/botframework.com/oauth2/v2.0/token",
4  "body": {
5    "grant_type": "client_credentials",
6    "client_id": "{{ retoolContext.configVars.BOT_APP_ID }}",
7    "client_secret": "{{ retoolContext.configVars.BOT_APP_SECRET }}",
8    "scope": "https://api.botframework.com/.default"
9  }
10}

The Bot Framework uses short-lived OAuth tokens, so the first query in your app fetches a fresh access token. In the Retool app editor, open the Code panel at the bottom and click the + New button to create a query. Name it getToken. Set the Resource to your Skype Bot Framework resource. Set the HTTP method to POST and the URL path to https://login.microsoftonline.com/botframework.com/oauth2/v2.0/token (full URL override, or create a separate generic REST API resource for this token endpoint). Set the Body Type to x-www-form-urlencoded and add the following key-value pairs: grant_type = client_credentials, client_id = {{ retoolContext.configVars.BOT_APP_ID }}, client_secret = {{ retoolContext.configVars.BOT_APP_SECRET }}, scope = https://api.botframework.com/.default. Enable 'Run this query automatically on page load' and set a cache duration of 3500 seconds to avoid re-fetching on every action. Now create a second query named sendSkypeMessage. Set Resource to your Skype Bot Framework resource, method to POST. For the path, use /v3/conversations/{{ conversationIdInput.value }}/activities. Set the Authorization header dynamically: Key = Authorization, Value = Bearer {{ getToken.data.access_token }}. In the Body section, set Body Type to JSON and enter the message payload. Set trigger mode to Manual so it only fires on button click. This query sends a message into a specific Skype conversation identified by the conversation ID.

1{
2  "type": "message",
3  "from": {
4    "id": "{{ retoolContext.configVars.BOT_APP_ID }}",
5    "name": "Retool Bot"
6  },
7  "recipient": {
8    "id": "{{ recipientIdInput.value }}"
9  },
10  "text": "{{ messageTextInput.value }}"
11}

To build a meaningful bot management dashboard, you need to display active Skype conversations. Since the Bot Framework API is event-driven (not pull-based for incoming messages), the standard pattern is to log incoming activity payloads to your own database as users message your bot, then query that database from Retool. Create a database query in Retool that reads from your bot_conversations table. In the Code panel, create a new query pointing to your PostgreSQL or other database resource. Write a SQL query that retrieves conversation records: SELECT conversation_id, user_id, last_message, last_activity_at, status FROM bot_conversations WHERE channel = 'skype' ORDER BY last_activity_at DESC LIMIT 50. Set this query to run automatically on page load. Drag a Table component from the Component panel onto the Retool canvas. In the Table's Inspector (right panel), set the Data Source to {{ getConversations.data }}. Map the columns: conversation_id as 'Conversation ID', user_id as 'User', last_message as 'Last Message', last_activity_at as 'Last Activity', status as 'Status'. Enable row selection by checking 'Allow row selection' in the Table settings. Add a Text Input component below the table labeled 'Message to send' (set a placeholder like 'Enter your message...'). Add a Button component labeled 'Send Skype Message'. In the button's Inspector, add an event handler: Event = Click, Action = Trigger query, Query = sendSkypeMessage. In the sendSkypeMessage query, reference the selected table row's conversation ID: {{ conversationsTable.selectedRow.conversation_id }}. This wires everything together: select a conversation, type a message, click Send.

1-- Query to fetch active Skype bot conversations
2SELECT 
3  conversation_id,
4  user_id,
5  user_display_name,
6  last_message,
7  last_activity_at,
8  message_count,
9  status
10FROM bot_conversations
11WHERE channel = 'skype'
12  AND last_activity_at > NOW() - INTERVAL '7 days'
13ORDER BY last_activity_at DESC
14LIMIT 100;

The Bot Framework API and your conversation log database may return data in formats that need reshaping before display in Retool components. JavaScript transformers let you normalize this data without modifying your queries or database schema. In the Code panel, click the + New button and select Transformer (not Query). Name it formatConversations. In the transformer editor, write JavaScript that takes the raw database query results and maps them to a clean display format. Access the raw data via the query name followed by .data — for example, getConversations.data. Return an array of objects with display-ready field names and formatted values such as relative timestamps and truncated message previews. To attach a transformer to a query instead, open the getConversations query, click the Advanced tab, and enable 'Transform data with a transformer'. Select your formatConversations transformer from the dropdown. The Table component's {{ getConversations.data }} binding will now automatically receive the transformed output, while {{ getConversations.rawData }} preserves the original for debugging. For bot activity metrics, add a separate transformer that calculates aggregates from the conversation data: total active conversations, messages sent today, and average response time. Display these in Stat components at the top of the dashboard. For complex integrations requiring multiple data sources, custom transformers, and Retool Workflows, RapidDev's team can help architect and build your Retool solution.

1// Transformer: formatConversations
2// Reshapes raw conversation log data for Table display
3const raw = getConversations.data;
4if (!raw || !Array.isArray(raw)) return [];
5
6return raw.map(conv => ({
7  id: conv.conversation_id,
8  user: conv.user_display_name || conv.user_id || 'Unknown',
9  lastMessage: conv.last_message
10    ? conv.last_message.substring(0, 80) + (conv.last_message.length > 80 ? '...' : '')
11    : '(no message)',
12  lastActivity: conv.last_activity_at
13    ? new Date(conv.last_activity_at).toLocaleString()
14    : 'N/A',
15  messageCount: conv.message_count || 0,
16  status: conv.status || 'active'
17}));