How to create a custom integration

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

Integrations

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

Anatomy

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 BokForm.com. If we sign up and create a form it has the following instructions to add it to the site:

https://gist.github.com/koenbok/d9c1e95fd2e05cf055a5df29a9419b99

Component

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.

https://gist.github.com/koenbok/fb9c9841b0c28c8748bf81bf2fd3ec86