Language
Hotspots, tooltips, and shoppable lifestyle images in your Webflow site — via the standard Embed element, no custom-code grind.
Works in Designer, Editor, CMS Collections, and Webflow E-Commerce.
Upload a photo, place markers, fill tooltips. Everything saves automatically.
Copy the two HTML lines from the picpins dashboard.
In the Designer drag an Embed element onto the page, paste the code, "Save & Close", publish the page.
Webflow has a dedicated Embed element for exactly this use case. Important: embeds are not rendered live in Designer mode — you see them only on the published page.
In the Designer search the Add panel (left) for Embed or find it under Components → Embed. Drag the element onto the page at the desired position.
A code editor window opens. Paste the embed code from the picpins dashboard, click Save & Close.
Publish top right or in preview (eye icon). After publishing open the website in the browser — either directly under [projectname].webflow.io or, if a custom domain is connected, your own domain.
If the image does not appear: clear browser cache (Ctrl+F5), double-check the embed code in the Designer.
Webflow CMS does not support embed fields directly. Workaround: use a Plain Text or Rich Text field where you store the embed ID or the whole code as text, and output it in the template via conditional logic. Or simpler: place the Embed element manually on individual CMS detail pages.
For scalable solutions — many images each with its own picpins — the custom-code variant via Page Settings (see next step) is more flexible.
In Page Settings under Custom Code → Before </body> tag you can place scripts centrally. If you have multiple picpins images on one page, put the <script src="..."> tag here once — then in the individual Embed elements only the <div class="picpins-embed" data-token="..."></div> is needed.
That avoids script duplicates and makes performance auditing cleaner.
Hero image on the homepage, USPs as markers with detail tooltips, buttons straight to conversion.
Project image, markers with role, tools, live link. Tells more than a static screenshot.
Webflow E-Commerce shop with lifestyle page, hotspots on outfit items with buy button.
Screenshot of your tool, markers on features with explanation and demo link.
Custom Code → Before </body> instead of repeating it in every Embed element.Yes. The Embed element is fully usable on the Free plan. Only restriction: on Free you can only publish under the .webflow.io subdomain, no custom domain. The embed works the same there.
Webflow does not render embeds live in the Designer canvas for security reasons. You only see a placeholder with the "Embed" label. The actual image appears only after publish (or in preview mode).
Not directly in a CMS field (Webflow has no dedicated embed field type). Workaround: place the Embed element manually on the detail page of collection items — one per item. For scalable setups: custom code in page header/footer and insert the token from the CMS field via Liquid-like logic.
Webflow Embed elements can be placed any number of times on a page. For better performance handling you can move the <script> tag once into the page footer (Custom Code → Before </body> tag) and keep only the <div> container in individual embeds.
Webflow sites are generally performant. The picpins script loads asynchronously and only minimally affects the Lighthouse score — usually a 1–3 point performance difference, comparable to one extra image.
Nothing changes for the embed. The code is domain-independent — it works on webflow.io the same as on your custom domain. SSL certificate changes or hosting migrations also do not affect the embed.
Once an Embed element is placed in the Designer, a content editor in the Webflow Editor (the limited CMS editor for non-technical editors) cannot change the code content themselves. Editing embed code always requires Designer access.
Yes. On product detail pages, collection pages, or own lookbook pages the embed works like on any other Webflow page. In the cart or checkout itself it makes less sense — there the customer wants to finish, not browse.
One Embed element, two lines of code, finished interactive image. That is how Webflow is supposed to feel.