Newsletter Popup

Promote newsletter subscriptions with a popup

npm run add NewsletterPopup

Use the NewsletterPopup component to display a modal for users to subscribe to a newsletter. They capture user attention effectively, boosting sign-up rates, and their high visibility ensures the offer stands out without relying on page placement.

Join our Newsletter

Don't miss out on important updates! Join now to level up your skills.

Subscribe

---
import { Button } from 'webcoreui/astro'
---

<Button className="button">Show Popup</Button>

<NewsletterPopup
    className="popup"
    title="Preview - card title"
    heading="Join our Newsletter"
    text="Don't miss out on <b>important updates</b>!"
    img={{
        src: '/img/newsletter.png',
        alt: 'Newsletter',
        width: 250,
        height: 300
    }}
/>

<script>
    import { modal } from 'webcoreui'

    modal({
        trigger: '.button',
        modal: '.popup'
    })
</script>

<NewsletterPopup
    className="popup"
    title="Preview - card title"
    heading="Join our Newsletter"
    text="Don't miss out on <b>important updates</b>!"
    img={{
        src: '/img/newsletter.png',
        alt: 'Newsletter',
        width: 250,
        height: 300
    }}
/>

<script>
    import { modal } from 'webcoreui'

    const modalInstance = modal('.popup')

    // Trigger open
    modalInstance.open()
</script>

Only the img and heading props are mandatory for the NewsletterPopup component. By default, it’ll use a form with an email and a “Subscribe” button that can be customized through the form prop, or directly inside the component. The additional props are optional. The component extends the Modal component, meaning you can use modal-specific props as well, such as showCloseIcon or theme.

Automatic Focus

To automatically focus the input field within the popup when it opens, you can extend the modal call with the following onOpen method:

modal({
    trigger: '.your-trigger-selector'
    modal: '.your-modal-selector',
    onOpen({ modal }) {
        modal.querySelector('input')?.focus()
    }
})

Custom Form

You can also define a custom form through the form prop, or edit the default form directly inside the component:

Join our Newsletter

Don't miss out on important updates! Join now to level up your skills.

Join

<NewsletterPopup
    ...
    form={[
        {
            type: 'group',
            fields: [
                {
                    type: 'text',
                    placeholder: 'Name',
                    name: 'name'
                },
                {
                    type: 'email',
                    placeholder: 'Email',
                    name: 'email'
                }
            ]
        },
        {
            type: 'button',
            label: 'Join',
            theme: 'success'
        }
    ]}
/>

API

type NewsletterCardProps = {
    heading?: string
    text?: string
    form?: FormField[]
    img: {
        src: string
        alt: string
        width: number
        height: number
    }
} & ModalProps