Step 6: Embed the widget

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

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.

Widget version#

Current version: 1.0.2

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

Standard integration#

HTML and JavaScript#

<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)

Next.js integration#

Client component#

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',
          });
        }
      }}
    />
  );
}

Server component usage#

Import the client component in your server component:

import EmailWidget from './EmailWidget';

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

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
• Configuration: Double-check that apiBase and widgetId match exactly

Next steps#

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