Peerbound for Web Setup - Integrating the embed code

Last updated: April 7, 2026

To enable Peerbound for Web for your organization, please contact your CSM.

Overview

Peerbound for Web makes it easy to bring your customer proof directly onto your website. Showcase moments, reviews, and stories that build credibility and help drive conversions.

The widget pulls content directly from Peerbound and displays it in a responsive, customizable grid that matches your brand. Content updates automatically—new proof appears in real time, and any removed or anonymized content is instantly reflected on your site.

This guide covers how to implement the widget, including configuration options, filtering, and styling.

Quick Start

Add the widget script to your page and place the <pb-embed> element where you want customer proof to appear:

<pb-embed embed-id="your-embed-id"></pb-embed>
<script async src="<https://embed.peerbound.com/v1/widget.js>"></script>

Replace your-embed-id with the embed ID from the Peerbound Embed Settings page.

Content Security Policy

If your site uses a Content Security Policy (CSP), add embed.peerbound.com to the following directives:

script-src: To load the widget script
connect-src: For API requests to Peerbound
img-src: For images served by Peerbound (also add media.brand.dev for customer logos)

Configuration Options

Configure the widget using attributes on the <pb-embed> element.

Attribute	Required	Description
`embed-id`	Yes	Your unique embed ID (UUID) from the Peerbound dashboard
`count`	No	Maximum number of items to display initially
`hide-photos`	No	Set to `"true"` to hide customer photos
`hide-peerbound-badge`	No	Set to `"true"` to hide the “Verified by Peerbound” badge
`filters`	No	JSON string to filter displayed content (see Filtering)

Example:

<pb-embed embed-id="your-embed-id" count="10" hide-photos="true"></pb-embed>

Styling

The widget uses Shadow DOM for style isolation, ensuring your page styles won’t affect the widget and vice versa. You can customize the widget appearance using CSS custom properties or the ::part() selector.

CSS Custom Properties

Apply these CSS variables to the pb-embed element to customize colors, spacing, and border radius:

Variable	Description
`--pb-card-background-color`	Background color of cards
`--pb-card-border-color`	Border color for cards and dividers
`--pb-text-primary-color`	Primary text color
`--pb-text-secondary-color`	Secondary/muted text color
`--pb-review-star-color`	Star rating color
`--pb-review-star-size`	Star rating size
`--pb-card-grid-gap`	Spacing between cards in the grid
`--pb-card-padding`	Internal padding of cards
`--pb-card-radius`	Border radius of cards

Dark Mode Example

pb-embed {
  --pb-card-background-color: #1f2937;
  --pb-card-border-color: #374151;
  --pb-text-primary-color: #f9fafb;
  --pb-text-secondary-color: #9ca3af;
  --pb-review-star-color: #fbbf24;
}

Advanced Styling with `::part()`

For granular control over specific elements, use the CSS ::part() selector. This allows you to style individual components within the widget.

Card Components

Part	Description
`card`	Individual card wrapper
`card-title`	Card title/headline
`card-text`	Card body text
`card-question`	Question text (for review Q&A format)
`card-footer`	Card footer section
`card-expand-button`	Show more button
`card-source-link`	Link to original source

Attribution

Part	Description
`attribution`	Attribution section wrapper
`attribution-name`	Person’s name
`attribution-title`	Job title
`attribution-company`	Company name
`attribution-avatar`	Avatar container
`attribution-avatar-image`	Avatar image
`attribution-account-logo`	Company/account logo

Miscellaneous

Part	Description
`peerbound-badge`	“Verified by Peerbound” badge
`load-more-button`	Load more pagination button
`spinner`	Loading spinner
`empty`	Empty state container
`empty-title`	Empty state title text
`empty-description`	Empty state description text

Part Styling Example

pb-embed::part(card) {
  border: 2px solid #3b82f6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

pb-embed::part(card-title) {
  font-family: "Georgia", serif;
  font-size: 1.5rem;
}

pb-embed::part(attribution-name) {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

pb-embed::part(source-link) {
  display: none;
}