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:

<script>
var MultiActionButton_Config = {
		buttonId: "searchBtn",
		containerClass: "v10",
		buttons: [
			{image: "img/lens.png"},
			{label: "Button 1"},
			{label: "Button 2"},
			{label: "Button 3"},
			{label: "Button 4"}]};
</script>
<script src="https://www.mysmark.com/js/MultiActionButton.js"></script>

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”:

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:

<link href="https://www.mysmark.com/css/modules/embed/multi-action-button.css" type="text/css" rel="stylesheet">

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:

<link href="https://www.mysmark.com/css/modules/embed/multi-action-button.css" type="text/css" rel="stylesheet">
<link href=”css/my-own-mab-style.css” type=”text/css” rel=”stylesheet”>

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:

.combibtn.myOwnClass .neutral {
	background-color: #e24257;
	border-color: #e24257;
}

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.

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.

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:

<script src="https://cab.mysmark.com/cab.v2/js/CombiActionButton.js"></script>

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:

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:

[{
   "targetId": "target-btn-id-1",
   "buttons": [...],
	...,
  },
  {
   "targetId": "target-btn-id-1",
   "buttons": [...],
	...,
  },
  {
   "targetId": "target-btn-id-1",
   "buttons": [...],
	...,
  },
  ...,
]

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 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.

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:

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:

<link href="https://cab.mysmark.com/cab.v2/css/cab-base.min.css" type="text/css" rel="stylesheet">

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.

See uncompressed style sheet for more details:

<link href="https://cab.mysmark.com/cab.v2/css/cab-circular.css" type="text/css" rel="stylesheet">

 
Minify version:

<link href="https://cab.mysmark.com/cab.v2/css/cab-circular.min.css" type="text/css" rel="stylesheet">

 
Configuration code example:

<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.

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>