Skip to main content

Include energy prices microfrontend

This is a guide to help you integrate the prices microfrontend in your application.

Insert the microfrontend​

You are ready to include the prices microfrontend inside your application. To do so, you can add this snippet inside the section where the prices microfrontend will be.

Insert the microfrontend
<html>
  <head>
    <!-- [...] -->
    <script
      type="module"
      src="https://assets.clever.gy/clevergy-modules.js"
    ></script>
    <!-- [...] -->
  </head>
  <body>
    <!-- [...] -->
      <clevergy-energy-prices />   
    <!-- [...] -->
  </body>
</html>

You should view this microfrontend in your application now.

Customizing the microfrontend​

All microfrontends allow you to customize them using different parameters.

Try adding the surplus to that microfrontend by setting the data-show-energy-price-surplus to true and see what happens.

Show surplus prices enabled
  <div>
  <clevergy-energy-prices
    data-show-energy-price-surplus="true"
    ></clevergy-energy-prices>
  </div>

Changing the language

All modules are shown in Spanish by default. To specify the language there is an optional parameter for it named data-language which allows these values:

  • es-ES Spanish (by default)
  • ca-ES Catalán
  • gl-ES Gallego
Catalan example
  <div>
    <clevergy-energy-prices
      data-show-energy-price-surplus="true"
      data-language="ca-ES"
      />
  </div>