pinterest

A Webflow site publishes blog posts and product pages well, but it has no built-in way to push that visual content onto a discovery network or to measure the traffic that comes back. Other website platforms often ship a native Save button or a dedicated plugin for this; Webflow does not, and its Marketplace has no matching app either. Every share button, embed, and tracking tag needs a manual connection.

Pinterest closes that gap. Its official embed codes display Pins, boards, profiles, and Save buttons on any Webflow page, while the Pinterest Tag measures conversions from Pinterest traffic. An RSS feed from the Webflow CMS turns published items into Pins on its own, and the APIs cover anything custom.

This setup suits bloggers, recipe creators, ecommerce store owners, and design studios that publish visual content. Marketing teams use it to keep boards current without manual reposting, and developers reach for the APIs when they need custom publishing or analytics workflows.

How to integrate Pinterest with Webflow

What is Pinterest? Pinterest is a visual discovery platform where people find and save ideas for recipes, home decor, and style inspiration. Business accounts are free and add analytics and advertising tools on top of the standard save-and-share features.

Teams pair the two platforms to keep visual content moving in both directions. A furniture store pins new products as they launch, while a food blogger embeds a recipe board and lets RSS handle new Pins. Many Pinterest users browse with purchase intent, so the referral traffic tends to convert.

You can connect Pinterest and Webflow with embed codes, RSS, automation platforms, or APIs:

• Embed codes and the Pinterest Tag display Pins, boards, profiles, and Save buttons on Webflow pages and add conversion tracking, all through copy-paste code.
• RSS auto-pinning turns published Webflow CMS items into Pins with no code and no third-party tools.
• Zapier and Make connect Webflow triggers like new CMS items and orders to Pinterest's Create Pin action.
• The Webflow Data API and Pinterest API give full control over Pin creation and analytics sync, but need server-side development.

Most implementations combine two or more of these methods, depending on how complex the setup is.

Add Pinterest add-ons with Code Embed and custom code

Pinterest publishes five official website add-ons: the Save button, Follow button, Pin widget, Board widget, and Profile widget, all documented in the Pinterest add-ons overview. Each one is an <a> tag plus a shared pinit.js script. In Webflow, the <a> tag goes in a Code Embed element, and the custom code in head and body tags guide covers where the script belongs. You need a paid Workspace or an active Site plan to use custom code.

The shared script belongs just above the closing </body> tag:

<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>

Load it exactly once per page, since Pinterest's widget documentation warns that including it more than once may cause unpredictable results.

Embed a Pin, board, or profile

Pinterest provides a separate builder for each add-on, so no hand-written markup is needed. Board and Profile add-ons also accept width and scale settings, as described in the build a website add-on guide.

To embed a widget:

1. Open the Pin, Board, or Profile builder from Pinterest's build-a-website page and enter the Pin, board, or profile URL. For boards and profiles, set the size.
2. Copy the generated <a> tag.
3. In Webflow, open the Add panel, place a Code Embed element on the page, paste the tag, and save.
4. Paste the pinit.js script into Site settings > Custom code > Footer code, then publish.

A board embed looks like this:

<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/anapinskywalker/style/"></a>

If the script only needs to run on one page, use Page settings > Custom code > Before body tag instead of the site-wide footer field.

Add a Save button

The Save button lets visitors pin your images to their own boards, which turns your Webflow site into a Pin source. Pinterest's Save button guide calls for images of at least 110px in one dimension and 200px in the other, and the hover version needs images of at least 120px by 120px.

To add an image-hover or any-image Save button:

1. In the add-on builder, select Image hover or Any image under the button-type section.
2. Check Round and Large if you want them, pick a language, and test the sample image.
3. Copy the code from the first box and paste it into a Code Embed element where the button should appear.
4. Copy the code from the second box and paste it into Site settings > Custom code > Footer code so it loads before the closing </body> tag.

The single-image button type needs more technical setup than the hover and any-image options.

Install the Pinterest Tag

The Pinterest Tag tracks conversions such as purchases and add-to-cart events from Pinterest traffic. Its base code must load on every page, which is what the site-wide head code field is for. Claim your website on Pinterest before you rely on the data, because an unclaimed site cannot tie conversions back to ad performance.

To install the tag:

1. Open the Conversions section of your Pinterest Ads account and copy the base code, following the install the Pinterest Tag guide.
2. In Webflow, paste it into Site settings > Custom code > Head code and save.
3. Add event codes to the page-level Before body tag field on pages where conversions happen.

The base code must fire before any event code, per Pinterest's tag documentation. If you prefer a tag manager, add your Google Tag Manager container to the site and place the Pinterest Tag inside it. For more complete measurement, Pinterest also recommends pairing the browser tag with its server-side Conversions API, using shared event IDs so the two sources deduplicate.

Auto-publish Pins from your Webflow RSS feed

Pinterest can create Pins directly from an RSS feed, and every Webflow CMS Collection can output one. This is the only fully no-code path from Webflow content to Pinterest that uses no third-party tools. It needs a Webflow Site plan that includes CMS hosting and a Pinterest Business account.

To connect the feed:

1. Claim your website on Pinterest first, since the auto-publish option only appears for a claimed domain and each feed must match that domain.
2. Enable the RSS feed for your Collection in Webflow, then copy the feed URL from your published site.
3. From a desktop, open your Pinterest Business account settings and go to the bulk Create Pins section, following the auto-publish Pins from your RSS feed guide.
4. Paste the feed URL into the auto-publish field and save.

Pinterest then creates Pins as the feed updates, up to a few hundred per day, and the connection must be set up from desktop rather than mobile.

Connect with Zapier or Make

Both Zapier and Make offer direct Webflow and Pinterest connectors, so you can automate Pin creation without touching either API. Zapier maintains a dedicated Webflow and Pinterest integration, and Make lists a full set of modules on its Webflow and Pinterest page. Pinterest is a premium app on Zapier, so availability varies by Zapier tier.

Available connections include:

• A new Webflow form submission, comment, or order can trigger a Pinterest Create Pin action, where Board and Image are required and Link, Title, and Description are optional.
• A newly published Webflow CMS item can map to a Pinterest Create Pin, which is the most common blog-to-Pinterest workflow.
• A new Pinterest board or Pin can create a Collection Item or live item back in the Webflow CMS.
• Make's Webflow Watch Events trigger can feed its Create a Pin module, alongside modules to create, update, list, and delete boards.

Zapier ships a pre-built template for creating Webflow items from new Pinterest boards, while Make has none for this pair, so you build the scenario from its native modules.

Build with the Webflow and Pinterest APIs

The API path suits developers who need control over Pin timing, field mapping, and how analytics flow back into the site. It requires server-side development because Pinterest's OAuth tokens cannot live in client-side Webflow code. Pinterest grants API access in two tiers, Trial and Standard, described in the access tiers documentation. Trial Pins are sandbox entities visible only to their creator, and the Standard upgrade requires a video recording of your OAuth flow, so apply early.

Use the Pinterest API for Pin work and Webflow endpoints for CMS data and event triggers:

• The Pinterest API v5 handles Pin and board creation, media upload, and analytics at https://api.pinterest.com/v5.
• Pinterest OAuth 2.0 issues the access token for every call, with scopes such as pins:write and boards:write.
• The Webflow Data API handles CMS collections and form submissions at https://api.webflow.com/v2.
• Webflow webhooks fire real-time events like collection_item_created and form_submission.

Pinterest API v5 exposes no public webhooks for Pins or boards, so event-driven sync only flows from Webflow webhooks to Pinterest API calls. To react to Pinterest activity, poll endpoints like GET /v5/pins.

Auto-publish new CMS items as Pins

A middleware endpoint receives the Webflow webhook, confirms the CMS item is live, and calls Pinterest's Pin creation endpoint. This gives you the timing and field control that the no-code paths lack.

To implement it:

1. Register a webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and the body { "triggerType": "collection_item_created", "url": "https://your-middleware.com/hook" }, per the webhook creation reference. If your workflow publishes drafts later, also handle collection_item_changed.
2. Parse the payload's fieldData object for the item's name, slug, and image URL, and verify the item is published before creating a Pin.
3. Authorize with Pinterest OAuth 2.0 and request the boards:read, boards:write, pins:read, and pins:write scopes required by the Pins create endpoint.
4. Call POST https://api.pinterest.com/v5/pins with a board_id and media_source set to {"source_type": "image_url", "url": "<CMS featured image URL>"}.

Map the CMS item name to title (100 characters max), the excerpt to description (800 max), and the item URL to link (2,048 max). Video Pins take a separate path: register the upload with POST /v5/media first, then create the Pin with source_type: "video_id", per Pinterest's boards and Pins guide.

Sync Pin analytics back into the CMS

A scheduled job fetches Pinterest impressions and saves, then patches the matching CMS items, so editors see performance next to each post.

To implement it:

1. Fetch metrics with GET https://api.pinterest.com/v5/pins/{pin_id}/analytics using the pins:read scope, per the Pin analytics reference.
2. Write the values with PATCH https://api.webflow.com/v2/collections/{collection_id}/items and a body like { "items": [{ "id": "<webflow_item_id>", "fieldData": { "impressions": 1200, "saves": 45 } }] }, which needs the cms:write scope.
3. Publish the updated items with POST /v2/collections/{collection_id}/items/publish.

The bulk analytics endpoint GET /v5/pins/analytics is still in beta and not available to every app, so plan on the single-Pin endpoint first.

What you can build with the Pinterest Webflow integration

Connecting Pinterest with Webflow lets you move visual content across both platforms and measure the results, without manual reposting or copy-paste upkeep.

• Auto-pinned content hub: A recipe or DIY blog built on CMS Collections feeds Pinterest through RSS, so each new post becomes a Pin within a day.
• Portfolio with embedded mood boards: An interior design studio embeds its project boards on a services page with Code Embed elements, and wedding planners can embed collaborative vendor boards the same way.
• Ecommerce store with conversion tracking: The Pinterest Tag in your head code tracks add-to-cart and purchase events, while Open Graph or Schema.org markup enables Product Rich Pins that sync price and availability.
• Pinterest-sourced gallery in the CMS: A Zapier template writes new Pinterest board content into a Collection, and a Collection List displays it as a curated inspiration gallery on your site.

For product Rich Pin setup, follow Pinterest's Rich Pins guide. To build something similar with another visual network, see how to embed an Instagram feed on your Webflow site.