How to create a custom integration

Create your very own integration.

For this article you’ll need basic JavaScript and React skills.


Framer comes with many integrations out of the box, like Hubspot, Formitable, Calendly, etc. But sometimes you want to use a service that isn’t available by default. In that case we advice you to turn the service into a component that you can re-use and share.

We only advice to turn services into components that render something that you need visual control over (like the size or position). For everything else you can just use a custom code snippet. So for example, Calendly makes sense as a component because you’ll have to place the availability widget, but Google Analytics doesn’t because it doesn’t have any interface and needs to run on every page on your site.

Our embed component also can help with very basic integrations as it allows you to paste the js snippet directly in there. But for total customization you'll need to write some code like below.

Component Creation


Every integration typically has the same few ingredients:

• Identify the page with some sort of id.

• Load a JavaScript file from the integration with functions.

• Insert something into the page (html or an iframe) with a function.

Let’s look at a hypothetical example for a fictional lead form service called If we sign up and create a form it has the following instructions to add it to the site:


You can easily convert this to a simple component. Go to Component → Code and click the plus to create a new component. Replace the code with the code below and update it for your specific case. Then, add it to your canvas and configure however you like.