Page title

Framer

Connect Easytools with Framer to add products, widgets, embeds, and protect your content with a login wall.

Last updated

February 9, 2026

Overview

In this documentation, we will look at how to connect Easytools with Framer in two separate ways:

Framer as a landing page - Your products are on Easytools, and Framer serves as your main landing page. You can also add additional tools from Easytools like Buy Me a Coffee, Tickers, pricing sections, testimonials and others.
Protected content on Framer - Using login wall to have your content on Framer while it's still secured from unauthorized access.

Using Framer as your landing page with products on Easytools is a very simple and safe solution. You have everything - all products - on Easytools, so no unauthorized access is possible, and you still have Framer as your beautiful main landing page.

This documentation covers only selected tools from Easytools. There are more tools available in your Easytools account. For the full scope, check your Easytools dashboard.

Adding tools follows a standardized approach:

If it's a script - go to Framer Site Settings → Custom Code and paste it there
If it's an iframe/embed - use the Embed element in your Framer page layout

Part 1: Framer as a landing page

Watch the video tutorial covering linking products, Storefront, widgets, and embeds:

1. Linking individual products

When you have products on Easytools and Framer is your landing page, you can link buttons directly to your product checkout pages.

Go to Easytools and navigate to Store → Products.
Find the product you want to share.
Click the Share button and select Copy link to checkout.
In Framer, select your button element.
Paste the copied link into the button's link field.

That's it! When users click the button, they will be taken directly to the Easycart checkout for that product.

2. Linking to storefront

If you want to link to an entire page with all your products (your portfolio), you can use the Storefront feature.

Go to Easytools and navigate to Store.
Find the Storefront section.
You can edit which products are displayed on your Storefront - add or delete them depending on what you need.
Copy the Storefront link.
In Framer, create a button (e.g., "See our products") and paste the Storefront link.

Users clicking this button will see your entire portfolio of products from Easytools.

3. Adding Buy Me a Coffee widget

The Buy Me a Coffee widget allows your users to donate a small amount to your cause. Here's how to add it:

In Easytools, you first need a product linked to the donation. Go to Store → Products and create or select a "Buy me a coffee" product.
Go to Websites → Donation section.
Select or create a new donation widget.
Customize the style, colors, theme, sizes, and layout (you can place it in any corner of your page).
Click the button to Copy code - this is a short script.
In Framer, go to Site Settings → Custom Code.
Click to add new custom code.
Give it a name (e.g., "Coffee"), set placement to End of <head>, run Once, and apply to All pages.
Paste the script code and save.

4. Adding tickers (social proof)

Tickers display information about recent purchases to your visitors - this is social proof meant to drive engagement and bring more clients.

In Easytools, go to Websites → Social Proof (Tickers).
Configure your ticker settings.
Click Copy code.
In Framer, go to Site Settings → Custom Code.
Add a new custom code entry (you can combine it with the Coffee script in one entry, e.g., "Tickers + Coffee").
Paste the ticker script and save.

You can combine multiple scripts in one Custom Code entry. For example, name it "Tickers + Coffee" and include both scripts. Set it to run on All pages so the widgets appear everywhere on your site.

5. Embedding pricing sections

Pricing sections are embedded elements (iframes), not scripts. Here's how to add them:

In Easytools, go to Websites → Pricing Sections.
Select or create your pricing section (you can have monthly/yearly options, customize styles to match your website, change headers, etc.).
Click Copy embed code.
In Framer, go to the Layers view where you want to add the pricing.
From the Insert menu, search for and add an Embed element.
Select the embed element and make sure you choose HTML (not URL).
Paste the embed code.

The pricing section will load and display on your Framer page.

6. Embedding testimonials (wall of love)

Testimonials work the same way as pricing sections - they are embedded elements.

In Easytools, go to Websites → Testimonials (Wall of Love).
Customize the testimonials display as you want.
Click Copy embed code.
In Framer, add an Embed element from the Insert menu.
Select HTML mode and paste the embed code.

Remember the difference:

Scripts (Buy Me a Coffee, Tickers) - Go to Site Settings → Custom Code
Embeds (Pricing, Testimonials) - Use the Embed element in your page layout

Part 2: Login wall (protected content)

Login Wall allows you to have content on Framer that is protected - only people who bought access on Easytools can see it.

Watch the video tutorial covering Login Wall setup:

7. Setting up login wall in Easytools

In Easytools, go to Store → Products.
Select the product that should grant access to protected content (e.g., "Yoga Fundamentals Video Course").
Click the Gate content lock icon (on top right, next to other icons).
Select Secure page sections or secure entire page (in the video tutorial we cover securing sections).
Turn on Create asynchronous script - this is important because of the way Framer works.
Copy the entire generated code.

8. Adding login wall script to Framer

In Framer, go to Site Settings → Custom Code.
Add a new custom code entry.
Name it (e.g., "Login Wall").
Set placement to End of <head>.
For the page setting, select only the specific page that should be protected (e.g., "/class").
Paste the code from Easytools.
Save the settings.

9. Creating custom code file in Framer

You also need to create a custom code file in Framer Assets to enable the code overrides:

In Framer, go to Assets.
Create a New Code File.
Name it Easytools_login_wall.tsx.
Paste the following code:

import type { ComponentType } from "react"

// Function marking element as FREE (visible for everyone)
export function withIDfree(Component: ComponentType): ComponentType {
    return (props) => {
        return <Component {...props} data-free="true" />
    }
}

// Function marking element as PAID (visible only after purchase)
export function withIDpaid(Component: ComponentType): ComponentType {
    return (props) => {
        return <Component {...props} data-paid="true" />
    }
}

Save the file.

10. Applying code overrides

Go to your protected page (e.g., "/class").
Create two sections/elements:
- One for free users (e.g., "Member only area" - shown when NOT logged in)
- One for paying customers (e.g., "Congrats, you have access" - shown when logged in)
Select the element for paying customers.
In the right panel, find Code Overrides.
From the dropdown, select Easytools_login_wall (the file you created).
Choose withIDpaid - this will show this element only to paying customers.
Select the element for free users.
Apply the withIDfree override - this will show this element only to free (non-paying) users.

11. Testing the login wall

To test your login wall setup:

Publish your Framer site.
As a logged-in paying customer, you should see the "Congrats, you have access" content.
Open an Incognito/Private window to test as a non-logged-in user.
In incognito mode, you should see the "Member only area" content instead.