Custom Site

If you have a custom HTML/CSS/JS site or work with a developer, embedding BragBox is straightforward.

Add the script tag

Paste the embed snippet into any HTML file where you want testimonials to appear:

<script
  async
  src="https://bragbox.one/widget.js"
  data-bragbox-id="wid_your_id_here"
  data-theme="light"
  data-limit="6"
></script>

The widget renders an iframe immediately after the script tag. Place the snippet inside a container <div> to control the layout:

<div class="testimonials-section">
  <h2>What our clients say</h2>
  <script
    async
    src="https://bragbox.one/widget.js"
    data-bragbox-id="wid_your_id_here"
    data-theme="light"
    data-limit="6"
  ></script>
</div>

Placement

The iframe is injected directly after the script tag in the DOM. Wrap it in a container and style the container — don’t try to style the iframe contents directly, as they’re isolated from your site’s CSS.

React / Next.js

In a React or Next.js project, use a useEffect to inject the script:

import { useEffect } from 'react';

export function BragBoxWidget({ widgetId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://bragbox.one/widget.js';
    script.async = true;
    script.setAttribute('data-bragbox-id', widgetId);
    script.setAttribute('data-theme', 'light');
    document.getElementById('bragbox-container').appendChild(script);
  }, [widgetId]);

  return <div id="bragbox-container" />;
}

Content Security Policy (CSP)

If your site uses a CSP header, you’ll need to allow the BragBox domain:

script-src 'self' https://bragbox.one;
frame-src 'self' https://bragbox.one;

Getting Started

Collecting Testimonials

Managing Testimonials

Publishing

Account & Billing

Add the script tag

Placement

React / Next.js

Content Security Policy (CSP)

​Add the script tag

​Placement

​React / Next.js

​Content Security Policy (CSP)

Add the script tag

Placement

React / Next.js

Content Security Policy (CSP)