Language
Hotspot images in your Framer sites — via the built-in Embed element or a Code Component. Works on Free and paid plans.
Suited for designer portfolios, startup landing pages, and marketing sites.
Upload a photo, place markers, fill tooltips. Auto-save active.
Copy the two-line HTML from the picpins dashboard.
In the Designer drag an Embed element onto the canvas, paste the code, publish.
Framer has a dedicated Embed element for HTML+script embedding. Important: like Webflow, Framer does not render embeds live in Designer mode — you see them only after publish.
In the Framer Designer search the Insert menu (top left) for Embed. Drag the element onto the canvas at the desired position.
In the Inspector on the right a code field appears. Paste the embed code from the picpins dashboard. Saving is automatic.
Cmd+P (Mac) or the "Preview" button opens a preview page where the embed is actually rendered. Only here you see whether image and markers work.
If everything fits, click Publish top right. Framer deploys your site to its own domain (or custom domain depending on plan).
If you need embeds in multiple places and do not want to copy the code every time: in the Insert menu create a Code Component. In the React component definition place the embed code as JSX.
Example:
export default function picpinsEmbed(props) {
return (
<div>
<div className="picpins-embed" data-token={props.token} />
<script src="https://picpins.com/embed.js" async />
</div>
);
}Pass the token as a prop, place the component as often as needed with different tokens.
Framer CMS does not yet support embed fields directly. Workaround: place the Embed element manually on each collection detail page, or use a Code Component that reads a token value from the CMS field.
Project hero, markers with role, tools, live link, awards. More story than a static screenshot.
Hero visual with USPs as hotspots, tooltip with short explanation and CTA.
App screenshot with markers on features, tooltip with description and demo video.
Photo of the project location or final product, hotspots with contributors, phases, results.
Yes, the Embed element is fully usable on the Free plan. Restriction like Webflow: on Free you can only publish under the .framer.app or .framer.website subdomain, no custom domain.
Framer does not render embeds live in the canvas for performance and security reasons. You see a placeholder with "Embed". Only preview mode (Cmd+P) or the published page shows the real image.
Yes. Framer has Inspector properties for width and height of the Embed element. Set both to "Fill" or specific pixel values per breakpoint (desktop, tablet, mobile). The embed container adapts.
Framer CMS does not yet have a dedicated embed field type. Practical approach: place the embed manually on every detail page of the collection, or build a Code Component that uses a text CMS field as token.
Yes, as many as you like. The script loads once, all .picpins-embed containers initialize automatically. With many embeds: load the script tag once in a Code Component or in page custom code.
Framer builds performant sites — the additional embed loads asynchronously. Lighthouse score is barely affected, comparable to one extra image on the page.
The Embed element itself can be animated in Framer — position, opacity, scale on scroll or hover. The hotspot interactivity inside the embed remains independent and reacts to clicks/hover as usual.
Embeds are domain-independent. Switching from a Framer subdomain to a custom domain does not change the code. SSL changes or hosting migrations are also irrelevant.
Drop in the Embed element, publish, done. Bonus for power users: a Code Component for clean reuse.