Solar Calculator Embed
Customization
The solar calculator can be customized by adding more data-sme-… attributes to the <div> container element.
Example
<div
data-sme-pid="<your partner id>"
data-sme-wmid="<the embed id>"
data-sme-color-background="#000000"
data-sme-color-text="#FFFFFF"
></div>
<script src="https://www.selfmade-energy.com/embed/embed.js" defer async></script>
Available Options
| Attribute | Value type | Description |
|---|---|---|
data-sme-color-background | RGB color, e.g. #ffffff | Page background color |
data-sme-color-text | RGB color, e.g. #000000 | Text foreground color |
data-sme-color-primary | RGB color, e.g. #ff0000 | Primary brand color, used e.g. for buttons |
data-sme-color-secondary | RGB color, e.g. #00ff00 | Secondary brand color, used e.g. for progress bar |
data-sme-color-tertiary | RGB color, e.g. #0000ff | Tertiary brand color, used e.g. for selection tiles |
data-sme-color-neutral | RGB color, e.g. #666666 | Neutral color, used e.g. for smallprint |
data-sme-font-family | CSS font stack, e.g. Helvetica Neue, sans-serif | Font used for rendering UI text |
data-sme-zip-code | 5-digit German zip code (PLZ), e.g. 12345 | Prepopulate the zip code field and skip the first step |