Language
Hotspots, tooltips and shoppable product photos straight into your WordPress site, no plugin zoo. Works in Gutenberg, in the Classic editor, and in any common page builder.
Also compatible with WooCommerce, Elementor, Divi, and Beaver Builder.
Upload a photo to picpins, place markers, fill tooltips. Auto-save handles the rest.
In the picpins dashboard click "Embed". You get two lines of HTML.
Add a Custom HTML block in your post or page, paste the code, publish.
WordPress distinguishes between Gutenberg (block editor since 5.0) and the Classic editor. The embed works in both. If you use a page builder like Elementor, Divi, or Beaver Builder, it has its own HTML widget — the code goes in there the same way.
Open the post or page where the interactive image should appear. Click the plus icon to add a new block and look for Custom HTML. That is the block where you can paste HTML and JavaScript directly.
Paste the two-line embed code from your picpins dashboard. Click "Preview" in the top right of the block to see the image already in the editor.
The classic TinyMCE editor has two tabs: "Visual" and "Text". Switch to Text. There you see the HTML source of your post. Paste the embed code at the desired position and switch back to "Visual" or publish directly.
Important: when you make a change in Visual mode, WordPress may reformat the pasted code. Safer to save the post directly from Text mode.
Every common page builder has an HTML or code element. In Elementor it is called "HTML", in Divi "Code Module", in Beaver Builder "HTML". Drag the element to the desired position, open the settings, paste the embed code in the code field.
Save, check preview, publish.
On a WooCommerce product page you can paste the embed into the product description — that is the same editor as for regular posts, Gutenberg or Classic. Use it to mark variants, sizes, or product details right on the photo.
For the short description above the cart button it also works, but space is limited and the embed gets visually too large. Recommended: use the long description below.
Tag products directly inside the post image, link to your affiliate page or own shop. Tooltip with image, price, and button.
Components, materials, or sizes right on the product photo. Saves endless tables below the image.
Tool or software screenshots with numbered markers. Tooltip texts with step explanations and video embed.
Photo of an apartment, every room as a hotspot with size, amenities, and image gallery.
.picpins-embed class directly in your theme CSS.No. The embed is plain HTML with a small script tag. As long as your theme or host does not block JavaScript embeds, it works out of the box. For 99% of WordPress installations the Custom HTML block is enough.
Yes, in both. In Gutenberg you use the "Custom HTML" block. In the Classic editor switch to the "Text" tab and paste the code in the source.
Works the same way. Every page builder has an HTML or code module. Paste the code there, save, done. In Elementor the module is under "General → HTML", in Divi under "Code Module", in Beaver Builder under "HTML".
Aggressive cache plugins like WP Rocket, W3 Total Cache, or LiteSpeed Cache sometimes serve old versions of the page without picking up the new embed. Solution: clear the full cache once after pasting. With WP Rocket "Clear cache" in the admin header is usually enough.
If scripts are minified or combined, exclude the picpins script from combining — most plugins have an exclusion list for this.
Yes. The embed goes into the product description, not the product image field directly — WooCommerce expects real image URLs there. But below the product image, in the description editor, you can place as many picpins embeds as you like.
AMP (Accelerated Mobile Pages) only allows a very limited list of external scripts. picpins embeds do not work in the AMP variant of your page. In the standard version (desktop and mobile without AMP) everything runs normally.
If you need AMP, embed a static screenshot or the picpins share link in the AMP variant instead.
Yes, as many as you like. The embed.js script loads only once, after that all .picpins-embed containers are initialized automatically. Performance stays clean because the script loads asynchronously.
The embed is part of the post content, not the theme. Switching themes only changes layout, fonts, and colors around it — the embedded image stays stable and keeps working. As long as the new theme allows JavaScript (which 99% of themes do), everything keeps running.
Account in 30 seconds, upload an image, place markers, copy the embed code — done. No credit card needed.