Embed to your site
General Instruction
The honestly pledge widget can be embedded to any site or app (using web-view) by loading our remote components
- honesty tag
honesty-pledge
- callbacks or events listener
- remote JS component
In short widget code-block looks like below
<!-- Place the honesty-pledge component anywhere in your app -->
<honesty-pledge client-id='xxxx' client-token='xxxx'></honesty-pledge>
...
<script>
// Listen to pledge events - subscribe to events
window.addEventListener('HONESTY-PLEDGE/FAILURE', function (event) {
console.log(event);
});
window.addEventListener('HONESTY-PLEDGE/SUCCESS', function (event) {
console.log(event);
});
window.addEventListener('HONESTY-PLEDGE/SKIP', function (event) {
// this event is called for for the control group - which the pledge should be skipped
// parent app should treat this event similar as a SUCCESS event
// SKIP event is only active if parameter controlGroupPercent > 0
console.log(event);
});
</script>
<!-- Load the component remotely-->
<script type="text/javascript" src="https://doc.honestypledge.io/pledge.js"></script>
Listen to callback events
Use window.addEventListener
as in above example or alternatively, subscribe to the callbacks as below.
// Alternative: listen to pledge events using callbacks
<script>
document.querySelector('honesty-pledge').onSuccess = function() {
console.log('Succeed') // PLEDGE SUCCESS CALLBACK
}
document.querySelector('honesty-pledge').onFailure = function() {
console.log('Fail') // PLEDGE FAILURE CALLBACK FOR EACH TRY
}
</script>
Parameters
<honesty-pledge
user-id='visitor-unique-id'
client-id='company-abc'
client-token='company-abc'
control-group-percent=20
>
</honesty-pledge>
user-id*
(Required) Pass a unique userId to identify the user, this will be stored for analysis of the same user, DO NOT send personal data such as email in this field.
<honesty-pledge user-id='some-unique-user-id'></honesty-pledge>
pledge-id (optional)
(Optional) Pass a unique pledgeId to identify the pledge, this id is used to connect later relevant data about a claim, quote or expense… in which the pledge is used. DO NOT send personal data such as email in this field.
<honesty-pledge pledge-id='some-unique-pledge-id'></honesty-pledge>
client-id*
Required, your unique client id provided by HonestyPledge Admin
<honesty-pledge client-id='some-unique-id'></honesty-pledge>
client-token*
Required, your unique client token provided by HonestyPledge Admin
<honesty-pledge client-token='some-unique-key'></honesty-pledge>
control-group-percent (optional)
Optional, default is 0, dictate how many percent of users (determined by userId parameter) should skip the pledge. userId will be hashed into a number and take the modulus of 100. The behavior is deterministic for an userId.
The hash function is below. For best effect, make sure userId is uniformly distributed.
const hashCode = s => s.split('').reduce((a, b) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a }, 0)
version (optional)
Optional, short
or full
(default) which dictates how long should the pledge happens
<honesty-pledge version='short'></honesty-pledge>
static-url (optional)
Optional, static hosting url to load images and other static files (most cases leave out)
<honesty-pledge static-url='https://some-static-cdn.com'></honesty-pledge>
<honesty-pledge static-url='/static/clients/demo'></honesty-pledge>
lang (optional)
Add a param lang
or a URL param lang
to change language.
<honesty-pledge lang='de'></honesty-pledge>
Or: http://doc.honestypledge.io/?lang=de
.
Available languages:
en
(English)de
(German)fr
(French)it
(Italian)zh
(Chinese)dk
(Danish)se
(Swedish)
translation
Add a param translation
to change certain text for the current locale
<honesty-pledge
translation='{"socialProof":"We respect the confidentiality of our partners", "title":"Claim Pledge"}'
></honesty-pledge>
Below are the list of key for translations
"title": "Honesty Pledge",
"socialProof": "Swipe to the right to confirm your honesty",
"clarification": "", -- optional text below pledge before swiping
"thankYou": "Thank you. We value your honesty.",
"tryAgain": "Try again.",
"statisticMessage": "Your honesty pledge was fast.",
"statisticMessage2": "Try with slower swipe ✋",
"fatigueMessage1": "Thank you for your honesty.",
"fatigueMessage2": "Please complete your honesty pledge",
"continue": "Continue"
Customize look and feel
You can override all the css from your app to customize the look and feel. For example:
.pledge-title {
color: red !important;
}
Honesty pledge css classes are:
.honesty-pledge
.pledge-wrapper
.pledge-title
.pledge-image-wrapper
.pledge-subtitle
#pledge-status
#pledge-social-proof
#pledge-thank-you
.pledge-btn-wrapper
#pledge-btn
.pledge-next-step
.pledge-continue
Callbacks and events
Callbacks (and/or) events should be placed just after the honesty-pledge
tag. You only need to use one option to receive the status of the pledge from a user.
events
HONESTY-PLEDGE/FAILURE
is emitted each failureHONESTY-PLEDGE/SUCCESS
is emitted once after successfully completed the pledgeHONESTY-PLEDGE/SKIP
is emitted when pledge is skipped by A/B test
<script>
// OPTION 1 - subscribe to events
window.addEventListener('HONESTY-PLEDGE/FAILURE', function (event) {
console.log(event);
});
window.addEventListener('HONESTY-PLEDGE/SUCCESS', function (event) {
console.log(event);
});
window.addEventListener('HONESTY-PLEDGE/SKIP', function (event) {
console.log(event);
});
</script>
callbacks
onFailure
is called each failureonSuccess
is called once after successfully completed the pledgeonContinuation
(availble on request) is called when users click to continue after a successful pledge
<script>
// OPTION 2 - provide callbacks
document.querySelector('honesty-pledge').onSuccess = function() {
console.log('Succeed') // PLEDGE SUCCESS CALLBACK
}
document.querySelector('honesty-pledge').onSkip = function() {
console.log('Skip') // PLEDGE SKIP CALLBACK
}
document.querySelector('honesty-pledge').onFailure = function() {
console.log('Fail') // PLEDGE FAILURE CALLBACK FOR EACH TRY
}
</script>
Data collection
We are collecting the following anonymous data:
Client provided data
- client token
- anonymous user id
- claim id
Pledge data
Pledge data is essential to be collected for improving our algorithm.
- time-stamp
- event type
- session id
- touch force level
- event started time
- event ended time
- duration
- result
- geo-location, ip and user fingerprints