How to Integrate Lovable with Looker Studio

Before embedding a Looker Studio report in your Lovable app, you need to make it publicly viewable and get the correct embed URL. Open your Looker Studio report at lookerstudio.google.com. If you have not already published it, click the Share button in the top-right corner of the report editor. In the sharing dialog, change the access setting to 'Anyone with the link can view' to allow your Lovable app to load the report without authentication. For reports showing sensitive business data, consider whether this is appropriate — Looker Studio does not have row-level security in its free tier, so anyone with the embed URL can see all report data. If you need per-user data filtering, the URL parameter approach (described in Step 2) only filters the visualization, not the underlying data access. To get the embed URL, click Share → Embed report. You will see an iframe code block. Copy the URL from the src attribute of the iframe tag — it will look like https://lookerstudio.google.com/embed/reporting/[REPORT_ID]/page/[PAGE_ID]. This is your base embed URL. You can also find the report ID in your browser's address bar when viewing the report in edit mode. Note that the embed URL format differs from the regular report URL. The regular URL is https://lookerstudio.google.com/reporting/[REPORT_ID] — the embed URL replaces 'reporting' with 'embed/reporting'. Always use the embed URL format for iframe embedding, not the regular report URL. The embed URL renders without Looker Studio's navigation header and resizes correctly within an iframe container. If your report is connected to a live data source like GA4 or Sheets, verify that the data source connection uses a service account or a user account that has access to the underlying data. Reports connected with a personal account will stop showing data if that account's access to the data source is revoked.

Create a React component that embeds the Looker Studio report in an iframe with proper sizing, loading state management, and URL parameter filtering. Ask Lovable to generate this component via the chat interface — describe the desired behavior and pass your embed URL as context. The component needs to handle several technical requirements. First, iframe sizing: Looker Studio reports have a fixed canvas size (typically 1280px × 720px or a custom size set in the report editor). To make the embed responsive, use a container div with a percentage-based padding-bottom to create an aspect ratio constraint, then position the iframe absolutely within it. This technique works cross-browser and maintains the correct proportions without JavaScript. Second, loading state: iframes do not trigger React's Suspense boundary, so you need to manage the loading state manually. Add an onLoad handler to the iframe that sets a loaded state variable, and show a skeleton placeholder or loading spinner until the iframe fires its load event. The Looker Studio report typically takes 2-5 seconds to render the first time it loads. Third, URL parameter filtering: Looker Studio supports dynamic filtering through URL parameters appended to the embed URL. The parameter format is ?params=ENCODED_JSON where the JSON object contains filter definitions. The most commonly used parameters are date range filters (params.ds0.dr_date_start, params.ds0.dr_date_end) and dimension filters. Encode the parameters object with encodeURIComponent(JSON.stringify(params)) and append it to the base embed URL. This allows your Lovable app to control what data the report displays based on the current user's context — their account ID, their selected date range, or their organization's identifier.

1// src/components/LookerEmbed.tsx
2import { useState, useMemo } from 'react';
3
4interface LookerEmbedProps {
5  reportUrl: string;
6  title: string;
7  defaultDateRange?: { start: string; end: string }; // YYYY-MM-DD format
8  filterParams?: Record<string, string>;
9  height?: string;
10}
11
12export function LookerEmbed({
13  reportUrl,
14  title,
15  defaultDateRange,
16  filterParams = {},
17  height = '600px',
18}: LookerEmbedProps) {
19  const [loaded, setLoaded] = useState(false);
20
21  const embedUrl = useMemo(() => {
22    const params: Record<string, string> = { ...filterParams };
23    if (defaultDateRange) {
24      params['ds0.dr_date_start'] = defaultDateRange.start;
25      params['ds0.dr_date_end'] = defaultDateRange.end;
26    }
27    const hasParams = Object.keys(params).length > 0;
28    if (!hasParams) return reportUrl;
29    const encodedParams = encodeURIComponent(JSON.stringify(params));
30    const separator = reportUrl.includes('?') ? '&' : '?';
31    return `${reportUrl}${separator}params=${encodedParams}`;
32  }, [reportUrl, filterParams, defaultDateRange]);
33
34  return (
35    <div className="w-full relative" style={{ height }}>
36      {!loaded && (
37        <div className="absolute inset-0 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
38          <span className="text-gray-400 text-sm">Loading report...</span>
39        </div>
40      )}
41      <iframe
42        src={embedUrl}
43        title={title}
44        width="100%"
45        height="100%"
46        style={{ border: 'none', opacity: loaded ? 1 : 0, transition: 'opacity 0.3s' }}
47        allowFullScreen
48        onLoad={() => setLoaded(true)}
49      />
50    </div>
51  );
52}

To show personalized data in embedded Looker Studio reports, pass user-specific context as URL parameters that filter what the report displays. This is the key technique for B2B SaaS apps where each user or organization should see only their own data in dashboards. The URL parameter format for Looker Studio filters is specific and must be constructed correctly. Looker Studio accepts a params query parameter containing a URL-encoded JSON object. The JSON object keys correspond to parameter names defined in the report (using Report Settings → Manage report parameters). Values are the filter values to apply. For example, if your report has a parameter named 'organization_id', passing params={"organization_id": "org_123"} in the URL will filter all data sources in the report to show only records matching that organization ID — but only if the data sources in the report are configured to use this parameter as a filter. To set up parameterized filtering in Looker Studio: open your report in edit mode, go to Resource → Manage report parameters, click Add parameter, name it (for example 'org_id'), set the data type to Text, and optionally set a default value. Then in each chart where you want to filter by this parameter, add a filter condition that uses 'org_id' as the value source. When the report is embedded with a params value for org_id, all charts using that filter will update automatically. In your Lovable app, fetch the user's organization ID (or whatever identifier your report needs) from Supabase when the user is authenticated, then pass it to the LookerEmbed component's filterParams prop. The component constructs the full URL with the encoded parameter. This provides a client-side filtered view — note that the filtering happens in Looker Studio's visualization layer, not at the data source level, so all data is technically fetched and then filtered visually.

1// src/pages/ClientDashboard.tsx
2import { useEffect, useState } from 'react';
3import { supabase } from '@/integrations/supabase/client';
4import { LookerEmbed } from '@/components/LookerEmbed';
5
6const REPORT_URL = import.meta.env.VITE_LOOKER_REPORT_URL;
7
8export function ClientDashboard() {
9  const [orgId, setOrgId] = useState<string | null>(null);
10  const [loading, setLoading] = useState(true);
11
12  useEffect(() => {
13    async function fetchOrgId() {
14      const { data: { user } } = await supabase.auth.getUser();
15      if (!user) return;
16      const { data } = await supabase
17        .from('profiles')
18        .select('organization_id')
19        .eq('id', user.id)
20        .single();
21      setOrgId(data?.organization_id ?? null);
22      setLoading(false);
23    }
24    fetchOrgId();
25  }, []);
26
27  if (loading) return <div className="animate-pulse h-96 bg-gray-100 rounded-lg" />;
28  if (!orgId) return <p className="text-gray-500">No report available for your account yet.</p>;
29
30  return (
31    <LookerEmbed
32      reportUrl={REPORT_URL}
33      title="Your Analytics Dashboard"
34      filterParams={{ organization_id: orgId }}
35      height="700px"
36    />
37  );
38}

For feeding your own Supabase data into Looker Studio reports — rather than embedding existing reports — create a Supabase Edge Function that implements Looker Studio's Community Connector JSON schema. This allows Looker Studio to treat your Edge Function as a data source that report authors can connect to, query, and visualize like any other connector. Looker Studio Community Connectors communicate through two HTTP interactions: a GET request to retrieve the schema (the list of available fields with their types) and a POST request to retrieve actual data rows. Your Edge Function must handle both correctly. For the GET request (schema response), return a JSON object with a schema array. Each item in the schema array describes one field: name (the field identifier used in Looker Studio), label (the human-readable display name), dataType (one of 'STRING', 'NUMBER', 'BOOLEAN', 'TIMESTAMP'), and semantics (an object with conceptType set to 'DIMENSION' for categorical fields or 'METRIC' for numeric measurements). For the POST request (data response), Looker Studio sends a request body with a dateRange, fields (the specific fields the report is requesting), and optionally configParams (filter values from report parameters). Query your Supabase database for the relevant data within the requested date range, then format the response as a JSON object with a schema array (same format as above, but only for the requested fields) and a rows array where each row is an object with a values array containing the field values in the same order as the schema. Configure this in Looker Studio by going to Create → Data Source → Build your own, entering your Edge Function's URL, and completing the connector authentication setup. Once connected, the fields from your schema appear in the report editor as draggable dimensions and metrics.

1// supabase/functions/looker-connector/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 = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8};
9
10const SCHEMA = [
11  { name: 'event_date', label: 'Event Date', dataType: 'TIMESTAMP',
12    semantics: { conceptType: 'DIMENSION', semanticType: 'YEAR_MONTH_DAY' } },
13  { name: 'feature_name', label: 'Feature Name', dataType: 'STRING',
14    semantics: { conceptType: 'DIMENSION' } },
15  { name: 'event_count', label: 'Event Count', dataType: 'NUMBER',
16    semantics: { conceptType: 'METRIC', isReaggregatable: true } },
17  { name: 'unique_users', label: 'Unique Users', dataType: 'NUMBER',
18    semantics: { conceptType: 'METRIC', isReaggregatable: false } },
19];
20
21serve(async (req) => {
22  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
23
24  const supabase = createClient(
25    Deno.env.get('SUPABASE_URL') ?? '',
26    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
27  );
28
29  if (req.method === 'GET') {
30    return new Response(JSON.stringify({ schema: SCHEMA }), {
31      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
32    });
33  }
34
35  if (req.method === 'POST') {
36    const { dateRange, fields } = await req.json();
37    const requestedFields = fields?.map((f: { name: string }) => f.name) ?? SCHEMA.map(s => s.name);
38
39    const { data, error } = await supabase
40      .from('daily_feature_stats')
41      .select('event_date, feature_name, event_count, unique_users')
42      .gte('event_date', dateRange?.startDate ?? '2020-01-01')
43      .lte('event_date', dateRange?.endDate ?? new Date().toISOString().split('T')[0]);
44
45    if (error) {
46      return new Response(JSON.stringify({ error: error.message }), {
47        status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
48      });
49    }
50
51    const schema = SCHEMA.filter(s => requestedFields.includes(s.name));
52    const rows = (data ?? []).map(row => ({
53      values: schema.map(s => row[s.name as keyof typeof row] ?? null),
54    }));
55
56    return new Response(JSON.stringify({ schema, rows }), {
57      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
58    });
59  }
60
61  return new Response('Method not allowed', { status: 405, headers: corsHeaders });
62});