BLOATFISH SOCIAL PROOF NOTIFICATIONS USER GUIDE · Social Proof Notifications can be used to show how lively and interactive your store is through the actions of other customers

Copyright © 2020. Orhan Cakici.

BLOATFISH

SOCIAL PROOF NOTIFICATIONS

USER GUIDE

Written by Orhan Cakici

https://orhanc.dev/


1. Description

Social Proof Notifications can be used to show how lively and interactive your store is through the actions of

other customers. You can show how popular and in demand your products are by displaying notifications of

how many visitors are viewing a product at the same time and how many products you have sold.

The notifications will create a sense of urgency to visitors, seeing how popular a product is will create a fear of

missing out. In return this will increase your conversion rate, customer engagement and showing potential

customers your brand and products can be trusted. Social Proof Notifications can be a very valuable

marketing tool for new and growing businesses to attract new customers.

Live Notification

Shows how many customers are viewing the same product at the same time.

Viewed Notification

Shows how many customers have viewed the same product. By default the extension is configured to display

number of visitors who viewed a product in the past 24 hours.

Orders Notification

Shows how many orders have been placed. By default the extension is configured to show number of orders

placed for a product in the past 48 hours.

This extension is very non-developer friendly to use, it comes with default configuration options so you don’t

have to mess around with the settings to get it to work, all you need to do is enable the module and each

notification type you want to display. There are extensive range of options that you can use to change the

style and display behavior of each notification type, they are very easy to understand through descriptive

descriptions on the extension’s configuration page and through this user guide.

You don’t have to sign up for any external services that charge expensive monthly subscriptions for similar

social proof experiences. You only need to purchase this extension once and all future updates are free. This

extension is self-contained, customer information gathered is only stored on your site's Magento database

and is not shared with any other services.

2. Features

● Show your most popular and purchased products through the actions of others and help increase your

conversion rate.

● Basic and advanced CSS support for non-developers, style each notification as you like via the

extension’s admin page.

● Extensive range of configuration options for each notification type, this includes layout, content,

animation, styling and conditions.

● No need to sign up for external services.

● Developer friendly and extendable through the use of service contracts.

https://devdocs.magento.com/guides/v2.3/extension-dev-guide/service-contracts/service-contracts.html


3. Enabling and accessing the Extension

After you have successfully installed the extension and flushed the cache, you will need to enable it.

3.1. Enable the Extension

From the admin backend,

select Stores > Configuration.

The Social Proof Notifications Extension is located under the

“BLOATFISH EXTENSIONS” tab.


Select “Yes” for field Enable Module. The General section has useful information regarding the extension, the

current version you have installed and the latest version available.

3.2. Access the Extension

The location where the extension

resides has changed as of version

1.3.0. You can now access the

extension from Stores >Social Proof

Notifications.


This is the main page of the extension, it lists the type of Notifications the extension providers and which

pages they’re available in. As of version 1.3.0, Notifications (Live, Viewed & Orders) are available on the

Catalog Product page.

If you want to edit the configurations of the notifications on the “Catalog Product” page, click on the “Edit”

button under the column “Action”. By default, all Notifications on a page type (in this case Catalog Product)

are disabled.

3.3. Enable Notifications

To enable Notifications on the Catalog Product Page, expand the Notifications section and then expand each

section labelled as Live, Viewed & Orders.

You decide which Notification types you want to enable, after making changes make sure to save and clear all

invalidated cache types.


4. Layout

Visit a product page, after the page loads you will see the Notifications you have enabled appear (if the

defined conditions for each notification is true) fixed to the bottom right of the page. This is the location where

notifications are styled and positioned to appear by default.

You change the position of where Notifications appear on a product page, as of version 1.2.0 there are five

positions:

• Fixed to Window (Fixed to the browser window, will always remain in the same position on the

page no matter where you scroll and is above everything)

• Fixed to Media (Fixed to “Media” container)

• Fixed to Info Main (Fixed to “Info Main” container)

• Price After (Appended after the “Price” container)

• AddToCart After (Appended after the “AddToCart” container)


Layout > Position

Fixed to Media

Notifications are fixed within the “Media” container


Fixed to Info Main

Notifications are fixed within the “Info Main” container

The positions of “Price After” and “AddToCart After” is different depending on your theme and product type.

Below are screenshots of every default product type supported in Magento 2 Open Source, they highlight on a

product page where these positions are designated in the default Magento 2 Luma theme. If you’re using a

heavily modified theme where the location of layout blocks/containers are radically different from the Luma

theme, the position you might select could be different from the one shown on the screenshots, its best you

test on a development environment before applying on live.

If you’re a developer or know your way around the Magento 2 codebase you can change where the

Notifications are outputted. More information on how to do this can be found in the Magento 2 docs.

https://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-instructions.html#fedg_layout_xml-instruc_ex_mv


Configurable Product

Simple Product

ADDTOCART AFTER

PRICE AFTER

ADDTOCART AFTER

PRICE AFTER


Bundled Product

Grouped Product

ADDTOCART AFTER

PRICE AFTER

ADDTOCART AFTER

PRICE AFTER


Downloadable Product

Virtual Product

ADDTOCART AFTER

PRICE AFTER

ADDTOCART AFTER

PRICE AFTER


5. Styles

You can change or extend the built-in styles through the extension's configurations or through your theme.

There are two “Edit Mode” options to choose from to make changes to the default styles, those are “Basic”

and “Advanced”.

5.1. Basic Styles

Using basic styles is the least customizable option but the safest method for those who are not familiar with

CSS syntax.

You can change the following color options for Notifications:

● Text

● Background

● Border

Social Proof Notifications uses the Pickr Javascript color picker library to power the picking functionality. Click

on the square block next to a “Color” option to activate the color picker. You can select the color you like by

using the sliders, or you can enter a HEX/RGBA value. Once you’re happy with your changes click on the

“Save” button.

https://github.com/Simonwep/pickr


Entering a HEX value will automatically convert it to a RGBA value as seen in the text field next to the color

picker box, this is the color model used on the frontend.

5.2. Advanced Styles

Using the advanced styles option will give you more control over the styles of your Notifications, without

having to make changes through your theme’s stylesheets. It is highly recommended that you have basic

CSS syntax knowledge, or any invalid changes you make will result in your Notifications not appearing on the

frontend.

There are five CSS editor fields for Notification styles:

● Parent Container - The parent container which contains all Notification types.

● All Notifications - Applied to each Notification.

● Live Notifications - Only applied to Live Notifications

● Viewed Notifications - Only applied to Viewed Notifications

● Orders Notifications - Only applied to Order Notifications


Each CSS editor field represents a CSS ruleset, you won’t be able to edit/remove the first or last line in a

ruleset as it is crucial for a valid CSS syntax. The first line is a selector which targets the element the styles

will be applied to. You can only make changes or additions to existing CSS declarations between the first and

last lines. You can read more about CSS syntax from the W3School website. The CSS editors are powered

by the CodeMirror Javascript library.

The CSS editor fields don’t display all the styles that are applied on the frontend, there are some required

styles which you cannot modify or remove as its essential for the powering of the Notifications. With new

features added, the required styles get updated with each new release. As of now required styles cannot be

personalised through the extension’s configuration.

https://www.w3schools.com/css/css_syntax.ASP

https://github.com/codemirror/CodeMirror


Below is a code output of the required styles used on the frontend:

#bloatfish-socialproofnotifications-container { pointer-events: none; } #bloatfish-socialproofnotifications-container > * { opacity: 0; } #bloatfish-socialproofnotifications-container .text { width: 100%; } #bloatfish-socialproofnotifications-container .icon { max-width: none; margin-right: 10px; } #bloatfish-socialproofnotifications-container .container-inner { display: flex; align-items: center; } .catalog-product-view .product-info-main, .catalog-product-view .product.media { position: relative; } #bloatfish-spn-product-fixed-window #bloatfish-socialproofnotifications-container { position: fixed; } #bloatfish-spn-product-fixed-media #bloatfish-socialproofnotifications-container, #bloatfish-spn-product-fixed-infomain #bloatfish-socialproofnotifications-container { position: absolute; } #bloatfish-spn-product-price-after #bloatfish-socialproofnotifications-container, #bloatfish-spn-product-addtocart-after #bloatfish-socialproofnotifications-container { position: static; } @keyframes socialProofNotificationsFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes socialProofNotificationsFadeOut { from { opacity: 1; } to { opacity: 0; } }


6. Animation

You can specify the speed, duration and delay options for each Notification type through the extension's

configurations. Currently the only supported animation type is linear fade in and fade out.

Speed

Set Notification show/hide speed (in seconds). The higher the value the slower a Notification fades in and

fades out.

Show

Show Notification(s) x seconds after they've been loaded on a product page. You can set a single value to

apply to all Notifications or a value for each Notification separated by a comma. Notifications are in the order

of Live, Viewed, Orders.

For example, entering "2" will show all Notifications after 2 seconds. Entering "0" will all Notifications instantly

after they're loaded. You can also set a value for each Notification. For example, entering "2,4,6" will show

Live Notification after 2 seconds, Viewed Notification after 4 seconds and Orders Notification after 6 seconds.

Duration

The length of time in seconds Notifications are visible.

For example, entering "4" will display all Notifications for 4 seconds and then fade out. If you have entered in

the "Show" field a value of "0", then all Notifications will appear immediately (0 seconds) after being loaded

and stay visible for the length of time specified in this field. Set value to "0" to always show.

7. Notification Configurations

All Notifications

Minimum Count

Show Notification if count is over the set minimum. Setting the value as "0" will not set a minimum threshold.

Icon

Upload image to use as an icon. Supported file types: jpg, jpeg, gif, png, svg.


CSS Styles

Styles will be applied to the Live/Viewed/Orders Notification.

Live Notification

Singular Display Text

Set the singular text you want to display if count is one. The only allowed digit is "1".

Plural Display Text

Set the plural text you want to display if count is more than one.

{{count}} placeholder will be rendered as the actual count.

Viewed Notification

Period

Set the period of time (hour) a product was viewed. Minimum value is "1" hour, maximum value "168" hours.

The default value is "24" hours. The Viewed Notification will show how many visitors viewed a product in the

past 24 hours.

Orders Notification

Period

Period of time (hour) orders were placed. Minimum value is "1" hour, maximum value "168" hours.

The default value is "48" hours. The Orders Notification will show how many orders were placed for a product

in past 48 hours.

Live & Viewed Notifications

Minus Current User

When a visitor views a product, they are added to the count total, setting this config to "Yes" will minus 1 from

the count total.

Viewed & Orders Notification Configurations

Singular Display Text

Set the singular text you want to display if count is one.

{{period}} placeholder will be rendered as the period value set in the field "Period".

The only allowed digit is "1".

Plural Display Text

Set the plural text you want to display if count is more than one.

{{count}} placeholder will be rendered as the actual count.

{{period}} placeholder will be rendered as the period value set in the field "Period".


8. CLI Commands

The extension adds a custom CLI command, below is an output of its usage and available arguments.

Usage:

socialproofnotifications:catalog-product:count <type> <product_id> [<period>]

Arguments:

type Notification type: [live|viewed|orders]

product_id Product ID

period Period in time(hours) a product was viewed [default: 24]

You can use this command to show count for a notification type on a product page, it can be used for

debugging purposes.

9. Limitations

As of version 1.0.0, the Orders Notification does not work on product type “Grouped”, this is because the

product type is made up of multiple products.

10. Notice

The Notification icons supplied with this extension were created by me and were based on similar designs

found on the web.

11. Feedback

I’m a lone developer who created this extension, it started off with the desire to learn Magento 2 but it quickly

became something much bigger. I have many more ideas I wish to incorporate into this extension and expand

it into something more dynamic, I would like to hear all your feedback and feature requests. I will try to answer

all your questions within 24 hours.

Developers are welcome to make additions to the extension to suit their needs. I plan on maintaining this

extension until Magento 2 sunsets and will be tested against every Magento 2 minor and patch versions to

check for compatibility.

Email: [email protected]

Website: orhanc.dev

mailto:[email protected]

http://orhanc.dev/

Documents

BLOATFISH SOCIAL PROOF NOTIFICATIONS USER GUIDE · Social Proof Notifications can be used to show how lively and interactive your store is through the actions of other customers