Documentation

Knowledge Base

Answers, guides and best practices for ComfortClick bOS.

Open in Confluence

Email Consumption Report HTML Example

This example provides a consumption report email template that uses consumption values from bOS and displays them in a more modern and visually appealing format.

You can use this template as a starting point and adjust it according to your project requirements.

Users with HTML knowledge can create their own custom email templates, including formatted text, tables, images, graphs, and other building-related information.

You can also use AI tools to help generate or improve the HTML code for your custom email design.

Video explaining the whole process of editing HTML code and using your custom bOS values:

https://www.youtube.com/watch?v=PBpzVFAC3Fw&t=2s

Full HTML code for the consumption report:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Consumption Report</title>
</head>
<body style="margin:0;padding:30px 0;background-color:#f4f6f8;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f4f6f8;">
  <tr>
    <td align="center" style="padding:0;">
      <table role="presentation" width="600" cellpadding="0" cellspacing="0" style="background-color:#ffffff;border-radius:8px;max-width:600px;width:100%;">
        <tr>
          <td style="background-color:#0f7a6b;padding:22px 32px;border-radius:8px 8px 0 0;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="font-size:20px;color:#ffffff;font-weight:bold;font-family:Arial,Helvetica,sans-serif;">⚡ Consumption Report</td>
              </tr>
              <tr>
                <td style="font-size:12.5px;color:#d8f0ec;font-family:Arial,Helvetica,sans-serif;padding-top:2px;">ComfortClick Meter Reading</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="padding:24px 32px 8px;font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#333333;">
            Hello,<br>
            Please find below your latest consumption reading.
          </td>
        </tr>
        <tr>
          <td style="padding:20px 32px;text-align:center;border-bottom:1px solid #eeeeee;font-family:Arial,Helvetica,sans-serif;">
            <div style="font-size:40px;font-weight:bold;color:#0f7a6b;line-height:1.2;">%0<span style="font-size:16px;color:#888888;font-weight:normal;"> kWh</span></div>
            <div style="font-size:12.5px;color:#999999;margin-top:4px;">Electricity Meter — July 2026</div>
          </td>
        </tr>
        <tr>
          <td style="padding:16px 32px 4px;font-family:Arial,Helvetica,sans-serif;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td style="padding:8px 0;color:#777777;font-size:14px;border-top:1px solid #f0f0f0;">Meter / channel</td>
                <td align="right" style="padding:8px 0;color:#333333;font-weight:bold;font-size:14px;border-top:1px solid #f0f0f0;">Electricity Meter</td>
              </tr>
              <tr>
                <td style="padding:8px 0;color:#777777;font-size:14px;border-top:1px solid #f0f0f0;">Reading date</td>
                <td align="right" style="padding:8px 0;color:#333333;font-size:14px;border-top:1px solid #f0f0f0;">10 July 2026</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td style="background-color:#f4f6f8;padding:14px 32px;text-align:center;font-size:11px;color:#999999;font-family:Arial,Helvetica,sans-serif;border-radius:0 0 8px 8px;">
            Generated from ComfortClick · 10/07/2026
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
Top