Skip to main content

Final Step: Embed 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 on the "Embed Widget" tab to access the complete JavaScript code.

Standard Integration​

HTML/JavaScript​

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

Required Parameters:

  • apiBase: Your Subrite instance URL
  • widgetId: Unique widget 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.0.js"
      onLoad={() => {
        if (window.subriteEmailWidget) {
          window.subriteEmailWidget({
            apiBase: 'https://your-domain.com',
            widgetId: 'your-widget-id',
          });
        }
      }}
    />
  );
}

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: Ensure the widget is published (not in draft mode)
  • Widget Activation: Verify the widget is activated in the Settings tab
  • Configuration: Double-check that the 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.

Next Steps​

  1. Test Integration: Verify widget loads and functions correctly
  2. Monitor Performance: Track loading times and user interactions