Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-newsletter-button>

The submit button paired with <mmm-footer-newsletter-email>. On click, finds the sibling email field and calls its handleSubmit() — or, if there is no sibling, dispatches newsletter-subscribe so your own integration can take over.

Overview

Click handling resolves in two steps:

  • Locate a sibling <mmm-footer-newsletter-email> (inside the parent element, or inside [data-wc-wrapper] for editor mode).
  • If found, invoke its handleSubmit() — built-in validation + alert.
  • If not found, dispatch newsletter-subscribe as a bubbling event so a wrapping form / framework can subscribe its own way.

When to use

  • Inside <mmm-footer-newsletter> next to the email input.
  • Anywhere you want a themed CTA button — drop it next to any other <mmm-*> input that exposes handleSubmit().

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-footer-newsletter-email></mmm-footer-newsletter-email>
<mmm-footer-newsletter-button button-text="Subscribe"></mmm-footer-newsletter-button>

Attributes

AttributeTypeDefaultDescription
button-textstringSubscribeLabel shown on the button.
font-sizestring14pxButton font-size.
colorstringtheme button textText colour.
background-colorstringtheme button normal fillButton background colour.
font-weightstringtheme button weightButton font-weight.
font-familystringtheme description fontButton font-family.
border-radiusstring0Button border-radius.
borderstringnoneFull CSS border shorthand.
paddingstring12px 28pxButton padding.
widthstringautoPlain number → appended with px; auto sizes to content.

Events

EventTargetPayload
newsletter-subscribeelement (bubbles, composed){} — only fired when there is no sibling email field

Live preview

store sample-store tag <mmm-footer-newsletter-button>

Examples

1. Default — paired with the sibling email field

<mmm-footer-newsletter-email></mmm-footer-newsletter-email>
<mmm-footer-newsletter-button button-text="Subscribe"></mmm-footer-newsletter-button>

2. Themed full-width pill button

<mmm-footer-newsletter-button
  button-text="Join now"
  background-color="#c8a8ff"
  color="#0e1011"
  font-weight="700"
  border-radius="999px"
  padding="14px 32px"
  width="200">
</mmm-footer-newsletter-button>

3. Hand-rolled integration via the event

const btn = document.querySelector('mmm-footer-newsletter-button');
btn.addEventListener('newsletter-subscribe', () => {
  /* No sibling email element exists — do whatever you want here. */
  myAnalytics.track('newsletter_cta_click');
});