Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStore
Newsletter

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

Import

Import the components from @faststore/ui

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

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

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.

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

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)

Nested Elements

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

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.
Local tokenDefault value/Global token linked
--fs-newsletter-card-border-radiusvar(--fs-border-radius)

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.
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

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.
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

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.
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)

Customization

For further customization, you can use 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

Creating the Newsletter data entity in VTEX Master Data

The Newsletter data entity, also known as the NL acronym, is a Master Data entity that stores subscription information for the Newsletter component. This entity enables the newsletter subscription feature for stores using FastStore.
When customers subscribe to the store newsletter, their information is saved in the NL entity. For the newsletter to operate, such as when a user subscribes, the NL entity must be set up in the Master Data.
To create the NL entity, follow the instructions below based on the method you prefer: creating via Admin or creating via API.
For more details about Master Data data entities, see the data entity article.

Creating via Admin

  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
  6. In the Fields tab, create three new fields:
    Field 1
    This field will store the customer's email address for newsletter subscription.
    1. Click New Field and complete the fields with the following values:
      NameDisplay NameType
      emailEmailEmail
    2. Click the gear icon (⚙️) to open the field configuration options and check all the following options:
      • Is nullable?
      • Make readable without credentials
      • Allow editing without credentials
      • Allow filtering without credentials
    3. In the Search and filter settings section, check the Is searchable? and Is filterable? options.
    {"base64":"  ","img":{"width":1357,"height":463,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":29863,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/newsletter-field-1___61c595999569e52175f1de93d9ecd8f0.png"}}
    Field 2
    This field will indicate whether the user will receive the newsletter.
    1. Click New field and complete the fields with the following values:
    NameDisplay NameType
    isNewsletterOptInReceive newsletter?Boolean
    1. Click the gear icon ⚙️ to open the field configuration options and check all the following options:
    • Make readable without credentials
    • Allow editing without credentials
    • Allow filtering without credentials
    1. In the Search and filter settings section, check the Is searchable? and Is filterable? options.
    {"base64":"  ","img":{"width":1359,"height":511,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":33839,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/newsletter-field-2___62281c88b10436ce052707080cc5173e.png"}}
    Field 3
    This field will store the user’s name.
    1. Click New Field and complete the fields with the following values:
      NameDisplay NameType
      nameNameVarchar 750
    2. Click the gear icon (⚙️) to open the field configuration options and check all the following options:
      • Make readable without credentials
      • Allow editing without credentials
      • Allow filtering without credentials
    3. In the Search and filter settings section, check the Is searchable? and Is filterable? options.
    {"base64":"  ","img":{"width":1357,"height":682,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":41773,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/newsletter-field-3___4e7d9fec7f0a827c5d49908df0e2f20b.png"}}
  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.

Creating via API

You can also create the Newsletter data entity using the Create partial document endpoint.
To create the three fields for the Newsletter data entity, see the Create document with custom ID or update entire document endpoint reference.
The field information must be the same as described in Creating via Admin.
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page