Menu
Guides
Storefront Development

Storefront Development

Newsletter

The `Newsletter` component is a section with at least one input text with an action allowing users to submit their input.

7 min read
Uses NewsletterForm, NewsletterHeader and NewsletterContent as compound components.
Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Usage

Import the component


_10
import {
_10
Newsletter,
_10
NewsletterAddendum,
_10
NewsletterContent,
_10
NewsletterForm,
_10
NewsletterHeader,
_10
} from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/organisms/Newsletter/styles.scss";


Examples

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Color variants

Main

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Light

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Accent

Example
Code

Get News and Special Offers!

Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.
By subscribing to our newsletter you agree to to our Privacy Policy.

Design tokens

Local tokenDefault value/Global token linked
--fs-newsletter-padding-mobilevar(--fs-spacing-5)
--fs-newsletter-padding-desktopvar(--fs-spacing-9) 10%
--fs-newsletter-border-radiusvar(--fs-border-radius)

Title

Local tokenDefault value/Global token linked
--fs-newsletter-title-sizevar(--fs-text-size-title-section)
--fs-newsletter-title-weightvar(--fs-text-weight-bold)

Icon

Local tokenDefault value/Global token linked
--fs-newsletter-icon-sizevar(--fs-spacing-5)

Variants

Card

Local tokenDefault value/Global token linked
--fs-newsletter-card-border-radiusvar(--fs-border-radius)

Main

Local tokenDefault value/Global token linked
--fs-newsletter-main-bkg-colorvar(--fs-color-primary-bkg)
--fs-newsletter-main-text-colorvar(--fs-color-primary-text)

Light

Local tokenDefault value/Global token linked
--fs-newsletter-light-bkg-colorvar(--fs-color-secondary-bkg-light)
--fs-newsletter-light-text-colorvar(--fs-color-text-display)

Accent

Local tokenDefault value/Global token linked
--fs-newsletter-accent-bkg-colorvar(--fs-color-highlighted-bkg)
--fs-newsletter-accent-text-colorvar(--fs-newsletter-light-text-color)

Data attributes

You can target and override Newsletter styles using the following data attributes:
data-fs-newsletter
data-fs-newsletter-color-variant="main" | "light" | "accent"
data-fs-newsletter-form
data-fs-newsletter-header
data-fs-newsletter-header-title
data-fs-newsletter-header-description
data-fs-newsletter-content
data-fs-newsletter-addendum

Setting up newsletter subscriptions

When customers subscribe to the store newsletter, FastStore saves their name and email in the Newsletter data entity in Master Data. The request is sent from FastStore's server, authenticated with an API key that is used only for this purpose, so all fields in the entity stay private.
To enable newsletter subscriptions, complete the following steps:
  1. Create the Newsletter data entity with private fields.
  2. Create a role that can create Master Data documents.
  3. Generate an API key dedicated to the newsletter.
  4. Add the credentials to your project.
Authenticated newsletter subscriptions are available from @faststore/core 4.10.2 (FastStore v4) and 3.100.9 (FastStore v3). Earlier versions send the subscription without credentials and only work if the entity fields are public, which is no longer allowed. To update, see Updating the @faststore/cli package version.
Don't make the Newsletter fields public. Public fields can be read without credentials, which would expose your subscribers' personal data. Starting October 26, 2026, Master Data no longer allows creating public fields. For more information, see Master Data: Temporary restriction on public fields.

Step 1: Creating the Newsletter data entity

The Newsletter data entity, identified by the NL acronym, stores the subscriptions made with the Newsletter component. Master Data v1 doesn't provide an API to create data entities or fields, so create it in the VTEX Admin.
For more details about Master Data data entities, see the data entity article.
  1. In the VTEX Admin, go to Store Settings > Storefront > Master Data.
  2. In Master Data, click Applications > Advanced Settings > Data structure.
  3. Click the Data Entities tab.
  4. Click Add new.
  5. Complete the fields of the Data Entity section with the following information:
    Field nameValue
    AcronymNL
    NameNewsletter
    Primary key typeGenerate a unique GUID
    Leave Allow all document query without filter unchecked. It lets anyone list every record in the entity through the API without credentials, and the newsletter doesn't need it.
  6. In the Fields tab, click New Field and create the following fields:
    NameDisplay NameTypeDescription
    emailEmailEmailCustomer's email address.
    isNewsletterOptInReceive newsletter?BooleanWhether the customer wants to receive the newsletter.
    nameNameVarchar 750Customer's name. Optional in the form.
    For each field, click the gear icon (⚙️) to open the field configuration options and:
    • Check Is nullable? for the email and name fields.
    • In the Search and filter settings section, check Is searchable? and Is filterable?.
    • Leave Make readable without credentials, Allow editing without credentials, and Allow filtering without credentials unchecked.
  7. Click Save and you will be redirected back to the Data Entity tab.
  8. In the row of the new NL entity, click the diskette 💾 to publish the created data entity.
  9. Click OK.
  10. Click the Applications tab to return to the Master Data homepage.
  11. Click Reload applications.

Step 2: Creating a role to create newsletter documents

  1. In the VTEX Admin, go to Account Settings > User Roles.
  2. Click New role and name it, for example, FS newsletter.
  3. Add the Dynamic Storage product to the role.
  4. Under Resources, select only the Insert or update document (not remove) permission.
  5. Save the role.
Master Data permissions apply to all data entities in the account, not only to NL. Use this role only for the newsletter API key, and don't add it to keys or users that have other purposes.

Step 3: Generating an API key

  1. In the VTEX Admin, go to Account > API Keys.
  2. In the Generated tab, click Generate Key.
  3. Complete the fields with the following:
    Field nameDescriptionValue example
    Key identificationName that identifies the keyFS NEWSLETTER API KEY
    RolesSelect the role for the keySelect only the role created in Step 2, FS newsletter
  4. Click Generate.
The App Key and App Token are displayed only once. Copy and securely save both credentials immediately, as you'll need them in the next step.

Step 4: Adding the credentials to your project

Add the API credentials to your project as secrets. In production, use the FastStore WebOps dashboard, as described in Managing variables and secrets:
  1. In the FastStore WebOps dashboard, go to the Settings tab.
  2. In the Variables and Secrets section, add each credential below. For each one, set Type to secret (not text), fill in Key and Value, and click Add.
    KeyValue
    FS_NEWSLETTER_APP_KEYYOUR_APP_KEY
    FS_NEWSLETTER_APP_TOKENYOUR_APP_TOKEN
  3. Wait 5 minutes and click Redeploy. Variables and secrets only take effect in the next successful deployment.
For local development, set the credentials as environment variables in the terminal where you start the store. faststore dev passes them to the store:

_10
export FS_NEWSLETTER_APP_KEY=YOUR_APP_KEY
_10
export FS_NEWSLETTER_APP_TOKEN=YOUR_APP_TOKEN

Avoid adding the credentials to vtex.env for local development. The FastStore starter tracks vtex.env in git, so a token added there is easy to commit by mistake.
If your store doesn't deploy with WebOps, manage the secrets with the VTEX IO CLI secrets plugin (vtex.env and secrets.hidden.json), as described in Managing variables and secrets.
Don't prefix these variables with NEXT_PUBLIC_, which would send them to the browser. Never commit API credentials to your repository, including in vtex.env.
Once the credentials are configured, FastStore creates each subscription as a new document in the NL entity. The request only creates documents: it never reads, updates, or deletes existing ones.
If the credentials are missing, FastStore logs a warning and sends the subscription without credentials, which fails when the NL fields are private.

Migrating an existing Newsletter data entity

If your store created the NL entity with public fields, as previously documented, complete Step 2, Step 3, and Step 4 to add the secrets, redeploy your store with a FastStore version that supports newsletter credentials, confirm that the deployment succeeded, and only then:
  1. In Master Data, open the NL entity in the Data Entities tab.
  2. In the Data Entity section, uncheck Allow all document query without filter.
  3. For each field, uncheck Make readable without credentials, Allow editing without credentials, and Allow filtering without credentials.
  4. Save and publish the entity, and then click Reload applications.
  5. Subscribe to the newsletter on your store to confirm that the document is created.
Change the fields to private only after the new version is deployed with the credentials configured. Otherwise, newsletter subscriptions will fail until the deploy is complete.

Props

Newsletter

NameTypeDescriptionDefault
card*false | trueEnables the card Variant.
colorVariant"main" | "light" | "accent"Specifies the component's color variant combination.main
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter

NewsletterAddendum

NameTypeDescriptionDefault
addendumstringSpecifies the addendum for the subscription.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-addendum

NewsletterContent

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-content

NewsletterForm

NameTypeDescriptionDefault
onSubmit*(event: FormEvent<Element>) => voidFunction called when submit button is clicked.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-form

NewsletterHeader

NameTypeDescriptionDefault
iconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon for the section.
title*stringTitle for the section.
descriptionstringA description for the section.
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-newsletter-header