How to Integrate Lovable with SurveyMonkey

SurveyMonkey's API requires OAuth2 authentication through a developer app registration. Go to developer.surveymonkey.com and log in with your SurveyMonkey account. Click 'My Apps' in the top navigation, then click 'Add a New App'. Give your app a name (like 'Lovable Integration'), set the Application Type to 'Private' (since this is for your own account), and set the OAuth Redirect URI to https://oauth.lovable.app/callback or any valid HTTPS URL — for a private app you will use the 'authorize' flow to get a token manually rather than implementing a full OAuth flow. After creating the app, you will see your app's Client ID and Client Secret on the app detail page. For the simplest integration approach, use SurveyMonkey's 'Get a Token' feature: on the app detail page, click the 'Get Token' button. This opens SurveyMonkey's authorization page — click 'Authorize' to grant your app access to your SurveyMonkey account. You will be redirected to your redirect URI with an authorization code, or for private apps, SurveyMonkey may show the access token directly. For a more automated approach, exchange the authorization code for a long-lived access token by making a POST request to https://api.surveymonkey.com/oauth/token with your client_id, client_secret, code, and grant_type=authorization_code. SurveyMonkey access tokens do not expire unless revoked, making them suitable for long-term storage in Cloud Secrets. Once you have your access token, go to your Lovable project, click the + icon next to Preview to open the Cloud tab, click Secrets, and add SURVEYMONKEY_ACCESS_TOKEN with your token value. Also add SURVEYMONKEY_CLIENT_ID and SURVEYMONKEY_CLIENT_SECRET for any future token operations. For survey embedding, add VITE_SURVEYMONKEY_COLLECTOR_URL with the web link URL of your survey collector — this is safe to use as a VITE_ variable since it is a public collector URL.

Create a Supabase Edge Function that proxies requests to SurveyMonkey's API v3, handling authentication and abstracting the API details from the frontend. The function accepts requests from your Lovable React components and forwards them to SurveyMonkey's REST API with the Bearer token from Deno.env.get('SURVEYMONKEY_ACCESS_TOKEN'). SurveyMonkey's API v3 base URL is https://api.surveymonkey.com/v3. The most useful endpoints for a Lovable integration are: GET /surveys (list all surveys in the account), GET /surveys/{survey_id}/responses (list responses for a survey, paginated), GET /surveys/{survey_id}/responses/bulk (fetch multiple responses with their full answer details in a single call), and GET /surveys/{survey_id}/rollups (get aggregated summary statistics for all questions). The proxy Edge Function should accept a resource parameter identifying which API endpoint to call, and an optional query parameter for endpoint-specific options (survey ID, page number, per_page limit). It reads the access token from the secret, constructs the SurveyMonkey API URL, makes the authenticated request, and returns the response to the frontend. The function should also handle SurveyMonkey's pagination model — the API returns 50 results per page by default with a next link in the response links object. For response data, the bulk endpoint is most efficient: it returns complete response details including all answers in a single API call. The default responses endpoint returns metadata only, requiring additional calls for each response's answer data. Design your proxy to prefer the bulk endpoint for dashboard use cases where you need answer data. Include error handling for SurveyMonkey's common error responses: 401 Unauthorized (invalid or expired token), 429 Too Many Requests (API rate limit exceeded — SurveyMonkey limits to 120 requests per minute on most plans), and 403 Forbidden (feature not available on the current SurveyMonkey plan).

1// supabase/functions/surveymonkey-proxy/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9const SM_BASE = 'https://api.surveymonkey.com/v3';
10
11serve(async (req) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
13
14  try {
15    const token = Deno.env.get('SURVEYMONKEY_ACCESS_TOKEN');
16    if (!token) {
17      return new Response(JSON.stringify({ error: 'SurveyMonkey token not configured' }), {
18        status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
19      });
20    }
21
22    const { resource, survey_id, page = 1, per_page = 50 } = await req.json();
23    let url = '';
24
25    switch (resource) {
26      case 'surveys':
27        url = `${SM_BASE}/surveys?per_page=${per_page}&page=${page}`;
28        break;
29      case 'responses':
30        if (!survey_id) throw new Error('survey_id required for responses');
31        url = `${SM_BASE}/surveys/${survey_id}/responses/bulk?per_page=${per_page}&page=${page}`;
32        break;
33      case 'rollups':
34        if (!survey_id) throw new Error('survey_id required for rollups');
35        url = `${SM_BASE}/surveys/${survey_id}/rollups`;
36        break;
37      default:
38        return new Response(JSON.stringify({ error: 'Unknown resource' }), {
39          status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
40        });
41    }
42
43    const smResponse = await fetch(url, {
44      headers: {
45        'Authorization': `Bearer ${token}`,
46        'Content-Type': 'application/json',
47      },
48    });
49
50    if (smResponse.status === 429) {
51      return new Response(JSON.stringify({ error: 'Rate limit exceeded', retry_after: 60 }), {
52        status: 429, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
53      });
54    }
55
56    const data = await smResponse.json();
57    return new Response(JSON.stringify(data), {
58      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
59    });
60  } catch (error) {
61    return new Response(JSON.stringify({ error: String(error) }), {
62      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
63    });
64  }
65});

SurveyMonkey surveys are embedded using iframe elements pointing to a collector URL. A collector in SurveyMonkey is a distribution channel — a web link collector generates a URL that renders the survey in the browser. Each survey can have multiple collectors, allowing you to track where responses come from (in-app versus email versus link shared on social). To get your collector URL, go to your SurveyMonkey account, open your survey, click 'Collect Responses', and find the 'Web Link' collector. Copy the URL — it will look like https://www.surveymonkey.com/r/XXXXXXX. This is the URL you embed in the iframe. SurveyMonkey supports additional URL parameters for customizing the collector behavior. The most useful are: custom_variables (pass user-specific data that appears in the response), as_url=1 (embed in iframe mode with no navigation chrome), and ?nobar=1 (hide the SurveyMonkey progress bar). Combine these with your user's ID as a custom variable so you can match responses back to Supabase users: append ?custom_variable=userId to the collector URL. For the embedding pattern in Lovable, create a modal or dedicated page component that shows the survey iframe. Detect when the survey is completed by listening for the window message event — SurveyMonkey posts a message to the parent window when the survey is submitted. This allows your Lovable app to close the survey modal and trigger post-survey actions (like showing a thank you message or updating the user's profile to mark the survey as completed) automatically without polling the API. Store the collector URL as a VITE_SURVEYMONKEY_COLLECTOR_URL environment variable so it can be changed without redeploying. For apps with multiple surveys (an onboarding survey, an NPS survey, a feature feedback survey), store each URL as a separate VITE_ variable.

1// src/components/SurveyModal.tsx
2import { useEffect, useRef } from 'react';
3import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
4import { supabase } from '@/integrations/supabase/client';
5
6interface SurveyModalProps {
7  open: boolean;
8  onClose: () => void;
9  userId: string;
10}
11
12const COLLECTOR_URL = import.meta.env.VITE_SURVEYMONKEY_COLLECTOR_URL;
13
14export function SurveyModal({ open, onClose, userId }: SurveyModalProps) {
15  const completedRef = useRef(false);
16
17  const surveyUrl = COLLECTOR_URL
18    ? `${COLLECTOR_URL}?custom_variables=${encodeURIComponent(userId)}`
19    : '';
20
21  useEffect(() => {
22    async function handleMessage(event: MessageEvent) {
23      // SurveyMonkey posts 'survey_finished' on completion
24      if (event.data === 'survey_finished' && !completedRef.current) {
25        completedRef.current = true;
26        await supabase
27          .from('profiles')
28          .update({ survey_completed: true })
29          .eq('id', userId);
30        onClose();
31      }
32    }
33    window.addEventListener('message', handleMessage);
34    return () => window.removeEventListener('message', handleMessage);
35  }, [userId, onClose]);
36
37  if (!COLLECTOR_URL) return null;
38
39  return (
40    <Dialog open={open} onOpenChange={onClose}>
41      <DialogContent className="max-w-2xl h-[80vh] p-0 overflow-hidden">
42        <DialogHeader className="px-6 pt-4">
43          <DialogTitle>Quick Feedback Survey</DialogTitle>
44        </DialogHeader>
45        <iframe
46          src={surveyUrl}
47          className="w-full h-full border-none"
48          title="Feedback Survey"
49          allow="camera; microphone"
50        />
51      </DialogContent>
52    </Dialog>
53  );
54}

SurveyMonkey webhooks deliver response data to your Edge Function URL within seconds of a respondent submitting the survey, enabling real-time analytics and automated follow-up workflows. Setting up the webhook requires two steps: creating the webhook in SurveyMonkey's developer portal pointing to your Edge Function URL, and implementing the Edge Function that processes the incoming events. In your SurveyMonkey developer app (at developer.surveymonkey.com), navigate to your app, click 'Webhooks', and click 'Add Webhook'. Set the subscription URL to your Edge Function's URL — once deployed, this will be https://[your-project-ref].supabase.co/functions/v1/surveymonkey-webhook. Set the event type to 'response_completed' to receive an event when each survey response is fully submitted. Set the object type to 'survey' and specify your survey's ID. Click Save. The webhook payload SurveyMonkey sends is minimal — it contains the event type, the survey ID, and the response ID, but not the full response data. Your Edge Function must make a separate API call to retrieve the full response details using the response ID. This two-step pattern (receive notification → fetch details) is standard in SurveyMonkey's webhook architecture. In the Edge Function, after receiving the webhook POST, extract the response_id from the payload, then call the SurveyMonkey API to GET /surveys/{survey_id}/responses/{response_id} with the Bearer token to fetch the complete response including all answer values. Parse the answer data, extract the fields you care about (NPS score, open-text answers, custom variables), and store the structured data in your Supabase database. Run any follow-up logic — sending emails to detractors, updating user records, triggering notifications — from within the Edge Function after storing the response. SurveyMonkey does not include a webhook signature for verification (unlike Stripe's HMAC signing). To secure your webhook endpoint, verify that the incoming request includes a valid API token in a custom header, or implement IP allowlisting based on SurveyMonkey's documented webhook source IPs.

1// supabase/functions/surveymonkey-webhook/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const corsHeaders = { 'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type' };
7
8serve(async (req) => {
9  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
10  if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
11
12  try {
13    const token = Deno.env.get('SURVEYMONKEY_ACCESS_TOKEN');
14    const supabase = createClient(
15      Deno.env.get('SUPABASE_URL') ?? '',
16      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
17    );
18
19    const payload = await req.json();
20    const surveyId = payload.object_id;
21    const responseId = payload.resources?.[0]?.id;
22
23    if (!surveyId || !responseId) {
24      return new Response(JSON.stringify({ error: 'Missing survey_id or response_id' }), {
25        status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
26      });
27    }
28
29    // Fetch full response details from SurveyMonkey API
30    const smResp = await fetch(
31      `https://api.surveymonkey.com/v3/surveys/${surveyId}/responses/${responseId}/details`,
32      { headers: { 'Authorization': `Bearer ${token}` } }
33    );
34    const responseData = await smResp.json();
35
36    const customVars = responseData.custom_variables ?? {};
37    const pages = responseData.pages ?? [];
38    const firstAnswer = pages[0]?.questions?.[0]?.answers?.[0]?.choice_id
39      ?? pages[0]?.questions?.[0]?.answers?.[0]?.text ?? null;
40
41    await supabase.from('survey_responses').upsert({
42      response_id: responseId,
43      survey_id: surveyId,
44      user_id: customVars.user_id ?? null,
45      nps_score: firstAnswer !== null ? Number(firstAnswer) : null,
46      answers: responseData,
47      submitted_at: responseData.date_modified,
48    }, { onConflict: 'response_id' });
49
50    return new Response(JSON.stringify({ success: true }), {
51      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
52    });
53  } catch (error) {
54    console.error('Webhook error:', error);
55    return new Response(JSON.stringify({ error: String(error) }), {
56      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
57    });
58  }
59});