It makes me "sick" and "sad" when I come to an online sales site and I find an excellent product, but which I think is a little too expensive and completely unable to offer the seller a discount on it, here it is the most big problems of all online sales sites, no interaction, inert interfaces that do not benefit either the customer or the seller, or, he himself can agree to sell his product with a percentage of reduction, Hono is therefore to resound this great interaction problem that is missing at all ecommerce sites in the world by allowing the customer to offer the price that fits best and thus exchange with the seller.
The important thing, you need to know here is that, with this button, you will INCREASE your traffic, because, more customer will try their chance and can propose you a suitable amount for you too as the seller.
Hono connects the Customer who wants to offer a price that is affordable for a product and the seller in two steps, first, it verifies that the margin of reduction of the seller card with what the customer proposes then, send the information of the customer to the seller and the price the customer wants for the product in question, all of which is done using a number of html attributes
<!DOCTYPE html>
<html>
<head>
<title>Your Product page</title>
<!-- Include the Hono's CSS file -->
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/Sanix-Darker/Hono/master/assets/css/hono.css">
</head>
<body>
...................
<button>Add to Cart Button</button>
...................
<!-- Include the Hono Button (Most Important) Configurations -->
<!-- data-emailseller : Seller's Email / L'email du vendeur -->
<!-- data-product-title : Product's Title / Le nom/titre du produit/article -->
<!-- data-product-currency : Product's currency / La monaie du produit -->
<!-- data-product-amount : Product's amount / Le prix du produit -->
<!-- data-product-margin-amount : Amount's margin of the product / La marge ou le pourcentage de reduction en % -->
<span id="div_hono" data-emailseller = "[email protected]"
data-product-title ="Wolfpack Jacket - Black"
data-product-currency ="USD"
data-product-amount ="1,599.95"
data-product-margin-amount ="20"
></span>
...
<!-- Include the Hono's JS script -->
<script type="text/javascript" src="https://raw.githubusercontent.com/Sanix-Darker/Hono/master/assets/js/hono.js"></script>
<!-- And it's ALL -->
</body>
</html>/*
* Hono Styles buttons
* You just have to add classes in the attribute: "data-button-class"
*
* // Fade Style
* Example: data-button-class = "honobtnFade honobtnBlueGreen"
* Available colors:
- honobtnBlueGreen
- honobtnLightBlue
- honobtnOrange
- honobtnPurple
*/
/*
* // Push Style
* Example: data-button-class = "honobtnPush honobtnBlueGreen"
* Available colors:
- honobtnBlueGreen
- honobtnLightBlue
- honobtnOrange
- honobtnPurple
*/
/*
* // Border Style
* Example: data-button-class = "honobtnBorder honobtnBlueGreen"
* Available colors:
- honobtnBlueGreen
- honobtnLightBlue
- honobtnOrange
- honobtnPurple
*/
/**
* ------------------------------------------------------------------
* You can personnalize the elements in the Modal
* Allready Present in the hono.css, you just have to configure them
* ------------------------------------------------------------------
*/
/* The Price/Amount input's Style */
#hono_modal #myprice{ }
/* The Title's style of the modal*/
#hono_modal #hono_prix_box h3{ }
/* The Currency Style */
#hono_modal span#currency{ }
/*The Next Step button's style */
#hono_modal #hono_suivant{ }
/*The Send button's style */
#hono_modal #hono_envoyer{ }
/*The Phone number input's style */
#hono_modal #hono_numeroTel{ }
/*The Email input's style */
#hono_modal #hono_Email{ }
/*The Message Textarea's style */
#hono_modal #hono_Message{ }| Required | Attribute | Description | Type |
|---|---|---|---|
| yes | data-emailseller | This attribute contains the email of the seller, Hono will use it to send the mail. | String |
| no | data-product-image | This attribute contains the path of th image(The absolute path) | String |
| yes | data-product-title | This attibute contains the title of the product | String |
| yes | data-product-currency | This attribute contains the currency of the product | String |
| yes | data-product-amount | This attribute contains the amount/price of the product | Float |
| yes | data-product-margin-amount | This attribute contain the reduction marge to apply on the amount, it's what Hono will use to control if what the customer enter is in the acceptable marge of the amount that the seller want | Float |
| no | data-button-lang | This attribute control all the language of the Hono systeme, now it's can work with: en, fr, sp, ge | String |
| no | data-number-trying | This attibute is the limit number that is allow to a customer to hit his amount proposition in the modal | Int |
| no | data-autoload-action | This attribute control the way the button will appear -'onclosepage' [The button will appear if the customer try to close the page and cancel it in the end], -'onclick' [This is the default value], -'onCallBack' [The button will appear by calling the function 'honolaunch()' ], -'onwait-10' [This value is to configure a timeout before the button appear]) |
String |
| no | data-button-position | this attribute set the button position we have (standard, float-left and float-right) | String |
| no | data-button-css | If you have a personnal style you want to add on Hono Button this attribute is for you | String |
| no | data-button-class | If you have a personnal class you want to add on Hono Button this attribute is for you | String |
 |
 |
 |
 |
 |
You can Try the DEMO HERE, But you need to change the emailseller attribute to receive the mail as the seller.
Customer's Test | |
|
|
Inbox's Email of the Seller, _*LOOK AT YOUR SPAM TOO*_ | |
|
|
Hono's TCHAT platform | |
|
|
- Adding a config file for smtp server for sending mail (assets/js/hono.js At line [434 - 436] ).
- Adding an SMS services same as mail to notify better users.