zenloop Developer Hub

Welcome to the zenloop developer hub. You'll find comprehensive documentation to help you start working with zenloop as quickly as possible, as well as support if you get stuck. Happy looping!

Get Started    

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;
}

Alt textAlt text

📘

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;
}

Alt textAlt text

.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;
}

Alt textAlt text

Updated 3 years ago

Customizing design and implementation


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.