Creating a custom integration

To get started, you’ll need basic knowledge of JavaScript and React.

Integrations

Framer provides various built-in integrations. If the service you need isn’t included, consider creating a reusable component.

Create components only for services that require visual customization, like size or position. For example, Calendly works well as a component because you need to visually place its availability widget. Conversely, Google Analytics doesn’t need a component since it lacks a visual interface and runs site-wide.

For simpler integrations, you can use Framer’s embed component by pasting the JavaScript snippet directly. However, for full customization, you’ll need to write some code, as explained below.

Component creation

Most integrations involve the following steps:

  1. Identifying a page using an ID.

  2. Loading a JavaScript file that includes the integration’s functions.

  3. Inserting content (like HTML or an iframe) into the page via a function.

Let’s look at an example using a fictional lead form service, BokForm.com. After signing up and creating a form, you receive instructions for embedding it on your site.

To turn this into a component:

  1. Go to Component → Code in Framer.

  2. Click the plus icon to create a new component.

  3. Replace the default code with your custom code, tailored for the specific integration.

  4. Add the component to your canvas and configure it as needed.

This approach allows you to seamlessly integrate third-party services into your Framer project while maintaining full control over their appearance and behavior.

For more information about Code Components and custom integrations, please visit our Developer documentation.