If you see a small card in the bottom corner of this page, that’s it.

What it does

SmartBanner shows a small floating card in the bottom corner of every page, promoting a blog post you choose. It uses the post’s title, a short excerpt and its featured image, and adds a button that takes the visitor to the article. One click on the X closes it, and it stays closed.

Four steps, one screen

1. What do you want to promote? Pick a post from a list grouped by month, newest first. Or write your own message and send the button anywhere you like: a service page, a form, another website.
2. Text, image and button. Everything is filled in from the post, but you can change any of it: a small label above the title (for example “New on the blog”), the title, the text, the image and the button.
3. When does it appear? After a few seconds, not the instant the page loads. When a visitor closes it, you decide how long it stays hidden: until the browser closes, an hour, a day, 30 days, up to a year. When you promote a new post, everyone sees the banner again.
4. Look and position. Bottom left or bottom right, the distance from the edges and the button colours. If the button text would be hard to read on your colour, it tells you.

Next to the settings there’s a live preview for desktop and mobile, shown at its real size relative to the page. Everything you type appears there straight away. A single main switch turns the banner on or off instantly.

Made for multilingual sites

Our own site runs in English and Greek with WPML, so this was part of the plan from day one. SmartBanner reads your site’s languages and gives each one its own tab. Pick a post in English and it picks the Greek translation for you. You can promote a different post in each language, or switch the banner off in one of them. Closing the banner in one language doesn’t hide it in the others.

The settings screen itself switches between English and Greek with one click, for each user separately.

At home on mobile

• On phones the card spans the width of the screen.
• You can hide the image to make it smaller, or not show the banner on mobile at all.
• It stays clear of the iPhone home bar.
• It sits below your theme’s menu, popups and cookie notices. If it ever overlaps something, you can adjust its layer from the settings.

Light and careful

• No external services, no extra fonts and no tracking. It uses your theme’s fonts.
• The only thing it keeps in the visitor’s browser is a cookie that remembers they closed it.
• One small stylesheet and one small script, loaded only when there’s a banner to show.
• Only published, public posts can be promoted. Password-protected posts never appear in the list.
• It respects the “reduce motion” setting of the visitor’s device.

Why it’s in the Lab

The Lab is where we share the tools we build for our own work. SmartBanner started as something this site needed, and it now runs here every day.

Would you like SmartBanner on your website, or a tool like it built around your needs? Get in touch.

The post SmartBanner-A Lightweight WordPress Plugin appeared first on Smartup.