How to integrate third-party tools on Framer

intermediate 8 min read Updated 2026-03-18

Quick Answer

Integrate third-party tools in Framer by using the Code Override feature, Custom Components, or embedding scripts through the Site Settings. Most integrations require adding JavaScript code or HTML embeds to connect external services like analytics, chat widgets, or payment processors.

Try Framer Full Framer Review

Prerequisites

Active Framer account with a published site
Basic understanding of HTML/JavaScript
Third-party tool account and API credentials
Framer Pro subscription for custom code features

Step-by-Step Instructions

Access Site Settings for Script Integration

Open your Framer project and click the Settings icon in the top toolbar. Navigate to General > Custom Code. Here you can add scripts to the Start of <head> or End of <body> sections for tools like Google Analytics, Facebook Pixel, or Hotjar tracking codes.

Use the head section for analytics and the body section for interactive widgets

Create Custom Components for Widget Integration

In the Assets panel, click the + button and select Component. Name your component (e.g., "Chat Widget"). Add a Code element from the Insert menu and paste your third-party widget code. Configure the component properties to make it reusable across pages.

Test components on a single page before applying site-wide

Use Code Overrides for Advanced Functionality

Create a new file in the Code panel by clicking + and selecting New Override. Write JavaScript functions to integrate APIs or modify component behavior. Apply overrides by selecting a component, going to the Properties panel, and choosing your override from the Code Override dropdown.

Example structure:

export function MyIntegration(): Override {
  return {
    onMount() {
      // Initialize third-party tool
    }
  }
}

Use TypeScript for better code completion and error checking

Configure Environment Variables

For sensitive data like API keys, go to Site Settings > Environment Variables. Add your variables using FRAMER_ prefix (e.g., FRAMER_API_KEY). Access them in your code using process.env.FRAMER_API_KEY. This keeps credentials secure and separate from your published code.

Never hardcode API keys directly in your components

Embed Third-Party Widgets Using Embed Component

Insert an Embed component from the Insert menu. Paste your third-party HTML/JavaScript embed code (like Calendly, Typeform, or payment widgets) into the code field. Adjust the component size to fit your design and set responsive behavior using the Layout properties.

Set a minimum height for embed components to prevent layout shifts

Set Up Form Integrations

Select your form component and go to the Properties panel. Under Submit, choose Custom and enter your webhook URL or third-party form handler endpoint (like Netlify Forms, Formspree, or Zapier). Configure field names to match your third-party service requirements.

Test form submissions in preview mode before publishing

Test and Publish Integration

Use Preview mode to test your integrations thoroughly. Check browser console for any JavaScript errors. Verify that data flows correctly to your third-party tools. Once confirmed, click Publish to make your integrated site live. Monitor the integration for the first few days to ensure proper functionality.

Use browser developer tools to debug integration issues in preview mode

Common Issues & Troubleshooting

Third-party script not loading or executing

Check if the script is placed in the correct section (head vs body). Verify the script URL is accessible and not blocked by ad blockers. Use browser console to check for JavaScript errors and ensure dependencies are loaded first.

API calls failing or returning errors

Verify your API credentials and endpoint URLs are correct. Check CORS settings on the third-party service. Ensure environment variables are properly configured with the FRAMER_ prefix and accessible in your code.

Embed components not displaying correctly

Increase the embed component height and width. Check if the third-party service supports iframe embedding. Verify the embed code is complete and properly formatted without missing closing tags.

Code overrides not applying to components

Ensure the override function is exported correctly and matches the expected TypeScript interface. Check that the component supports the override type you're applying. Refresh the preview after making code changes.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing