Skip to main content
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;