# Step 6: Embed the widget

**Summary:** Add the email widget to your website with the script from the Embed Widget tab, as plain HTML or as a Next.js client component, and check common setup problems.

- Space: [Developers](https://www.subrite.no/developers)
- Source: https://www.subrite.no/developers/email-widget-embed
- Updated: 2026-09-23
- Markdown index: https://www.subrite.no/developers/llms.txt

Get the code needed to integrate your email widget on any website.

<a id="where-to-find-the-embed-code"></a>
## Where to find the embed code

The embed code is available in the **Embed Widget** tab of your email widget configuration. Navigate to your widget and click the **Embed Widget** tab to access the complete JavaScript code.

<a id="widget-version"></a>
## Widget version

> [!NOTE]
> **Use the latest version**
>
> Always use the latest widget version to ensure you have the newest features, bug fixes, and security updates.

**Current version:** `1.0.2`

The widget version is specified in the script URL: `subrite-email-widget-1.0.2.js`

<a id="standard-integration"></a>
## Standard integration

<a id="html-and-javascript"></a>
### HTML and JavaScript

```html
<script
  src="https://your-domain.com/widgets/email-widget/subrite-email-widget-1.0.2.js"
  type="text/javascript"
  async
  onload="
    if (window.subriteEmailWidget) {
      window.subriteEmailWidget({
        apiBase: 'https://your-domain.com',
        widgetId: 'your-widget-id',
        // reference: 'external-reference',
      });
    }
  "
></script>
```

**Required parameters:**

- `apiBase`: Your Subrite instance URL
- `widgetId`: Unique widget identifier

**Optional parameters:**

- `reference`: Custom reference string for tracking purposes (for example an external system ID, campaign reference, URL, or any custom identifier)

<a id="next-js-integration"></a>
## Next.js integration

<a id="client-component"></a>
### Client component

Create a client component for the widget:

*EmailWidget.tsx*

```typescript
'use client';

import Script from 'next/script';

export default function EmailWidget() {
  return (
    <Script
      src="https://your-domain.com/widgets/email-widget/subrite-email-widget-1.0.2.js"
      onLoad={() => {
        if (window.subriteEmailWidget) {
          window.subriteEmailWidget({
            apiBase: 'https://your-domain.com',
            widgetId: 'your-widget-id',
            // reference: 'external-reference',
          });
        }
      }}
    />
  );
}
```

<a id="server-component-usage"></a>
### Server component usage

Import the client component in your server component:

```typescript
import EmailWidget from './EmailWidget';

export default function Layout() {
  return (
    <div>
      {/* Your layout content */}
      <EmailWidget />
    </div>
  );
}
```

<a id="troubleshooting"></a>
## Troubleshooting

If the widget is still not working after placing the embed code, check these common issues:

- **Widget Status**: Make sure the widget is published (not in draft mode)
- **Widget Activation**: Verify that the widget is activated in the [Settings tab](https://www.subrite.no/developers/email-widget-settings?md=true)
- **Configuration**: Double-check that `apiBase` and `widgetId` match exactly

> [!NOTE]
> The `apiBase` and `widgetId` are already provided in the embed code, so you don't need to modify them unless you're using a different Subrite instance or widget.

<a id="next-steps"></a>
## Next steps

1. **Test integration**: Verify that the widget loads and functions correctly
2. **Monitor performance**: Track loading times and user interactions