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ángl-ES
Gallego
Catalan example
<div>
<clevergy-energy-prices
data-show-energy-price-surplus="true"
data-language="ca-ES"
/>
</div>