A new interaction paradigm and seamless touchpoint for personalising customer experience:
affective/cognitive rating of the main action (ex. Subscribe, book, add to cart, wish-list,…”)
can capture real-time customer insights in a collaborative mode
can help enrich the customer profile and user journey personalization
Combi-Action™ button is a patent pending technology of B-sm@rk Ltd.
Introduction
The Combi-Action™ button v1 provides an easy integration of a submit button target.
Figure 1
The Combi-Action™ button (or multi-action button) replaces a standard button and is made of five different areas (buttons):
Button 0: center
Button 1: top left
Button 2: top right
Button 3: bottom left
Button 4: bottom right
It is possible to bind a specific action to each button, this could be:
opening a simple link in the same or in a new browser tab,
executing a custom JavaScript function,
submitting a form.
Our Combi-Action™ button is specifically designed to let users perform two actions in one.
For example: the button in the search feature of a travel agency website can be replaced with the Combi-Action™ button. The user, after having written the destination to search for, can either click on the center button to perform a regular search, or give some more information selecting one of the four side buttons.
These side buttons can be customized by the host site and can contain emotions, short sentences, etc… The host site can do different actions, reacting accordingly if a user selects “I hope to find a good deal” or “I value comfort” while looking for a trip to New York.
The appearance of the Combi-Action™ button is completely customizable. There is a basic CSS file that will shape the element as in Figure 1, this is to ensure the presence of a style for a basic usage. It is possible to define custom styles, some examples will be shown in this guide.
Embedding
To embed the Combi-Action™ button in your page, you first need to identify the regular button you would like to replace. In the HTML, the button must have a unique ID set to it.
Add the following code at the very end of your page, just right above the closing </body> tag:
This will create a configuration object for the button, and load the JavaScript library from our servers.
The Combi-Action™ button is configurable by a variable called “MultiActionButton_Config” set before its loading. The module will read it and, if everything was set up correctly, eventually replace the regular button with the multi-action one.
Configuration parameters for “MultiActionButton_Config”:
Property
Mandatory?
Default value
Type
Notes
buttonId
Yes
String
The ID of the regular button to replace
buttons
Yes
Array.<Object>
See next chapter
spinnerId
No
False
Boolean
The ID of the element to show as “loading” after one clicks the CAB
injectBaseCSS
No
True
Boolean
Set this to false if you don’t want the JavaScript module to inject the base CSS for the CAB
containerClass
No
Null
String
The HTML “class” attribute to give to the CAB container
ONLY IN DEVELOPMENT ENVIRONMENTS: you can set to true a variable called “MultiActionButton_Debug” to receive useful messages in the JavaScript console. In case the CAB won’t initialize, a human-readable error will be reported there. If the variable is set to false or does not exist at all, nothing will be output to the console, which is the desired behavior in a production environment.
Buttons Configuration
The “buttons” array is a list of objects which describes each button. The list is ordered and the first object will be Button 0, the second object will be Button 1, and so on. You can specify more than five buttons, but the extra ones won’t be displayed by default.
A button object must have at least a “label” OR “image” property set. If an image is set, it will display as in the center button in Figure 1, while a text label will display as the rest of the buttons. You can specify images for any button, not only for the one in the center.
A button also requires an action to fire on a click event. If a suitable action is not found, the CAB won’t initialize.
The following are actions you can specify:
opening a simple link,
executing your own JavaScript function,
submitting a form.
It important to note that the CAB must replace an <input> (or <button>) element inside a form, to allow submitting it on click.
Example code:
buttons: [
{image: "images/lens.png"},
{label: "Open link on this tab", href: "test.php?clicked=btn1"},
{label: "My Callback", callback: myCallback},
{label: "Open link in new tab", href: "test.php?clicked=btn3", target: "_blank"},
{label: "Submit form"}
]
If the CAB is replacing a button inside a form:
Button 0 has a “lens.png” image and will submit the form on click,
Button 1 has a text label and will open the set URL in the same tab,
Button 2 has a text label and will execute the myCallback() function on click,
Button 3 will open the set URL on a new tab,
Button 4 will submit the form.
If the CAB is not inside a form, it won’t be initialized in this case, as there are buttons without a valid action set (Button 0 and 4). If no action is set, “form submission” is the default one.
If you have enabled the debug mode, you should receive a clear error message in this last case.
Styling
The CAB comes with a predefined, basic CSS. If you simply embed the CAB, the JavaScript will ensure to inject the CSS file in your page automatically.
However, it is recommended you add this <link> element manually to your page to optimize its loading to your users.
In the same page of the CAB, add the following code inside the <head> section:
If you do so, the JavaScript module won’t inject it on the “document ready” event, you don’t need to set the injectBaseCSS property to false too in this case, as the detection of the basic CSS is automatic.
If you have your own CSS file which overrides most if not every style rule of the basic one, you can simply add your file in the head section and then set injectBaseCSS to false. In this way the only CSS managing the style of the CAB is the one you specified.
If you wish to use the basic CSS, you can either leave containerClass null or set it to “v10”, which is a version of the CAB that comes in the basic CSS. If you want to use your own CSS, we suggest you use a unique class name to set your rules and then add it in containerClass.
Custom Styles
The easiest way to modify the appearance of the CAB is to start from the base CSS we offer and then override a few rules.
Make sure to manually include your CSS file in the head section of the page. It doesn’t matter if you also include the base CSS or not since the JavaScript will do it for you if you haven’t specifically set injectBaseCSS to false. In any case, we recommend you do something like this:
When writing your style, it’s good practice to always specify the container class of the CAB so that you don’t accidentally target other elements outside of it, plus a class name of your choice. If you wish for example to change the color of the center button, you can do the following:
Remember to set containerClass in the configuration object to “myOwnClass”! The rule you’ve just seen is targeting the center button having “combibtn” and “myOwnClass” as classes of the general container element. The “combibtn” class is always added by default, while your class name must be specified in the configuration. This will keep your code tidy and modular, separated by the original CAB one.
We recommend to take a look into the base CSS file to understand what classes are available and what properties are set. In the following list you will find the most useful classes’ names and elements you can override with your own style.
Target
Description
.combibtn
The external container
.combibtn .neutral
The center button
.combibtn .btnArea
All the other buttons
.combibtn .btnArea.top-left
Specifically for Button 1. Useful for setting borders or round corners
.combibtn .btnArea.top-right
Button 2
.combibtn .btnArea.bottom-left
Button 3
.combibtn .btnArea.bottom-right
Button 4
Backend
Now that you have set up the frontend, the backend is straightforward. If the action you’ve set for the buttons is to submit a form, you will receive the user’s choice in your form data. Look in your POST or GET data array for the variable called “MABClicked”, its value is the button clicked.
Button
MABClicked value
Center
0
Top-left
1
Top-right
2
Bottom-left
3
Bottom-right
4
A new interaction paradigm and seamless touchpoint for personalising customer experience:
affective/cognitive rating of the main action (ex. Subscribe, book, add to cart, wish-list,…”)
can capture real-time customer insights in a collaborative mode
can help enrich the customer profile and user journey personalization
Combi-Action™ button is a patent pending technology of B-sm@rk Ltd.
Introduction
The Combi-Action™ button v2 allows greater flexibility than v1, in particular:
you can create and define more than one Combi-Action™ button into the page
Google Analytics event are integrate on click button actions
You can set-up the Combi-Action™ button with a JSON file
The Combi-Action™ button replaces one or multiple standard button with a selector made by five different areas (buttons):
Button 0: center
Button 1: top left
Button 2: top right
Button 3: bottom left
Button 4: bottom right
It is possible to bind a specific action to each button, this could be:
opening a simple link in the same or in a new browser tab,
executing a custom JavaScript function,
submitting a form.
Our Combi-Action™ button is specifically designed to let users perform two actions in one.
For example: the button in the search feature of a travel agency website can be replaced with the Combi-Action™ button. The user, after having written the destination to search for, can either click on the center button to perform a regular search, or give some more information selecting one of the four side buttons.
These side buttons can be customized by the host site and can contain emotions, short sentences, etc… The host site can do different actions, reacting accordingly if a user selects “I hope to find a good deal” or “I value comfort” while looking for a trip to New York.
The appearance of the Combi-Action™ button is completely customizable. There is a basic CSS file that will shape the element as in Figure 1, this is to ensure the presence of a style for a basic usage. It is possible to define custom styles, some examples will be shown in this guide.
Embedding
First of all, add this script in the <head> of you page/website:
Then you need initialize a configuration object and the
Combi-Action™ button builder (CombiActionButton()) on page load, here an example with JQuery:
<script>
// Set Combi-Action button
var buttonConfig = {
targetId: "target-btn-id",
buttons: [
{label: "Button 0"},
{label: "Button 1"},
{label: "Button 2"},
{label: "Button 3"},
{label: "Button 4"}
]
};
// When page is ready, load the Combi-Action button
$(document).ready(function(){
var cabs = new CombiActionButton(buttonConfig);
});
</script>
Configuration parameters available for CombiActionButton() builder:
Property
Mandatory?
Default value
Type
Notes
targetId
Yes
String
The ID of the target button to replace (it must be unique!)
buttons
Yes
Array.<Object>
See next session
gaSetup
No
Null
Array.<Object>
Set Google Analytic event labels, see next session
animationSpeed
No
180
Integer
Initial animation speed in millisecond, set to zero for no animation
containerClass
No
Null
String
An extra HTML “class” attribute which defines the CAB container
injectCSS
No
Null
String
The url of a CSS style sheet to load beside the base configuration. If not provided, a minimized default configuration stylesheet is loaded
key
No
Null
String
A key to remove the "power by mysmark" tag and get extra features. Ask for a quote!
debug
No
False
Boolean
If true, debug mode is activate: you receive useful messages in the JavaScript console. In case the CAB won’t initialize, a human-readable error will be reported there.
Warning!!!: If the configuration object has been not created correctly, the Combi-Action™ button won’t load.
You can define and create multiple Combo-action button with multiple configuration object or through a JSON configuration file, here an example with JQuery:
<script>
$(document).ready(function(){
var cabs = [];
$.getJSON( "http://{YOUR-JSON-URL}/test.json", function(data) {
if(Array.isArray(data)){
$.each(data, function(index,set) {
cabs[index] = new CombiActionButton(set);
});
} else {
cabs[0] = new CombiActionButton(data);
}
});
});
</script>
The JSON file can contain a single configuration object or an array of configuration object:
The “buttons” array is a list of objects which describes each button. The list is ordered and the first object will be Button 0, the second object will be Button 1, and so on.
You must define exactly five buttons object and each one must have at least these features set:
a “label”, it can be just a sting or HTML code; OR “image” link, the image is displayed at the center of button element by default.
an action to fire on a click event, “href” link or “callback” function.
If a suitable action is not found, the Combi-Action™ button won’t initialize; with debug mode activated, you will receive error message about the issue found.
You can define the following actions:
opening a simple link,
executing your own JavaScript function,
submitting a form.
Property
Mandatory?
Default value
Type
Notes
image
Yes*
String
image url link to load inside the button. *it is mandatory if "label" is not defined!!!
label
Yes*
String
label sting or HTML code. *It is mandatory if "image" is not defined!!!
href
No
String
exit url link for the onclick action.
target
No
_self
String
The target attribute specifies a window or a frame where the linked document is loaded. target="_blank|_self|_parent|_top|framename
callback
No
function Object or String
a function object or the name of a global function to use as callback for the click event
Example code:
buttons: [
{image: "images/lens.png"},
{label: "Open link on this tab", href: "test.php?clicked=btn1"},
{label: "My Callback", callback: myCallback},
{label: "Open link in new tab", href: "test.php?clicked=btn3", target: "_blank"},
{label: "Submit form"}
]
If the CAB is replacing a button inside a form:
Button 0 has a “lens.png” image and will submit the form on click,
Button 1 has a text label and will open the set URL in the same tab,
Button 2 has a text label and will execute the myCallback() global function on click,
Button 3 will open the set URL on a new tab,
Button 4 will submit the form.
Warning!!!: If the callback is defined with a string this must be the name of a global function. Otherwise no callback is performed and an error in console log is generated.
Google Analytic Events Setup
If your page has Google Analytic fully loaded and set, the
Combi-Action™ button fires a Google Analytic event on click.
The event label is set with the text content or image link of the button by default. You can set the event Category and Action label with the gaSetup parameter:
Property
Mandatory?
Default value
Type
Notes
eventCategory
No
CAB Event category
String
label for event Category
eventAction
No
CAB Click
String
label for event Action
Styling
The CAB comes with a predefined, basic CSS. If you simply embed the CAB in your page, the JavaScript injects the default CSS file in your page automatically.
For more details, see the uncompressed version of the base configuration:
You can override the base configurations injecting your custom CSS using the injectCSS parameter or adding your style sheet in the <head> after the Combi-Action™ button script, see Embedding session.
The default style sheet uses CSS variables which can be used as shorthand for the more typical configurations:
/* Configure global variable */
:root .combibtn {
--main-height:100px; /* CAB container height */
--central-height:100px; /* CAB central lable height, must be the same of --main-height */
--main-width-max:400px; /* CAB container max width */
--main-width-min:300px; /* CAB container min width, if it is set below 300px, the cab is not very usable. */
--main-br-color: #00abc0; /* CAB container border color */
--main-bgr-color: transparent; /* CAB container background color*/
--lab-br-color: #fff; /* Label border color*/
--lab-br-color-hover: #fff; /* Label :hover border color*/
--lab-bgr-color: #00abc0; /* Label background color*/
--lab-bgr-color-hover: #007d92; /* Label :hover background color*/
--lab-txt-color: #fff; /* Label text color*/
--lab-txt-color-hover: #fff; /* Label :hover text color*/
--lab-txt-extra-padding: 25%; /* Extra padding, this avoids getting too close to the central label */
--lab-txt-size-mobile: 0.8em; /* Set labels font size for mobile */
--transition-speed: 0.05s; /* Label background, color transition speed*/
--transition-mode: ease-in; /* Label background, color transition mode */
--init-animation-speed: 0.1s; /* Sets initial animation transition speed*/
--init-animation-mode: ease-in; /* Sets initial animation transition mode */
}
Combi-Action™ button circular version
You can also use a circular version of the Combi-Action™ button loading the following style sheets and adding to containerClass this extra class: circular.
<script>
// Set Combi-Action button
var buttonConfig = {
targetId: "target-btn-id",
containerClass: "circular",
injectCSS:"https://cab.mysmark.com/cab.v2/css/cab-circular.min.css",
buttons: [
{label: "Button 0"},
{label: "Button 1"},
{label: "Button 2"},
{label: "Button 3"},
{label: "Button 4"}
]
};
// When page is ready, load the Combi-Action button
$(document).ready(function(){
var cabs = new CombiActionButton(buttonConfig);
});
</script>
Backend
Now that you have set up the frontend, the backend is straightforward.
If the action you’ve set for the buttons is to submit a form, you will receive the user’s choice in your form data. Look in your POST or GET data array for the variable called “CABClicked”, its value is the button clicked.
Button
MABClicked value
Center
0
Top-left
1
Top-right
2
Bottom-left
3
Bottom-right
4
If you are using a custom callback function, you can use the event data to retrieve label information, example:
<script>
var mycallback = function(event){
var labelContent = event.target.innerHTML;
alert("Click on:" + labelContent);
}
</script>