Email Collection Widget Setup

Learn how to embed our email signup widget on your website to start collecting subscribers.

Quick Setup

Step 1: Get Your Widget Code

1. Log into your newsletter dashboard
2. Navigate to Settings → Widget
3. Copy your unique widget script

Step 2: Add the Base Script

Add this script to your website's HTML, preferably before the closing </body> tag:

<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://yourdomain.com/newsletter-widget.js";
    js.setAttribute('data-newsletter-id', 'YOUR_NEWSLETTER_ID');
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'newsletter-widget'));
</script>

Important: Replace https://yourdomain.com with your actual domain name and YOUR_NEWSLETTER_ID with your newsletter ID from the dashboard.

Step 3: Add Widget Container

Place this HTML where you want the signup form to appear:

<div id="newsletter-signup"></div>

Widget Styles

Choose from different pre-built styles:

Minimal Style (Default)

<div id="newsletter-signup" data-style="minimal"></div>

Clean, simple input and button.

Card Style

<div id="newsletter-signup" data-style="card"></div>

Elevated card design with shadow.

Inline Style

<div id="newsletter-signup" data-style="inline"></div>

Horizontal layout for sidebars.

Customization Options

Colors and Text

<div id="newsletter-signup" 
     data-style="minimal"
     data-button-color="#0066cc"
     data-button-text-color="#ffffff"
     data-placeholder="Your email address"
     data-button-text="Join Newsletter"
     data-success-message="Thanks for subscribing!">
</div>

Available Attributes

Platform-Specific Instructions

WordPress

1. Theme Files: Add the script to your theme's footer.php file
2. Widget Areas: Use a Custom HTML widget in your sidebar
3. Page Builder: Add as HTML/Code block in Elementor, Gutenberg, etc.

Shopify

1. Theme Files: Add to theme.liquid before </body>
2. Pages: Use HTML content blocks
3. Product Pages: Add to product description templates

Squarespace

1. Code Injection: Add script to Footer Code Injection
2. Pages: Use Code Blocks for widget containers
3. Templates: Add to template files via Developer Mode

Webflow

1. Project Settings: Add script to Footer Code
2. Pages: Use Embed components for widget containers
3. CMS: Add to CMS template pages

Advanced Configuration

Multiple Widgets

You can have multiple widgets on the same page:

<!-- Header widget -->
<div id="newsletter-signup-header" data-style="inline"></div>

<!-- Sidebar widget -->
<div id="newsletter-signup-sidebar" data-style="card"></div>

<!-- Footer widget -->
<div id="newsletter-signup-footer" data-style="minimal"></div>

Custom CSS

Override default styles with your own CSS:

#newsletter-signup {
  max-width: 400px;
  margin: 20px auto;
}

#newsletter-signup input {
  border-radius: 8px;
  border: 2px solid #e1e5e9;
}

#newsletter-signup button {
  border-radius: 8px;
  font-weight: 600;
}

Event Callbacks

Listen for widget events:

window.addEventListener('newsletter-signup-success', function(event) {
  console.log('New subscriber:', event.detail.email);
  // Track conversion in analytics
  gtag('event', 'newsletter_signup', {
    'email': event.detail.email
  });
});

window.addEventListener('newsletter-signup-error', function(event) {
  console.log('Signup error:', event.detail.error);
});

Testing Your Widget

Verification Checklist

• Script loads without errors (check browser console)
• Widget appears in the correct location
• Form accepts valid email addresses
• Success message displays after submission
• Subscribers appear in your dashboard
• Widget is responsive on mobile devices

Common Issues

Widget doesn't appear:

• Check that the script is loaded
• Verify your user ID is correct
• Ensure the container element exists

Form doesn't submit:

• Check browser console for JavaScript errors
• Verify network connectivity
• Ensure CORS is properly configured

Styling issues:

• Check for CSS conflicts
• Use browser dev tools to inspect elements
• Try different widget styles

Analytics Integration

Google Analytics

Track signups as conversions:

window.addEventListener('newsletter-signup-success', function(event) {
  gtag('event', 'conversion', {
    'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL',
    'value': 1.0,
    'currency': 'USD'
  });
});

Facebook Pixel

Track newsletter signups:

window.addEventListener('newsletter-signup-success', function(event) {
  fbq('track', 'Lead', {
    content_name: 'Newsletter Signup'
  });
});

Support

Need help with widget setup? Contact our support team with:

• Your website URL
• Widget configuration details
• Any error messages from browser console