Enabling Customer Centricity

Badge Configuration: Layout



To view your Application Badge Settings, select "Customer Experience Badge" on the left sidebar on the Application page:


Layout Configuration

From the above section you should be able to edit all the Badge Layout Settings:


Setting Description
Active Turn on/off the Active button in order to display the badge on your website.
Mobile Enable the mobile version to demonstrate the customer experience badge to your customers who access your website via their mobile devices.

Select a specific language from the drop down list or choose auto language detection and adjust the language to visitors browser language.

NOTE: From the drop down list you can view all the available languages we are able to support at the moment.

Display Mode

Select your display mode. Supported types are:

  • Bar
  • Banner
  • Lightbox

Select your Badge Theme. Supported themes:

  • Light
  • Dark
Size Select the badge size to adjust fonts and box size.

The position of the badge, as follows:

  • Bar: It is placed by default inside your <body> tag.
  • Banner or Lightbox: Put the placeholder of the badge in your website (e.g #esat_badge_container)

Position should be css selector. Lear more about css selectors here.

Custom Style You can add custom css rules for your badge
Timespan [Read Only] Defines the number of months where the data are coming from, starting from now and going towards the past.

Badge Language

Current implementation of Badge supports Greek language. Translations for other languages are on their way.

Badge Display Mode

The current settings have 3 display modes:

  • Bar
  • Banner
  • Lightbox

Bar Display Mode

Read more about Badge Display Mode: Bar.

Banner Display Mode

Read more about Badge Display Mode: Banner.

Lightbox Display Mode

Read more about Badge Display Mode: Lightbox.

Badge Theme

Badge has a limited set of themes to match your website. Read more about Badge Theme.

Badge Size

Badge comes in two sizes to adjust to the container it resides:

  • Normal: should look nice in a holder with dimensions: 300x250px.
  • Small: should look nice in a holder with dimensions: 200x160px.
Was this article helpful?
0 out of 0 found this helpful

Have more questions? Submit a request