How to Embed a Pinterest Board on a Website

Embedding a Pinterest board on your website is a fantastic way to showcase your brand's visual identity, share inspiring ideas, or feature user-generated content without any complicated setup. This guide will walk you through the process, from using Pinterest’s official tool to placing the board perfectly on your site, whether you're using WordPress, Shopify, or another platform.

Why You Should Embed a Pinterest Board on Your Website

Before getting into the how-to, it’s worth understanding the benefits. Displaying a curated Pinterest board on your site isn’t just about making things look nice, it’s a strategic move that can pay off for your brand.

1. Boost Website Engagement and Dwell Time

An embedded Pinterest board is interactive. Visitors can scroll through your pins, click on them to see them on Pinterest, and explore further right from your webpage. When people spend more time interacting with content on your site, it signals to search engines like Google that your page is valuable, which can positively impact your SEO. Instead of just reading text, they are *doing* something, and that active engagement keeps them around longer.

2. Create a Living, Breathing Lookbook or Portfolio

If you're an artist, designer, e-commerce store, or blogger, your Pinterest boards are likely a visual extension of your work. Embed a board to act as a dynamic portfolio or product gallery. For example:

• An interior designer can embed a board of their latest project inspiration or completed work on their services page.
• A fashion blogger can feature a "Fall Outfit Ideas" board that visually complements a recent blog post.
• A Shopify store can embed a board with user-generated content, showing real customers using their products.

The best part? As you add new pins to the board on Pinterest, it automatically updates on your website. No need to constantly upload new images to your site editor.

3. Drive Traffic to Your Pinterest Profile (and grow your following)

Every embedded board links back to Pinterest. When a visitor clicks on a pin or your profile name, they are taken directly to your Pinterest account. This creates a powerful feedback loop: your website introduces visitors to your Pinterest presence, and your Pinterest presence helps drive brand awareness. It’s an organic way to grow your Pinterest following from traffic you already have.

4. Enhance Your Website's Visual Appeal with Fresh Content

Static websites can feel a bit dated. An embedded Pinterest board adds a shot of life to any page, breaking up text-heavy layouts with a rich, responsive grid of images and videos. Since the content can change whenever you update the board, it keeps returning visitors engaged with something new to look at, all without you having to edit the page itself.

How to Embed Your Pinterest Board: A Step-by-Step Guide

Pinterest makes this incredibly easy with its official Widget Builder. There's no need to hunt for third-party plugins that might slow down your site or stop working. You'll just need your Pinterest board's URL and access to your website's back end.

Step 1: Get the URL of Your Pinterest Board

First, you need the direct link to the Pinterest board you want to embed. It's simple:

1. Log into your Pinterest account.
2. Go to your profile and click on the specific board you want to use.
3. Copy the URL from your browser's address bar. It will look something like this: https://www.pinterest.com/username/board-name/.

Keep this URL handy, you’ll need it in the next step.

Step 2: Use the Pinterest Widget Builder

Pinterest’s tool generates the code you need. You don't have to write anything yourself.

1. Go to the Pinterest Widget Builder page.
2. You'll see options to create a widget for a Pin, Profile, or Board. Click on 'Board'.
3. Paste the board URL you copied in the previous step into the field that says "Pinterest board URL."

The builder will immediately generate a preview on the right side of the screen.

Step 3: Customize the Size and Layout

Before you grab the code, you can tweak the appearance of your embedded board to fit your website's layout. You have four main options for size:

• Square: Perfect for creating a clean, grid-like section on a page. The builder creates a square widget based on the image width you set.
• Sidebar: Designed specifically for vertical sidebars, common in blog layouts. It's narrower and taller.
• Header: A wide, rectangular shape that's ideal for placing at the top of a page or stretching across a page section.
• Create your own: This option gives you full control. You can set the pin image width, the board height, and the board width manually. Pro-tip: for a responsive design that fits any screen, use 100% for the Board Width.

Play around with these settings until the preview looks just right.

Step 4: Copy the Generated Code

Once you’re happy with the preview, look below the customization options. You'll see two boxes of code. You need both of them.

1. The Display Code: The first box contains a small snippet that looks like this. It’s what physically places the board on your page. <,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/pinterest/official-news/">,<,/a>,
2. The Script: The second box contains a JavaScript file. This script is what allows your website to communicate with Pinterest and render the board correctly. It only needs to be added to your website once, no matter how many boards you embed. <,script async defer src="//assets.pinterest.com/js/pinit.js">,<,/script>,

Now that you have the code, it's time to add it to your website.

Placing the Embed Code on Your Website (WordPress, Shopify & More)

The final step depends on what platform your website is built on. Here are instructions for the most popular systems.

For WordPress Sites

If you're using the modern Gutenberg block editor, this is super easy.

1. Navigate to the page or post where you want the board to appear.
2. Click the `+` icon to add a new block.
3. Search for and select the 'Custom HTML' block.
4. Paste the first part of the code (the `` tag) into this block.

1. One time only: copy the second part of the code (the `