Step 6: Embed the widget
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.
ArticleView as Markdown
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.
Get the code needed to integrate your email widget on any website.
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.
Current version: 1.0.2
The widget version is specified in the script URL: subrite-email-widget-1.0.2.js
<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 URLwidgetId: Unique widget identifierOptional parameters:
reference: Custom reference string for tracking purposes (for example an external system ID, campaign reference, URL, or any custom identifier)Create a client component for the widget:
'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',
});
}
}}
/>
);
}Import the client component in your server component:
import EmailWidget from './EmailWidget';
export default function Layout() {
return (
<div>
{/* Your layout content */}
<EmailWidget />
</div>
);
}If the widget is still not working after placing the embed code, check these common issues:
apiBase and widgetId match exactly