### Framer Plugin Integration - Complete Installation Flow - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt An end-to-end example demonstrating the complete process of installing and configuring analytics tracking within the Framer plugin interface. It covers initializing the UI, setting up the client ID, enabling tracking features, installing the script, and optionally removing it. ```typescript import { framer } from "framer-plugin"; import { saveSetting, loadSettings } from "./lib/settings"; import { updateScript, removeScript } from "./lib/script"; // Initialize plugin UI framer.showUI({ position: "top right", width: 300, height: 460, }); // Step 1: Configure client ID async function setupAnalytics(clientId: string) { await saveSetting("clientId", clientId); // Step 2: Enable desired tracking features await saveSetting("hashChanges", "true"); await saveSetting("outboundLinks", "true"); await saveSetting("webVitals", "true"); await saveSetting("performance", "true"); // Step 3: Install the tracking script await updateScript(); console.log("Analytics installed successfully!"); } // Configure and install await setupAnalytics("my-client-id-abc123"); // Verify installation const settings = await loadSettings(); console.log("Configured client ID:", settings.clientId); // Open dashboard to view analytics const dashboardUrl = `https://app.databuddy.cc/websites/${settings.clientId}`; window.open(dashboardUrl, "_blank"); // Later: Remove analytics if needed await removeScript(); console.log("Analytics removed"); ``` -------------------------------- ### Install or Update Tracking Code - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Updates the Framer website's custom code section with the latest tracking script configuration. This function automatically generates the script and injects it into the page head. It can enable multiple tracking features simultaneously. ```typescript import { updateScript } from "./lib/script"; import { saveSetting } from "./lib/settings"; // Enable a tracking feature and update the script await saveSetting("webVitals", "true"); await updateScript(); // The script is now injected into the website's with: // data-track-web-vitals="true" // Enable multiple features await saveSetting("outboundLinks", "true"); await saveSetting("interactions", "true"); await updateScript(); // Script now includes multiple tracking attributes ``` -------------------------------- ### Get Default Tracking Option State - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Retrieves the default enabled/disabled state for a given tracking option from the tracking configuration. This is useful when a specific setting's value is null, falling back to the predefined default. It takes the tracking option key as input and returns a boolean. ```typescript import { getDefaultValue } from "./lib/settings"; // Check default values for tracking options const hashChangesDefault = getDefaultValue("hashChanges"); console.log(hashChangesDefault); // false const webVitalsDefault = getDefaultValue("webVitals"); console.log(webVitalsDefault); // false // Use when settings value is null const settings = await loadSettings(); const isEnabled = settings.errors === null ? getDefaultValue("errors") : settings.errors === "true"; ``` -------------------------------- ### Map Plugin Settings to HTML Data Attributes Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt This TypeScript code defines a mapping between internal plugin setting keys and the corresponding HTML `data-*` attributes used by the Databuddy tracking script. It shows how specific boolean settings like `hashChanges` and `webVitals` translate to attributes like `data-track-hash-changes` and `data-track-web-vitals`. An example of a fully constructed script tag with these attributes is also provided. ```typescript const attributeMap: Record = { hashChanges: "data-track-hash-changes", dataAttributes: "data-track-attributes", outboundLinks: "data-track-outgoing-links", interactions: "data-track-interactions", performance: "data-track-performance", scrollDepth: "data-track-scroll-depth", webVitals: "data-track-web-vitals", errors: "data-track-errors", }; // When settings are enabled: // hashChanges: "true" → data-track-hash-changes="true" // webVitals: "true" → data-track-web-vitals="true" // Example generated script: const exampleScript = ``; // The Databuddy script reads these attributes to enable features ``` -------------------------------- ### React Hook for Custom Code Subscription - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt A React hook that listens for changes in Framer's custom code. It provides real-time updates whenever custom code is modified, allowing components to react to these changes. The hook returns a CustomCode object or null while loading, and can be used to check script installation status. ```typescript import { useCustomCode } from "./hooks/use-custom-code"; function MyComponent() { const customCode = useCustomCode(); // Check if script is installed const isInstalled = customCode?.headEnd?.html != null; // Display installation status return (

Status: {isInstalled ? "Installed" : "Not installed"}

{customCode?.headEnd?.html && (

{customCode.headEnd.html}

)}

); } // Hook automatically subscribes/unsubscribes on mount/unmount // Returns null while loading, then CustomCode object ``` -------------------------------- ### Load All Plugin Configuration - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Retrieves all plugin settings from Framer's persistent storage, including the client ID and all tracking options. The loaded settings can be used to check the status of specific features or retrieve the client ID. ```typescript import { loadSettings } from "./lib/settings"; // Load all settings const settings = await loadSettings(); console.log(settings); // { // clientId: "abc123xyz", // hashChanges: "true", // dataAttributes: null, // null means use default value // outboundLinks: "false", // interactions: "true", // performance: "true", // webVitals: "true", // errors: "false", // scrollDepth: null // } // Check if a specific feature is enabled const isWebVitalsEnabled = settings.webVitals === "true"; // Get client ID const clientId = settings.clientId || ""; ``` -------------------------------- ### Tracking Features Configuration - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Defines the structure for tracking options available in Databuddy, categorized into core tracking and advanced features. Each option includes an ID, label, description, and default value. This configuration object is imported from './util/integration'. ```typescript import { trackingOptions } from "./util/integration"; // Access core tracking options const coreOptions = trackingOptions.coreTracking; console.log(coreOptions); // [ // { // id: "hashChanges", // label: "Hash Changes", // description: "Track URL hash changes for SPA routing", // default: false // }, // { // id: "dataAttributes", // label: "Data Attributes", // description: "Auto-track via data-track HTML attributes", // default: false // }, // // ... more options // ] // Access advanced features const advancedOptions = trackingOptions.advancedFeatures; console.log(advancedOptions); // [ // { // id: "performance", // label: "Performance", // description: "Track page load and runtime performance", // default: false // }, // { // id: "webVitals", // label: "Web Vitals", // description: "Track Core Web Vitals (LCP, FID, CLS, INP)", // default: false // }, // // ... more options // ] // Iterate through all options Object.values(trackingOptions).flat().forEach(option => { console.log(`${option.label}: ${option.description}`); }); ``` -------------------------------- ### Store and Retrieve Plugin Settings with Framer API Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt This TypeScript code demonstrates how to use the `framer-plugin` API to store and retrieve persistent settings for the plugin. It defines functions to store a setting with a prefix and retrieve it, handling null values for clearing settings. Settings are persisted across sessions using Framer's `setPluginData` and `getPluginData` methods. ```typescript import { framer } from "framer-plugin"; const SETTING_PREFIX = "databuddy-"; // Store a setting async function storePluginSetting(key: string, value: string | null) { await framer.setPluginData(`${SETTING_PREFIX}${key}`, value); } // Retrieve a setting async function getPluginSetting(key: string): Promise { return await framer.getPluginData(`${SETTING_PREFIX}${key}`); } // Example: Store multiple settings await storePluginSetting("clientId", "client-abc-123"); await storePluginSetting("hashChanges", "true"); await storePluginSetting("webVitals", "false"); // Retrieve and verify const clientId = await getPluginSetting("clientId"); const trackHashChanges = await getPluginSetting("hashChanges"); console.log(`Client ID: ${clientId}`); console.log(`Track hash changes: ${trackHashChanges === "true"}`); // Clear a setting await storePluginSetting("hashChanges", null); ``` -------------------------------- ### Persist Plugin Configuration - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Saves individual plugin settings to Framer's persistent data storage. It automatically prefixes setting names for namespacing, ensuring configurations are stored reliably across plugin sessions. ```typescript import { saveSetting } from "./lib/settings"; // Save client ID await saveSetting("clientId", "my-databuddy-id-123"); // Enable hash change tracking await saveSetting("hashChanges", "true"); // Disable error tracking await saveSetting("errors", "false"); // Clear a setting by passing null await saveSetting("scrollDepth", null); // Settings are persisted across plugin sessions // Stored as: "databuddy-clientId", "databuddy-hashChanges", etc. ``` -------------------------------- ### Generate Databuddy Tracking Script - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Generates the complete HTML script tag for the Databuddy tracking script. It reads the client ID and tracking options from plugin storage to construct a script tag with appropriate data attributes. Returns an empty string if no client ID is configured. ```typescript import { createScript } from "./lib/script"; // Generate script with client ID and enabled tracking features const script = await createScript(); // Example output: // // Returns empty string if no client ID is configured console.log(script); ``` -------------------------------- ### Uninstall Tracking Code - TypeScript Source: https://context7.com/databuddy-analytics/databuddy-framer/llms.txt Removes the Databuddy tracking script from the Framer website. This is achieved by setting the custom code in the website's head section to null, effectively stopping all analytics tracking. ```typescript import { removeScript } from "./lib/script"; // Remove analytics tracking from the website await removeScript(); // Custom code in head is now cleared // Website will no longer load Databuddy analytics ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.