Client Library

Introduction

To get the most out of LikeKnob, you can take advantages of the advanced configuration object:

Don’t know how to design? Don’t know how to write JS, HTML or CSS? Contact Me!

var maxWidth = 215 // max width of rating bar and tooltip
var defaultOptions = {
    tooltipMessageWhenRatingAlreadySent: 'Already sent!',
    tooltipMessageWhenRatingIncomplete: 'Specify a Rating first!',
    tooltipMessageWhenRatingSent: 'Rating sent!',
    tooltipMessageWhenSentFailed: 'Couldn\'t send rating to server! Could you try again?',
    tooltipDisplayInMS: 2500,
    cssReset: false,
    question: "What did you not like about this page?",
    inputPlaceholder: 'Type answer here...',
    devMode: {
        bool: false,  // general dev mode switch, further options will not do anything if this is disabled // changes url to localhost
        sendData: true, // when false, sends & saves no data
    },
    ratingBarContainerClass: "", // all class options are directly set to the className attribute in JS, so multiple classes are separated through a space
    questionContainerClass: "",
    questionClass: "",
    inputClass: "",
    buttonContainerClass: '',
    sendButtonClass: "",
    ratingBarContainerStyle: 'display: block; position:relative; max-width: ' + maxWidth + 'px;',
    questionContainerStyle: 'display: block;' +
        'margin-top: 1.5rem;',
    questionStyle:
        'font-family: sans-serif;' +
        'color: #000;' +
        'font-size: 100%;',
    inputStyle: 'background-color: #f7f7f7;' +
        'outline: none;' +
        'border: none;' +
        'padding: .5rem;' +
        'font-family: sans-serif;' +
        'width: 100%;' +
        'font-size: 100%;' +
        'color: #6e6e6e;' +
        'box-sizing: border-box;' +
        'margin-top: .5rem;',
    buttonContainerStyle: '',
    sendButtonStyle:
        'cursor: pointer;' +
        'padding: .5rem;' +
        'margin-top: 1rem;' +
        'background: #000;' +
        'color: #fff;' +
        'font-family: sans-serif;' +
        'transition: transform 0.5s ease;' +
        'border: none;',
    sendButtonHoverTransform: true,
    tooltipStyle: 'width: ' + maxWidth + 'px;' +
        'background-color: #666666;' +
        'color: #ffffff;' +
        'text-align: center;' +
        'padding: 5px 0;' +
        'border-radius: 5px;' +
        'position: absolute;' +
        'z-index: 1;' +
        'bottom: 125%;' +
        'left: 50%;' +
        'margin-left: -' + maxWidth / 2 + 'px;' +
        'opacity: 0;' +
        'transition: opacity 0.6s;'
}

var rating1 = document.getElementById('rating')

likeKnob(rating1, "<uuid>", {})
by