Newsletter is a VTEX component that displays a newsletter form. This component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request.

Table of Contents


You should follow the usage instruction in the main README.

Then, add newsletter block into your app theme.


  "store.home": {
    "blocks": [


Through the Storefront, you can change the Newsletter's behavior and interface. However, you also can make in your theme app.

Prop nameTypeDescriptionDefault value
labelStringLabel of the form used by the componentSubscribe to our newsletter (translated text)
placeholderStringPlaceholder of the email inputEnter your email address (translated text)
submitStringLabel of the submit buttonSign up (translated text)
hideLabelBooleanHide labelfalse

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the Newsletter.

Class nameDescriptionComponent Source
newsletterOutmost elementindex
containerContainer elementindex
formForm elementindex
inputGroupElement that wraps inputindex
buttonContainerElement that wraps the buttonindex
labelLabel of the inputindex
errorError messsageindex
confirmationClass added to newsletter when user submit emailindex
confirmationTitleTitle showed when user submit emailindex
confirmationTextText showed when user submit emailindex