Creating a Custom Integration

To get started, you'll need basic JavaScript and React skills.

Integrations

Framer offers various integrations out of the box, including Hubspot, Formspark, and Calendly. However, if you need to use a service that is not available by default, we recommend turning it into a reusable component.

We advise creating components only for services that require visual control, such as size or position. For instance, Calendly makes sense as a component because you need to place the availability widget. On the other hand, Google Analytics does not require a component because it lacks an interface and needs to run on every page of your site.

Our embed component can also assist with basic integrations by allowing you to paste the JavaScript snippet directly. For full customization, however, you will need to write some code, as shown below.

Component Creation

Anatomy

Typically, integrations consist of a few essential components:

1. Identifying a page using an ID.

2. Loading a JavaScript file from the integration, which includes functions.

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

Let's consider a hypothetical example using a fictional lead form service, BokForm.com. After signing up and creating a form, we're provided with instructions to add it to our site.

Component

Converting this into a simple component is straightforward. Go to Component → Code, click the plus icon to create a new component, and replace the code with this one (updating it for your specific case). Then, add it to your canvas and configure as needed.