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
Usage
Import the component
_10import {_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";
For details, see Importing FastStore UI component styles.
Examples
Example
Code
Color variants
Main
Example
Code
Light
Example
Code
Accent
Example
Code
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-padding-mobile | var(--fs-spacing-5) |
--fs-newsletter-padding-desktop | var(--fs-spacing-9) 10% |
--fs-newsletter-border-radius | var(--fs-border-radius) |
Title
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-title-size | var(--fs-text-size-title-section) |
--fs-newsletter-title-weight | var(--fs-text-weight-bold) |
Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-icon-size | var(--fs-spacing-5) |
Variants
Card
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-card-border-radius | var(--fs-border-radius) |
Main
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-main-bkg-color | var(--fs-color-primary-bkg) |
--fs-newsletter-main-text-color | var(--fs-color-primary-text) |
Light
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-light-bkg-color | var(--fs-color-secondary-bkg-light) |
--fs-newsletter-light-text-color | var(--fs-color-text-display) |
Accent
| Local token | Default value/Global token linked |
|---|---|
--fs-newsletter-accent-bkg-color | var(--fs-color-highlighted-bkg) |
--fs-newsletter-accent-text-color | var(--fs-newsletter-light-text-color) |
Data attributes
You can target and override
Newsletter styles using the following data attributes:data-fs-newsletterdata-fs-newsletter-color-variant="main" | "light" | "accent"data-fs-newsletter-formdata-fs-newsletter-headerdata-fs-newsletter-header-titledata-fs-newsletter-header-descriptiondata-fs-newsletter-contentdata-fs-newsletter-addendumSetting 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:
- Create the Newsletter data entity with private fields.
- Create a role that can create Master Data documents.
- Generate an API key dedicated to the newsletter.
- Add the credentials to your project.
Authenticated newsletter subscriptions are available from@faststore/core4.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/clipackage 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.
-
In the VTEX Admin, go to Store Settings > Storefront > Master Data.
-
In Master Data, click Applications > Advanced Settings > Data structure.
-
Click the Data Entities tab.
-
Click
Add new. -
Complete the fields of the Data Entity section with the following information:
Field name Value Acronym NLName Newsletter Primary key type Generate 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. -
In the Fields tab, click
New Fieldand create the following fields:Name Display Name Type Description email Email Email Customer's email address. isNewsletterOptIn Receive newsletter? Boolean Whether the customer wants to receive the newsletter. name Name Varchar 750 Customer'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
emailandnamefields. - 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.
- Check Is nullable? for the
-
Click
Saveand you will be redirected back to the Data Entity tab. -
In the row of the new
NLentity, click the diskette 💾 to publish the created data entity. -
Click
OK. -
Click the Applications tab to return to the Master Data homepage.
-
Click
Reload applications.
Step 2: Creating a role to create newsletter documents
- In the VTEX Admin, go to Account Settings > User Roles.
- Click
New roleand name it, for example,FS newsletter. - Add the Dynamic Storage product to the role.
- Under Resources, select only the Insert or update document (not remove) permission.
- Save the role.
Master Data permissions apply to all data entities in the account, not only toNL. 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
-
In the VTEX Admin, go to Account > API Keys.
-
In the Generated tab, click
Generate Key. -
Complete the fields with the following:
Field name Description Value example Key identification Name that identifies the key FS NEWSLETTER API KEYRoles Select the role for the key Select only the role created in Step 2, FS newsletter -
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:
-
In the FastStore WebOps dashboard, go to the Settings tab.
-
In the Variables and Secrets section, add each credential below. For each one, set Type to
secret(nottext), fill in Key and Value, and clickAdd.Key Value FS_NEWSLETTER_APP_KEYYOUR_APP_KEYFS_NEWSLETTER_APP_TOKENYOUR_APP_TOKEN -
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:
_10export FS_NEWSLETTER_APP_KEY=YOUR_APP_KEY_10export 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 withNEXT_PUBLIC_, which would send them to the browser. Never commit API credentials to your repository, including invtex.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:- In Master Data, open the
NLentity in the Data Entities tab. - In the Data Entity section, uncheck Allow all document query without filter.
- For each field, uncheck Make readable without credentials, Allow editing without credentials, and Allow filtering without credentials.
- Save and publish the entity, and then click
Reload applications. - 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
| Name | Type | Description | Default |
|---|---|---|---|
| card* | false | true | Enables the card Variant. | |
| colorVariant | "main" | "light" | "accent" | Specifies the component's color variant combination. | main |
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-newsletter |
NewsletterAddendum
| Name | Type | Description | Default |
|---|---|---|---|
| addendum | string | Specifies the addendum for the subscription. | |
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-newsletter-addendum |
NewsletterContent
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-newsletter-content |
NewsletterForm
| Name | Type | Description | Default |
|---|---|---|---|
| onSubmit* | (event: FormEvent<Element>) => void | Function called when submit button is clicked. | |
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-newsletter-form |
NewsletterHeader
| Name | Type | Description | Default |
|---|---|---|---|
| icon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Icon for the section. | |
| title* | string | Title for the section. | |
| description | string | A description for the section. | |
| testId | string | ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest). | fs-newsletter-header |