Customizing design and implementation

If you want to make basic changes to the content (change button colour, text etc.), you can do this directly through our application without altering the snippet itself. We will then pass this through to your website

However, if additional customization is required (change all colours, font, and other styles), you can do this by including an extra stylesheet file that overwrites our default styles.

🚧

Editing CSS or Javascript

It is possible to customize our CSS or Javascript to your specific design needs, but our support in these cases if the implementation breaks will be limited

Fonts and colors

If you want to use custom font and color globally for whole embed you need to overwrite .zl-container class with !important declaration.

.zl-container {
  font-family: "Comic Sans MS", sans-serif !important;
  color: #1b7caf !important;
}

📘

Some of the fonts are recognized by browsers but most of them need to be included separately on the page.

Icons and scale

By default NPS scale is displayed as squares with numbers from 0 to 10. By using proper styling this can be changed to some custom version. Please check examples below.

.zl-score {
  background-image: url(https://zenloop-assets.s3.amazonaws.com/embed/star.png);
  background-size: 40px;
  background-color: transparent !important;
  color: #ffffff !important;
}

.zl-score {
  background-size: 34px;
  background-color: transparent !important;
  color: #555555 !important;
  background-position: center;
  background-repeat: no-repeat;
}

.zl-score.zl-promoter {
  background-image: url(https://zenloop-assets.s3.amazonaws.com/embed/promoter.png);
}

.zl-score.zl-detractor {
  background-image: url(https://zenloop-assets.s3.amazonaws.com/embed/detractor.png);
}

.zl-score.zl-passive {
  background-image: url(https://zenloop-assets.s3.amazonaws.com/embed/passive.png);
}

.zl-score-value {
  position: relative;
  top: 30px;
}

.zl-votes {
  margin-bottom: 10px;
}