Website Popup Builder: Sign-up Forms & Announcement Bars

About the Website Popup Builder: Sign-up Forms & Announcement Bars

Build the promotions that site builders and plug-ins usually charge for every month, and run them from one small file on your own site: an announcement bar at the top or bottom with messages that take turns, a popup with an email sign-up, a discount code or a notice, a slide-in in a corner, a sticky button (a chat or call link), and a countdown to the real end of an offer in the time zone you choose.

Choose when each one shows — as the page opens, after a few seconds, after scrolling, when the visitor heads to leave, or when a button on your page is clicked — on which pages, on which devices, for new or returning visitors, and how often. Every widget runs on the sample page as you change it. With a Pro pass you get the code: paste one snippet into your site builder’s custom-code box, or upload one file, and keep as many campaigns in this browser as its storage holds. Without a pass, the free preview runs every widget on the sample page and shows the first lines of the code.

Common uses

• Online shops announcing delivery thresholds, sales and new collections.
• Collecting newsletter sign-ups into your own Google Sheet or email provider.
• Offering a discount code to visitors who are about to leave.
• A sticky chat or call button for local businesses.
• Notices such as holiday hours or a shipping delay, shown once a visit.

Accessible by design

• A popup is a modal dialog: the focus moves into it, stays inside it while it is open, and goes back where it was when it closes; Esc and the × button close it, and so does a click beside it.
• A slide-in, a bar and a sticky button never take the focus, so nobody is pulled away from what they are reading.
• A bar with several messages has a pause button, and stops while the pointer or the keyboard focus is on it.
• The countdown is read out as “2 days, 4 hours, 12 minutes” instead of the ticking digits, and nothing moves for visitors who ask their device for reduced motion.
• Buttons and close controls are at least 32 px across (WCAG 2.2 asks for 24), every field has a visible label, and the checks warn when text or a button falls below a 4.5:1 contrast (WCAG AA).

Where sign-ups go

Sign-ups go straight from your visitor’s browser to the address you choose; MySmartCoPilot never sees them. Two ways work well: - A Google Sheet: make a form with an Email field (and a consent box) in the HTML form builder, deploy its sheet script, and paste the script’s address here with the same field names. - Your email provider: paste the embed code of the provider’s sign-up form. The page reads the form’s address, the email and first-name fields, the hidden fields it needs and any consent checkbox from it — nothing from the code runs. Most providers accept the sign-up in the background; if yours asks the visitor to confirm on its own page, choose the new-tab option.

The consent box is never ticked in advance, and you choose whether it is required.

Storage, cookies and consent

The widgets set no cookies. To know how often a campaign has shown, whether a visitor is new and which A/B version they see, they keep a few small entries in the visitor’s browser storage. The European Data Protection Board’s Guidelines 2/2023 on the technical scope of Article 5(3) of the ePrivacy Directive (version 2.0) count any information a website instructs the browser to store, for any length of time, as storage under Article 5(3), which needs the visitor’s consent unless an exemption applies; the guidelines leave the exemptions to be assessed case by case.

So you choose: wait for my consent banner keeps everything in memory for the page view until your banner calls MSCPopups.allowStorage(), and remember straight away is for sites that do not need consent for this. The page starts with the first option when you open it from the EEA, the UK or Switzerland; choose the one that fits your site’s visitors.

For your own scripts

• MSCPopups.open("id") opens a campaign, and any element with data-msc-open="id" opens it when clicked.
• MSCPopups.exit() opens the campaigns waiting for the visitor to leave, for example from your own back-button handling.
• Every showing, closing, click and sign-up fires a msc:popup event on window with the campaign’s id, name and A/B version, so your analytics can count them.
• The file runs once even if it is added twice, waits until the page has loaded, and works in the browsers of the last several years.

Limitations

• Leaving the page can only be seen with a mouse, so exit campaigns do not show on phones and tablets.
• The discount code appears in a field that selects itself; visitors copy it with the keyboard or a long press.
• Sign-ups sent in the background cannot report whether the provider accepted them (browsers hide the answer from other sites): send one test sign-up to check.
• Your site builder must allow custom code (most do, sometimes only on paid plans of that builder), and a strict Content-Security-Policy on your site must allow the script and its stylesheet.
• MySmartCoPilot does not host the file: paste the code into your site or upload the file there.

Privacy

On this device: nothing is sent

Everything happens in your browser. Your campaigns are saved in this browser only, and the sample page sends nothing: a sign-up there is only shown on the page. A picture you add is loaded from the address you give, as it will be on your site. On your site, the widgets talk to nothing but the form address you set (and the picture’s address).