> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bragbox.one/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Site

> Add the BragBox widget to a custom-coded website.

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:

```html theme={null}
<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:

```html theme={null}
<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:

```jsx theme={null}
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;
```