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:
Identifying a page using an ID.
Loading a JavaScript file that includes the integration’s functions.
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:
Go to Component → Code in Framer.
Click the plus icon to create a new component.
Replace the default code with your custom code, tailored for the specific integration.
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.
How can I integrate a third-party service into my Framer project?
Framer provides various built-in integrations. If the service you need isn’t included, you can create a reusable component for services that require visual customization. For simpler integrations, you can use Framer’s embed component by pasting the JavaScript snippet directly. For full customization, you’ll need to write some code and create a custom component.
When should I create a custom component for an integration in Framer?
You should create a custom component only for services that require visual customization, such as adjusting size or position. For example, Calendly works well as a component because you need to visually place its widget. Services like Google Analytics, which don’t have a visual interface and run site-wide, do not require a component.
What are the basic steps to create a custom integration component in Framer?
To create a custom integration component in Framer: 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 integration. 4) Add the component to your canvas and configure it as needed.
Updated