e-satisfaction

The #1 Humanized Marketing Platform

How can I override the default Badge settings? (v 1.4)

Follow

e-satisfaction Badge works based on the configuration set by the dashboard. However, you can override those settings explicitly on different pages to allow specific behavior.

Generic Options

The generic options are the following:

  • theme: This is the color mode of the badge. It accepts 2 options: "light" and "dark". The default value is "dark".
  • enabled: This option enables the badge, if set to true.
  • mobile_enabled: This option enables the badge in bar mode for mobile devices.

To apply the options, you have to include the parameters like this:


window.esat_badge_config = {
    theme: 'dark',
    enabled: true,
    mobile_enabled: true
};
                                    

Banner

For the banner component, you can set the following options:

  • holder: This is the holder (css selector) where the banner will be appended to.
  • size: This is the size of the badge. Default value is "normal" but you can display a smaller badge using "small".
    • normal option should look nice in a holder with dimensions: 300x250px
    • small option should look nice in a holder with dimensions: 200x160px

To apply the options, you have to include the parameters like this:


// Option 1
window.esat_badge_config.banner = {
    holder: 'BANNER_HOLDER_CSS_SELECTOR',
    size: 'small'
};

// Option 2
window.esat_badge_config = {
    // Other options here

    // Banner options
    banner: {
        holder: 'BANNER_HOLDER_CSS_SELECTOR',
        size: 'small'
    }
};
                                    

 

Bar

For the bar component, you can set the following options:

  • holder: This is the holder (css selector) where the banner (as a bar) will be appended to.
  • style: This is a set of css styles that you can apply extra for the bar mode of the banner.

To apply the options, you have to include the parameters like this:


// Option 1
window.esat_badge_config.bar = {
    holder: 'BAR_HOLDER_CSS_SELECTOR',
    style: 'width: 1200px; background-color: red'
};

// Option 2
window.esat_badge_config = {
    // Other options here

    // Bar options
    bar: {
        holder: 'BAR_HOLDER_CSS_SELECTOR',
        style: 'width: 1200px; background-color: red'
    }
};
                                    

Lightbox

For the lightbox component, you can set the following options:

  • holder: This is the holder (css selector) where the lightbox will be appended to (if the badge_mode is 'lightbox').

To apply the options, you have to include the parameters like this:


// Option 1
window.esat_badge_config.lightbox = {
    holder: 'LIGHTBOX_HOLDER_CSS_SELECTOR'
};

// Option 2
window.esat_badge_config = {
    // Other options here

    // Lightbox options
    lightbox: {
        holder: 'LIGHTBOX_HOLDER_CSS_SELECTOR'
    }
};
                                    

Full Configuration

We can combine all the extensions to override your settings in the following snippet of code:


window.esat_badge_config = {
    // Main configuration
    mode: 'both',
    theme: 'dark',
    enabled: true,
    mobile_enabled: true,

    // Banner options
    banner: {
        holder: 'BANNER_HOLDER_CSS_SELECTOR',
        size: 'small'
    },

    // Bar options
    bar: {
        holder: 'BAR_HOLDER_CSS_SELECTOR',
        style: 'width: 1200px; background-color: red'
    },

    // Lightbox options
    lightbox: {
        holder: 'LIGHTBOX_HOLDER_CSS_SELECTOR'
    }
};
                   

 

Was this article helpful?
0 out of 0 found this helpful

Comments