Skip to content

Developer Platform

Search docs & API
Log in
Sign up

Widgets

Profile widget

Add a profile widget to your page to show the most recent Pins you've saved. - Before you start, make sure you've included the
pinit.jss
script on your page. - Remember, only include this script once per page, no matter how many Pinterest add-ons or widgets you use, including it more than once may cause unpredictable results. - See About Add-ons for tips about how to include the
pinit.jss
script on your site.
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
The profile widget will show the maximum number of Pin columns that will fit on your chosen Pin and board width. Because of this, the widget may not be the exact size you specify. If your board width does not fit inside the parent element, Pin columns will be removed until the board width fits inside your widget.
The profile widget will show the maximum number of Pin columns that will fit on your chosen Pin and board width. Because of this, the widget may not be the exact size you specify. If your board width does not fit inside the parent element, Pin columns will be removed until the board width fits inside your widget.
The Profile widget can have the following properties and attributes:
  • data-pin-board-width
    : The width of the profile inside the widget. This width does not include the white border on either side. Minimum width: 130px. Default width: width of parent element
  • data-pin-scale-height
    : The height of the profile inside the widget. This height does not include the white border above and below. Minimum height: 60px. Default width: 175px.
  • data-pin-scale-width
    : Width of the Pin thumbnails within the widget. Minimum width: 60px. Default width: 92px.
<a
  href="https://www.pinterest.com/anapinskywalker/"
  data-pin-do="embedUser"
  data-pin-board-width="400"
  data-pin-scale-height="320"
  data-pin-scale-width="80"
>
</a>

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

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

Profile widget example

Profile widget example

Board widget

When one Pin isn't enough, add an entire board (up to 50 Pins) to your site. Board widgets give your visitors a quick taste of what your Pinterest profile's all about, and help to drive more traffic to your board. Before you start, make sure you've included the
pinit.js
script on your page (otherwise your widgets won't show up). Remember, only include this once per page, no matter how many Pinterest widgets you use (including it more than once may cause unpredictable results).
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
The board widget will show the largest number of Pin columns that will fit based on your chosen Pin and board width. Because of this, the widget may not be the exact size you specify. If your board width does not fit inside of the parent element, Pin columns will be removed until it fits.
The board widget will show the largest number of Pin columns that will fit based on your chosen Pin and board width. Because of this, the widget may not be the exact size you specify. If your board width does not fit inside of the parent element, Pin columns will be removed until it fits.
board widget table
AttributeDescriptionDefault
data-pin-board-width
The width of the board inside the widget. This width does not include the white border on either side. Minimum width of 130px.
Fill width of parent
data-pin-scale-height
The height of the board inside the widget. This does not include the white border above and below. Minimum height of 60px.
175px
data-pin-scale-width
Width of the Pin thumbnails within the widget. Minimum width of 60px.92px
<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>

Board widget example

Board widget example

Pin widget

The Pin widget lets you show a Pin on your site.
  • Before you start, make sure you've included the
    pinit.js
    script on your page.
  • Remember, only include this once per page, no matter how many Pinterest widgets you use (including it more than once may cause unpredictable results).
  • See About Add-ons for tips on including our JavaScript on your site.
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
To add a Pin to your site, add the full Pin URL and use the attribute
data-pin-do="embedPin"
.
<a href="https://www.pinterest.com/pin/1234567890/" data-pin-do="embedPin"></a>

Pin widget example

Pin widget example
Was this page helpful?